第二篇简单的一个小的点名器。。

最新推荐文章于 2024-04-22 08:51:07 发布

web_Rookie

最新推荐文章于 2024-04-22 08:51:07 发布

阅读量253

点赞数

文章标签： css javascript html5

本文链接：https://blog.csdn.net/web_Rookie/article/details/107569218

版权

下面 给一个简单的 点名器，，比较简单  哈哈哈 O(∩_∩)O~

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>点名器</title>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 600px;
            font-size: 60px;
            color: deepskyblue;
            margin: 200px auto 0;
            text-align: center;
            -webkit-user-select: none;
        }

        #btn {
            color: #000;
            width: 145px;
            height: 30px;
            line-height: 30px;
            margin: 85px auto;
            text-align: center;
            cursor: pointer;
            -webkit-user-select: none;
        }
    </style>
</head>

上面的是 css

<body>
    <div id="box">
        准备好点名了吗?
    </div>
    <div id="btn">
        开始点名
    </div>
</body>

上面是布局，只是简单的两个div，没给按钮

下面是js代码

 var box = document.getElementById("box");//找到box 为下面添加事件做准备(这里没用上。。)
    var btn = document.getElementById("btn");//找到btn,就是所要点击的元素

    var a = ["顺子", "二雷", "顺溜", "大郎", "吹雪", "哈撒给", "容嬷嬷", "红太狼", "圣主", "阿福", "成龙"];
    //内容


    var index = 0;//索引
    var t;//定义的定时器，未赋值

var 的a里面名字可以随意修改，改成想要的名字=，=

btn.onclick = function () {//点击事件，触发下面代码


        if (btn.innerHTML =="开始点名") {//这里判断的是 内容 
           
            clearInterval(t);//停止定时器 t 
            
            btn.innerHTML = "就是你了！";//修改内容
            t = setInterval(show, 50);//定时器，没0.005秒(50毫秒) 执行一次
        } else {
            clearInterval(t);//停止定时器
            btn.innerHTML = "开始点名";//修改内容
        }
    }

上面的是点击事件，修改表面内容

 function show() {//遍历 名字,当名字出现最后一位后直接返回第一个，循环的意思
        for (var i = 0; i < a.length; i++) {
            index++;
            if (index == 10) {
                index = 0;
            }
        } box.innerHTML = a[index];
    }

注释较多，莫烦 +。+
有错的也欢迎大家指点出来，各位多多指教！

我用的是vscode 软件写的代码，浏览器用的是谷歌可能和一些人用的不一样。

以下是完整代码：想要的可以拿去玩撒

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>点名器</title>
    <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 600px;
            font-size: 60px;
            color: deepskyblue;
            margin: 200px auto 0;
            text-align: center;
            -webkit-user-select: none;
        }

        #btn {
            color: #000;
            width: 145px;
            height: 30px;
            line-height: 30px;
            margin: 85px auto;
            text-align: center;
            cursor: pointer;
            -webkit-user-select: none;
        }
    </style>
</head>

<body>
    <div id="box">
        准备好点名了吗?
    </div>
    <div id="btn">
        开始点名
    </div>
</body>
<script type="text/javascript">

    var box = document.getElementById("box");//找到box 为下面添加事件做准备(这里没用上。。)
    var btn = document.getElementById("btn");//找到btn,就是所要点击的元素

    var a = ["顺子", "二雷", "顺溜", "大郎", "吹雪", "哈撒给", "容嬷嬷", "红太狼", "圣主", "阿福", "成龙"];
    //内容


    var index = 0;//索引
    var t;//定义的定时器，未赋值

    btn.onclick = function () {//点击事件，触发下面代码


        if (btn.innerHTML =="开始点名") {//这里判断的是 内容 
           
            clearInterval(t);//停止定时器 t 
            
            btn.innerHTML = "就是你了！";//修改内容
            t = setInterval(show, 50);//定时器，没0.005秒(50毫秒) 执行一次
        } else {
            clearInterval(t);//停止定时器
            btn.innerHTML = "开始点名";//修改内容
        }
    }

    
    function show() {//遍历 名字,当名字出现最后一位后直接返回第一个，循环的意思
        for (var i = 0; i < a.length; i++) {
            index++;
            if (index == 10) {
                index = 0;
            }
        } box.innerHTML = a[index];
    }
</script>

</html>