指定した文字を5秒に一回、それ以外はランダムを表示するといった処理を繰り返す方法を教えていただきたいです。

###前提・実現したいこと
指定した文字(aaa aaaaaaaa)を5秒(回)に一回は表示して消す、それ以外はランダムの数を表示させては消すという動作の処理を繰り返したいのですが、aaa aaaaaaaaが表示されているだけでなにも画面が動きません。

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>random</title>
6    <link rel="stylesheet" href="example.css">
7</head>
8<body>
9    <div id="pp"></div>
10    <div id="ex">aaa aaaaaaaa</div>
11<script>
12var num = 0;
13    num++;
14    if(num % 5 == 0){
15        var ex =function(){
16        setInterval(function (){   
17            documrnt.getElementById('ex').innerHTML+"<br>";
18            num++;
19            },400);
20        };
21        var deleteEx =function(){
22            setInterval(function(){
23                document.getElementById('ex').innerHTML = "";
24            },400 * 1 +1);
25        };
26        ex();
27        deleteEx();    
28    }
29    esle{
30        var timerID = function () {
31            setInterval(function () {
32                document.getElementById('pp').innerHTML += ran() + "<br>";
33                num++;
34            }, 400);
35        };
36
37        var deleteMoji = function () {
38            setInterval(function () {
39                document.getElementById('pp').innerHTML = "";
40            }, 400 * 1 + 1);
41        };
42        timerID();
43        deleteMoji();
44
45
46        function ran() {
47            var str = "";
48            for (var i = 0; i < 12; i++) {
49                str += String.fromCharCode(97 + parseInt(Math.random() * 26));
50            }
51            return str;
52        }
53    }
54</script>
55</body>
56</html>

###試したこと
if、elseの条件分岐での繰り返し処理を試みました。

toutou

2017/02/20 06:25

どこがaaaaを表示するコードですか？

mri0815

2017/02/20 06:44

elseがesleになっています。htmlも載せてください。

yud

2017/02/20 08:18

aaaaはdiv要素で指定していました。htmlの文章を追記させていただきました。

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

回答2件

的外れかもしれませんが、このような挙動でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        body {
13            text-align: center;
14        }
15
16        #pp {
17            display: inline-block;
18        }
19    </style>
20</head>
21<body>
22<div id="pp"></div>
23<script>
24    var num = 0;
25
26    function ran() {
27        var str = "";
28        for (var i = 0; i < 12; i++) {
29            str += String.fromCharCode(97 + parseInt(Math.random() * 26));
30        }
31        return str;
32    }
33
34    var timerID = function () {
35        setInterval(function () {
36            if (num === 0) {
37                document.getElementById('pp').innerHTML = ran() + "<br>";
38                num++;
39            } else {
40                document.getElementById('pp').innerHTML += ran() + "<br>";
41            }
42        }, 833);
43    };
44
45    var deleteMoji = function () {
46        setInterval(function () {
47            document.getElementById('pp').innerHTML = "aaa aaaaaaaa";
48            num = 0;
49        }, 5000);
50    };
51
52    window.onload = function () {
53        timerID();
54        deleteMoji();
55    };
56</script>
57</body>
58</html>

投稿2017/02/20 07:18

編集2017/02/20 08:39

s8_chu

総合スコア14731

yud

2017/02/20 08:23

ランダムを5個まとめてではなく、一個ずつを5回表示して、6回目にaaaを表示させる挙動はどうしたらいいのでしょうか。

s8_chu

2017/02/20 08:39

5個まとめて文字列が表示されるような挙動は確認できないのですが、それは私のコードで再現した現象でしょうか？また、6回目にaaaを表示するように修正しました。

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

イマイチどうしたいのかわかりませんが、こんな感じでしょうか？

一個ずつを5回表示して、6回目にaaa

との補足がありましたので、反映させておきます。

javascript
1<script>
2var timerId={};
3var num={};
4window.onload=function(){
5  startTimer("ex");
6  startTimer("pp");
7}
8function startTimer(x){
9  num[x]=0;
10  timerId[x]=setInterval(function (){   
11    var str = (num[x]%6==5)?"aaa aaaaaaaa":ran();
12    document.getElementById(x).innerHTML=str+"<br>";
13    num[x]++;
14  },1000);
15}
16  
17function ran() {
18    var str = "";
19    for (var i = 0; i < 12; i++) {
20      str += String.fromCharCode(97 + parseInt(Math.random() * 26));
21    }
22    return str;
23  }
24</script>
25ex:<div id="ex"></div>
26pp:<div id="pp"></div>
27