提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript每天逻辑练习，两种方式实现动态摇学号

JavaScript逻辑 实现 方式 动态 练习 两种 每天
2023-09-11 14:19:17 时间

HTML代码

   <style>
        .container {
            width: 300px;
            text-align: center;
            margin: 0 auto;
        }

        #showNum {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 300px;
            font-size: 30px;
            font-weight: 900;
            border-radius: 50%;
            box-shadow: 0 0 4px rgba(0, 0, 0, .45);
        }

        #btn {
            width: 100px;
            height: 40px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="showNum">web2206A02</div>
        <button id="btn">开始</button>
    </div>

</body>

JavaScript代码部分   

方法一

<script>
    var oDiv = document.getElementById("showNum");
    var oBtn = document.getElementById("btn");
    var timer = null, count = 0, flag = false;

    oBtn.onclick = function () {
        count++;
        if (count % 2 === 1) {//点击第奇数次
            this.innerText = "停止";
            timer = setInterval(randNum, 100);//开始计时器
        } else {//点击第偶数次
            this.innerText = "开始";
            clearInterval(timer);//停止计时器
        }
    }

 function randNum() {
        var num = Math.floor(Math.random() * 35 + 1) //[1,35]
        if (num < 10) {
            num = "0" + num;       //  使一位数变成两位数
        }
        oDiv.innerHTML = "web2206A" + num;
    }
</script>

方法二

<script>
    var oDiv = document.getElementById("showNum");
    var oBtn = document.getElementById("btn");
    var timer = null, count = 0, flag = false;
    oBtn.onclick = function () {
      if (!flag) {
           this.innerText = "停止";
        timer = setInterval(randNum, 100);//开始计时器
        flag = true;
    } else {
        this.innerText = "开始";
        clearInterval(timer);//停止计时器
        flag = false;
    }
 }

    function randNum() {
        var num = Math.floor(Math.random() * 35 + 1) //[1,35]
        if (num < 10) {
            num = "0" + num;
        }
        oDiv.innerHTML = "web2206A" + num;
    }
</script>

运行结果：

相关文章