使用js实现点名器

最新推荐文章于 2022-04-16 10:38:36 发布

动心。

最新推荐文章于 2022-04-16 10:38:36 发布

阅读量1.5k

点赞数 1

分类专栏：个人文章标签： js

本文链接：https://blog.csdn.net/qq_43494108/article/details/96705252

版权

个人专栏收录该内容

5 篇文章 2 订阅

订阅专栏

思路：首先使用一个数组把名字都存进去，然后通过setInterval() 方法和clearInterval() 方法来实现循环和选中；
接下来我们先看html代码

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    var names=new Array("猪嘤","嘤嘤嘤","皮皮嘤","憨憨嘤","太古猪嘤");//声明一个循环名字的数组
    var values="";
    var bool=true;//声明一个控制停止循环的变量
    var index=0;//声明一个储存下标的变量
    //轮换名字的方法
    function randons(){
        var id=document.getElementById("show");
        id.innerText=names[index];
        if(bool){
            index++;
        }
        if(index==4){
            index=0;
        }
    }
    //加载方法
    function init(){
    	values=document.getElementById("btn");
        index=setInterval("randons()",100);
    }
    //单击停止或继续的方法
    function stopStart(){
        if(bool){
            bool=false;
            clearInterval(index);
            values.value="继续";
        }else{
            bool=true;
            values.value="选中";
        }
    }
</script>
<body onload="init()">
<div id="show" style="border: solid 1px red; height: 100px;width: 100px"></div>
<input type="button" id="btn" onclick="stopStart()" value="选中">
</body>
</html>

先给大家看下运行结果

在这里插入图片描述
首先我们来看下加载方法

<body onload="init()">
<div id="show" style="border: solid 1px red; height: 100px;width: 100px"></div>

var names=new Array("猪嘤","嘤嘤嘤","皮皮嘤","憨憨嘤","太古猪嘤");//声明一个循环名字的数组
var values="";
var bool=true;//声明一个控制index的变量
var index=0;//声明一个储存下标的变量
  //轮换名字方法
function randons(){
        var id=document.getElementById("show");
        id.innerText=names[index];
        if(bool){
            index++;
        }
        if(index==names.length){
            index=0;
        }
    }
    //加载方法
    function init(){
     values=document.getElementById("btn");
        index=setInterval("randons()",100);//每100毫秒换一次名字
    }

轮换方法介绍：首先通过document.getElementById(); 方法来获取div这个对象，储存在id这个变量里，再通过innerText属性来改变div显示的内容,然后再判断当前bool状态是否是要名字轮换，如果为真，则显示下一个名字。接着判断下标是不是到了最后一个位置。如果是最后一个就从头开始；
加载方法：首先获取到按钮的对象，然后通过setInterval() 方法来进行定时调用；
setInterval(function(),delay)：第一个参数是要调用的方法，第二个参数是隔多少毫秒调用一次；

接下来看单击方法

function stopStart(){
        if(bool){
            bool=false;
            clearInterval(index);
            values.value="继续";
        }else{
            bool=true;
            values.value="选中";
        }
    }
</script

<input type="button" id="btn" onclick="stopStart()" value="选中">

当我们点击这个选中按钮的时候，就会触发onclick事件然后调用stopStart() 方法，如果当时bool为true也就是名字一直在更新就把bool改成false然后通过clearInterval() 方法将定时调用方法setinterval() 方法暂停，也就是显示已经选中的名字然后把按钮的值变成继续；如果当前状态是已经是暂停，也就是bool为false，就不会调用暂停方法，接着开始调用名字更新的方法；

未选中名字：

在这里插入图片描述