teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ルーレット形式で文字が変わる実装を作りたいです

編集履歴

質問編集履歴

1

詳しく書いた

2020/10/09 17:42

投稿

ikikikoko
ikikikoko

スコア9

test CHANGED
File without changes
test CHANGED
@@ -4,87 +4,51 @@
4
4
 
5
5
  ルーレット形式で文字が変わる実装を作りたいです
6
6
 
7
+ １１１１の部分がスタートを押したら用意していた文字にランダムで動いて
7
8
 
8
-
9
- 今、ランダムで１から１００の数字が変わる仕様になっています。
9
+ ストップで止めることができる仕様にしたいです。
10
-
11
- それをランダムで用意した文字が切り替わるようにしていきたいですがやり方がわかりません・
12
10
 
13
11
 
14
12
 
15
13
 
16
14
 
15
+ ![イメージ説明](0960212b0481eb34fce6993f94e71315.png)
16
+
17
17
  ### 該当のソースコード
18
+
19
+ ```html
20
+
21
+ ソース <div class="left-bar-header">
22
+
23
+ </div>
18
24
 
19
25
 
20
26
 
21
- ```html
22
-
23
- ソース }
24
-
25
- </style>
27
+ <div class="rooms">
26
-
27
- <script language="javascript" type="text/javascript">
28
-
29
- var roulette;
30
28
 
31
29
 
32
30
 
33
- // ルーレットを開始
31
+ <div id="roulette">
34
32
 
35
- function start() {
33
+ <p id="isPlace">11111</p>
36
34
 
37
- roulette = setInterval(function() {
35
+ </div>
38
36
 
39
- // 1〜99の範囲でランダムな数値を作成
40
37
 
41
- var idx = Math.floor( Math.random() * 100) + 1;
42
38
 
43
- // ルーレット
39
+ <div class="buttons">
44
40
 
45
- document.getElementById("roulette").innerHTML = idx;
41
+ <button id="start" onClick="clickedStart()">start</button>
46
42
 
47
- }, 100);
43
+ <button id="stop" onClick="clickedStop()">stop</button>
48
44
 
49
- }
45
+ </div>
50
46
 
51
-
52
47
 
53
- // ルーレットを停止
54
48
 
55
- function stop() {
49
+ </div>
56
50
 
57
- if(roulette) {
51
+
58
-
59
- clearInterval(roulette);
60
-
61
- }
62
-
63
- }
64
-
65
- </script>
66
-
67
- </head>
68
-
69
- <body>
70
-
71
- <div class="outline">
72
-
73
- <div class="roulette" id="roulette">1</div>
74
-
75
- <br />
76
-
77
- <input type="button" value="スタート" id="start" onclick="start();"/>
78
-
79
- <input type="button" value="ストップ" id="stop" onclick="stop();"/>
80
-
81
- </div>
82
-
83
- </body>
84
-
85
- </html>
86
-
87
- ```）
88
52
 
89
53
 
90
54