ひらがな一文字をランダムで表示するjavascriptを書いてみた

mac javascript

イメージ

f:id:diki-kezuka:20190315235331p:plain
イメージ

  • スタートボタンでドラムロールがスタート
  • ストップでドラムロールが停止します

    code

<!DOCTYPE html>
<meta charset="UTF-8" />
<html>
<style type="text/css">

.main {
    font-size: 480px;
    text-align: center;
}

.start {
  display: inline-block;
  font-size: 2em;
  width: 300px;
  height: 100px;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 8px;
  color: #050505;
  background-image: linear-gradient(#67fd67 0%, #67ffd1 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #62ca5e;
}

.start:active {
  -webkit-transform: translateY(8px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

.stop {
  display: inline-block;
  font-size: 2em;
  width: 300px;
  height: 100px;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 8px;
  color: #050505;
  background-image: linear-gradient(#fd6767 0%, #ff67cc 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #ca5e87;
}

.stop:active {
  -webkit-transform: translateY(8px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

.div_left{
    float: left;
    width: 50%;
}

.div_right{
    float: right;
    width: 50%;
}

.btn_wrapepr {
    text-align: center;
}
</style>
<body>
    <div class="div_left">
        <div class="btn_wrapepr" >
            <button class="start" onclick="start()">スタート</button>
        </div>
    </div>
    <div class="div_right">
        <div class="btn_wrapepr">
            <button class="stop" onclick="stop()">ストップ</button>
        </div>
    </div>
    <div class="main" id="display">
    </div>
</body>
<script>
    var target = document.getElementById("display");
    var a = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん".split("");
    var running = true;

    function start(){
        running=true;
        displayHiragana();
    }

    function stop(){
        running = false;
    }

    function displayHiragana(){
        var id = setInterval(() => {
            target.innerText = a[Math.floor(Math.random() * a.length)];
            if(!running) {
                clearInterval(id);
            }
        }, 100);
    }
</script>
</html>

choromeよりsafariの方が字体がかっこいい！

おわり