EvaluateSlot

by Sure Sure

HTML

<!DOCTYPE HTML>
<body>
<div class="layerTransparent">
<div id="outer">
<div class="display" id="inner">
<p1>Road to Bingo!</p1>
<td valign="top">
<input type="text" id="display">
<img id="image" height=200 width="200" src="">
<br>
<button type="button" id="start">START</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" id="stop">STOP</button>
<br>
<br>
<br>
<br>
<br>
<p2>Results</p2>
<br>
<textarea name="result" id="result" cols="20" rows="20"></textarea>
<br>
<button type="button" id="reset">RESET</button>
</div>
</div>
</div>
</body>

CSS

body{
background-image : url(https://4.bp.blogspot.com/-t_923UbmKwc/VvPgubfSgSI/AAAAAAAAKVk/2jwBbj9brMIfLisDwTh9PeUznfjJQ3TWg/s1600/rtdpcwp_02.jpg);
background-size:100%;
}
p1 {
    text-align:center;
    font-size:130px;
		font-weight: 900;
		font-family: Meiryo_UI;
		letter-spacing: -13px;
		color: #009000;
	 text-shadow:
	 3px 3px 1px #EFE,
   -3px 3px 1px #EFE,
   3px -3px 1px #EFE,
   -3px -3px 1px #EFE;
}
iframe{
  width:100%;
  height:100%
  border:none;
  display:block;
}
#outer {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: inline-block;
}
#inner {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display:block;
}
.layerTransparent{
	background-color:		rgba(255,255,255,0.5);
}
.display {
  text-align:center;
}
p2 {
    text-align:center;
    font-size:70px;
		font-weight: bold;
		font-family: Meiryo_UI;
		letter-spacing: -3px;
		color: #111111;
	 text-shadow:
	 1px 1px 1px #eee,
   -1px 1px 1px #eee,
   1px -1px 1px #eee,
   -1px -1px 1px #eee;
}
img {
border: 0px;
}
textarea {
    border: 0px;
    text-align:center;
    font-size:50px;
		font-weight: bold;
		font-family: Meiryo_UI;
		letter-spacing: -3px;
		color: #111111;
		background-color:#fffcf0;
}
input {
    width:95%;
		background-color:transparent;
		border: 0;
    font-size:200px;
    text-align:center;
		font-weight: bold;
		font-family: Meiryo_UI;
		letter-spacing: -5px;
		color: #ee2222;
	 text-shadow:
	 3px 3px 1px #FEE,
   -3px 3px 1px #FEE,
   3px -3px 1px #FEE,
   -3px -3px 1px #FEE;
}

button {
    width:250px;
    font-size:40px;
    font-weight:bold;
		font-family: Meiryo_UI;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#ff8c00;
    border-radius:10px;
		}

JavaScript

/*****************************************************/
//共通変数設定
/*****************************************************/
var startButton = document.getElementById('start');
var stopButton = document.getElementById('stop');
var resetButton = document.getElementById('reset');
var displayArea = document.getElementById('display');
var imageArea = document.getElementById('image');
var resultArea = document.getElementById('result');
var slotTime = null;
var result = [];
var slotNumber = 0;
var nMax = 101;
var nMin = 0;
var statusFlg = 'stop';

var units = [
'グレン',
'リヴィオ',
'サヤ',
'エルフィ',
'アレン',
'カイン',
'マリア',
'ルカ',
'フェンリス',
'クトゥール',
'アルトリウス',
'ゼロシキ',
'イザナギ',
'ゼッターマン',
'Asmk-2',
'アヌビス',
'グリムドア',
'リヴァイア',
'まゆ',
'クロノ',
'ヴェルベット',
'イデア',
'ル・フェイ',
'ユーリカ',
'よりしろ',
'オーガスタス',
'ルーク',
'アラン',
'エイゼル',
'ジョセフ',
'フィリス',
'ウルスラ',
'エンゼリカ',
'ヴァイオラ',
'フィオナ',
'フォスター',
'ターナー',
'エドワーズ',
'スミス',
'ロビン',
'レイチェル',
'メアリー',
'ローザ',
'ノーラ',
'ローレッタ',
'さくら',
'かすみ',
'つばき',
'あやめ',
'ぼたん',
'にじょう',
'ななお',
'ひめじ',
'わかまつ',
'まつえ',
'はるな',
'いせ',
'みかさ',
'ながと',
'せっつ',
'あかぎ',
'かが',
'ちとせ',
'りゅうじょう',
'しなの',
'ザイフリート',
'ブリュンヒルデ',
'あまぎ',
'マクスウェル',
'ヤマト',
'ヴァルザーク',
'カルマ',
'イザベラ',
'ディオーネ',
'ナタル',
'シェルクス',
'ノア',
'ヴァルトルス',
'ネフティリア',
'フラウ',
'あまてらす',
'マチルダ',
'アリス',
'シモーヌ',
'ドン・ポルタ',
'ヴァルク',
'ヒルダ',
'りんどう',
'アリア',
'ジョニー',
'ファウスト',
'シェルツ',
'ロキ',
'ヴィーラ',
'ジャクリーン',
'ホムラ',
'ジカイ',
'キヌガサ',
'ヒミコ',
'コトワリ',
'アルテミス',
'デウス',
'ジ・オース'
]

var imgUrl =...