おみくじの結果を点滅させたい

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<title>おみくじ</title>
5
6</head>
7<body>
8<h1>おみくじ</h1>
9<input type=button value="おみくじスタート" onclick="onButtonClick()">
10<div id="dsp"></div>
11
12    <script>
13       let kujis =["大吉","吉","中吉","小吉","末吉","凶","大凶"];
14       let kuji = Math.floor(Math.random()*kujis.length);
15       let disp = document.getElementById("dsp");
16
17
18       function onButtonClick(){
19             dsp.innerHTML = kujis[kuji];
20             }
21　　
22    </script>
23
24</body>
25</html>
26
27```javascript
28<html>
29<head>
30<title></title>
31<script>
32   let hyouji=0;                                             //表示の状態を表す変数を　hyouji とした　
33   function tenmetsu(){                                //文字を点滅させるための関数を　tenmetsu()　とする
34   if(hyouji==0)  {　　　　　　　　　　　   //hyoujiが0に等しい場合は
35   document.form1.textbox1.value="警報発令中！"　　　　//テキストボックスの表示を「警報発令中！」としてください
36　hyouji=1;　　　　　　　　　　　　　　　//そしてその後でhyoujiに1を代入してください
37   }
38　else{　　　　　　　　　　　　　　　　　//そうでなければ
39   document.form1.textbox1.value="";　　//テキストボックスの表示を空白にしてください
40   hyouji=0;      　　　　　　　　　　　　　//そしてその後でhyoujiに0を代入してください（つまり「警報発令中！」にしなさい。）
41   }
42   }
43</script>
44</head>
45<body>
46       <form name="form1">
47       <input type="text" name="textbox1">
48<script>
49        setInterval("tenmetsu()",700);　　　　//setInterval(自作した関数名,時間間隔)　0.7秒の場合700にする　
50//source	は　http://www5e.biglobe.ne.jp/~komichan/javascpt/htmlJS_tenmetsu.html　
51</script>
52</body>
53</html>
54<html>
55<head>
56<title></title>
57<script>
58   let hyouji=0;                                             //表示の状態を表す変数を　hyouji とした　
59   function tenmetsu(){                                //文字を点滅させるための関数を　tenmetsu()　とする
60   if(hyouji==0)  {　　　　　　　　　　　   //hyoujiが0に等しい場合は
61   document.form1.textbox1.value="警報発令中！"　　　　//テキストボックスの表示を「警報発令中！」としてください
62　hyouji=1;　　　　　　　　　　　　　　　//そしてその後でhyoujiに1を代入してください
63   }
64　else{　　　　　　　　　　　　　　　　　//そうでなければ
65   document.form1.textbox1.value="";　　//テキストボックスの表示を空白にしてください
66   hyouji=0;      　　　　　　　　　　　　　//そしてその後でhyoujiに0を代入してください（つまり「警報発令中！」にしなさい。）
67   }
68   }
69</script>
70</head>
71<body>
72       <form name="form1">
73       <input type="text" name="textbox1">
74<script>
75        setInterval("tenmetsu()",700);　　　　//setInterval(自作した関数名,時間間隔)　0.7秒の場合700にする　
76```javascript
77<!DOCTYPE html>
78<html lang="ja">
79<head>
80<title>おみくじ</title>
81
82</head>
83<body>
84<h1>おみくじ</h1>
85<input type=button value="おみくじスタート" onclick="onButtonClick()">
86<div id="dsp"></div>
87
88    <script>
89       let kujis =["大吉","吉","中吉","小吉","末吉","凶","大凶"];
90       let kuji = Math.floor(Math.random()*kujis.length);
91       let disp = document.getElementById("dsp");
92
93
94       function onButtonClick(){
95             dsp.innerHTML = kujis[kuji];
96             }
97　　
98    </script>
99
100</body>
101</html>
102```この結果を点滅させたいと思いました。
103そこで以下の記述を参考にします。
104```javascript
105<html>
106<head>
107<title></title>
108<script>
109   let hyouji=0;                                             //表示の状態を表す変数を　hyouji とした　
110   function tenmetsu(){                                //文字を点滅させるための関数を　tenmetsu()　とする
111   if(hyouji==0)  {　　　　　　　　　　　   //hyoujiが0に等しい場合は
112   document.form1.textbox1.value="警報発令中！"　　　　//テキストボックスの表示を「警報発令中！」としてください
113　hyouji=1;　　　　　　　　　　　　　　　//そしてその後でhyoujiに1を代入してください
114   }
115　else{　　　　　　　　　　　　　　　　　//そうでなければ
116   document.form1.textbox1.value="";　　//テキストボックスの表示を空白にしてください
117   hyouji=0;      　　　　　　　　　　　　　//そしてその後でhyoujiに0を代入してください（つまり「警報発令中！」にしなさい。）
118   }
119   }
120</script>
121</head>
122<body>
123       <form name="form1">
124       <input type="text" name="textbox1">
125<script>
126        setInterval("tenmetsu()",700);　　　　//setInterval(自作した関数名,時間間隔)　0.7秒の場合700にする　
127//source	は　http://www5e.biglobe.ne.jp/~komichan/javascpt/htmlJS_tenmetsu.html　
128</script>
129</body>
130</html>
131

この2つを組み合わせればできそうな気がしたのですが、お分かりの方がいらっしゃいましたらよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

<body>内を、以下のように書き換えてみてください。点滅は、以下のようにCSSで実装したほうがよさそうです。

HTML
1<body>
2  <h1>おみくじ</h1>
3  <input type="button" id="textbox1" value="おみくじスタート" onclick="onButtonClick()">
4  <div id="dsp"></div>
5
6  <script>
7    let kujis = ["大吉", "吉", "中吉", "小吉", "末吉", "凶", "大凶"];
8    let kuji = Math.floor(Math.random() * kujis.length);
9    let disp = document.getElementById("dsp");
10
11    function onButtonClick() {
12      dsp.innerHTML = kujis[kuji];
13    }
14  </script>
15
16  <style>
17    #dsp {
18      animation: 1400ms linear 0s infinite dsp-animation;
19    }
20    @keyframes dsp-animation {
21      0% { opacity: 1; }
22      50% { opacity: 1; }
23      51% { opacity: 0; }
24      100% { opacity: 0; }
25    }
26  </style>
27</body>