JavaScript学习笔记（五）

最新推荐文章于 2024-09-17 11:42:54 发布

小溯暝

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量108

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/mingbai775533/article/details/116830204

版权

这篇博客介绍了如何使用JavaScript实现一个简单的随机点名程序。通过点击开始按钮，程序会每隔20毫秒随机从预定义的学生名单中选择一名同学显示在页面上。结束按钮则用于停止点名过程。涉及的技术包括DOM操作、事件监听、Math.random()方法以及setInterval和clearInterval函数。

摘要由CSDN通过智能技术生成

JavaScript学习笔记（五）

本文是对乘风破浪的程序媛一篇博文的练习。
注释为个人理解，有误的地方可以评论。

    <button id="box1">开始</button>
    <button id="box2">结束</button>
    <span id="box">随机点名</span>
    <script type="text/javascript">
        var btn1 = document.getElementById("box1");//声明获取开始按钮
        var btn2 = document.getElementById("box2");//声明获取结束按钮
        var span = document.getElementById("box");//声明获取span标签
        var names = ["同学1","同学2","同学3","同学4","同学5","同学6"];//声明一个数组
        var timer;//声明变量
        //开始按钮的点击事件
        btn1.onclick = function() {
            window.clearInterval(timer);//清除编号为timer的间歇调用函数
            timer = window.setInterval(name,20);//本窗口执行间歇调用函数
        }
        //结束按钮的点击事件
        btn2.onclick = function() {
            window.clearInterval(timer);//清除编号为timer的间歇调用函数
        }
        function name() {
            var index = parseInt(Math.random()*names.length);//获取随机下标并存储在变量index中
            span.innerHTML = names[index];//改变span标签的文本
        }
    </script>