js点名器

最新推荐文章于 2022-10-30 16:09:04 发布

原创最新推荐文章于 2022-10-30 16:09:04 发布 · 196 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js效果图专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何利用JavaScript编程创建一个点名器，通过简单的代码实现随机选取名字的功能，适用于教学或会议等场景。

点名器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名器</title>
    <style>
        #box{
            width:200px;
            height:300px;
            border:1px solid red;
        }
        #box img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div id='box'>
        <p id='img'></p>
    </div>
    <button onclick='start()'>开始</button>
    <button onclick='stop()'>暂停</button>
    <script>
        console.log(Math)
        var a = 1.4
        // var b = Math.ceil(a)   //进一取整法
        // var b = Math.floor(a)   //去一取整法
        // var b = Math.round(a)  //四舍五入
        //
        // var b = Math.random()  //可以获取0-1直接的一个随机数
        
       
        var nameList = ['1',"2","3","4","5","6","7","8","9","10`在这里插入代码片`"]
        
        
        dodo = false  //定义变量用来存储定时器,开始等false防止在没有声明定时器之前清除错误
        
        //暂停
        function stop(){
            clearInterval(dodo)
        }

        // 开始
        function start(){
            if(dodo){
                //开始定时器之前,先清除一下老的定时器,防止定时器重复被定义
                clearInterval(dodo)
            }

            dodo = setInterval(function(){
                var b = Math.ceil(Math.random()*24)-1  //获取1-24之间的一个随机数
                // console.log(nameList[b])
                document.getElementById('img').innerHTML=nameList[b]
               
            },100)
           
        }
    </script>
</body>
</html>