js 随机点名

更新日期: 2019-04-13阅读: 2.3k标签: 定时器

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: aliceblue;
        }
        .box{
            width: 1000px;
            height: 240px;
            /*background-color: aqua;*/
            margin: 0 auto;
            margin-top: 100px;
            clear: both;
        }
        #btn{
            width: 100px;
            height: 30px;
            margin-left: 600px;
            margin-top: 50px;
        }
        .name{
            width: 100px;
            height: 30px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
        }
        #span{
            float: right;
            position: relative;
            top: 55px;
            right: 185px;
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>随机点名系统</h1>
    <span id="span"></span>
    <div id="box"></div>
    <input type="button" id="btn" value="点名"/>
    <span id="_span"></span>
    <script>
//        获取id函数
        function my$(id){
            return document.getElementById(id)
        };
//        模拟后台数据
        var arr = ["吉帆","静慧","嘉歆","金枝","王大妈","老王","刘疙瘩","杨伟",
          "韩晁","静涵","静曼","晶晶","靓影","嘉宝","李静","李志","李伟","家美"
          ,"金枝","静恬","刘泽祥","静和","晶灵","立超","嘉懿","王欢","王欣","郭琦"
          ,"嘉美","王琦","洁静","小杨","佳思","吉玉","张焕","张赛","娟秀","菊月"
          ,"王晶","吉玟","王飞","皎洁","曾艳","王翠青"
      ];
//        动态创建层
        for(var i =0;i<arr.length;i++){
            var div = document.createElement("div");
            div.innerText=arr[i];
            div.className="name";
            my$("box").appendChild(div);
        };
        var _index;
//        点名
        my$("btn").onclick=function(){
            var peoples= arr.length;
//            监视按钮的状态
            if(this.value==="点名"){
//                定时针
                  timeId=setInterval(function () {
//                      清空所有层的颜色
                    for(var i =0;i<arr.length;i++){
                        my$("box").children[i].style.background=""
                    };
//                      留下当前层的颜色
                    var random = parseInt(Math.random()*peoples);
                    my$("box").children[random].style.background="red";

                    // _span
                    my$(‘_span‘).innerText = arr[random];
                    _index = random;
                },100);
                this.value="停止";
            }else{
                my$(‘_span‘).innerText = arr[_index];
//                清除计时器
                clearInterval(timeId);
                this.value="点名";
            };
        };

//        获取时间的函数
        getTime();
        setInterval(getTime,1000)
        function getTime(){
            var day = new Date();
            var year = day.getFullYear();//年
            var month = day.getMonth()+1;//月
            var dat = day.getDate();//日
            var hour = day.getHours();//小时
            var minitue = day.getMinutes();//分钟
            var second = day.getSeconds();//秒
            month=month<10?"0"+month:month;
            dat=dat<10?"0"+dat:dat;
            hour=hour<10?"0"+hour:hour;
            minitue=minitue<10?"0"+minitue:minitue;
            second=second<10?"0"+second:second;
            my$("span").innerText=year+"-"+month+"-"+dat+" "+hour+":"+minitue+":"+second
        }


    </script>
</body>
</html>


总结:

主要是利用定时器,点击开始IDE时候不断的执行,并同时生成随机数,利用数组的下标完成展示。

主要用到的知识点:setInterval,Math.random()


链接: https://www.fly63.com/article/detial/2877

js中setTimeout和setInterval的深入理解:它们之间的区别,原理,“异步“等

这篇文章将带你深入理解js中定时器是如何工作的,setTimeout和setInterval的原理是什么?

为什么尽量别用setInterval

在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。

你可能不知道的setInterval的坑

之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么。setInterval会无视代码的错误、setInterval会无视任何情况下定时执行、、setInterval不能确保每次调用都能执行

setInterval和setTimeout的区别以及setInterval越来越快问题的解决方法

setInterval()和setTimeout()方法都是js原生的定时方法,当然它们两个的作用也是不同的,并且最近在做上下滚动公告栏的时候,发现了setInterval()非常令人抓狂的问题,那就是用setInterval()做的定时滚动会随着浏览器页面切换变得无法控制!为什么会说无法控制呢

如何通过setTimeout理解JS运行机制详解

setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数,表示定时器timer的编号,可以用来取消该定时器。JavasScript引擎是基于事件驱动和单线程执行的,JS引擎一直等待着任务队列中任务的到来

node-schedule 全局内关闭定时器

用Cron表达式完成定时器,全局内关闭定时器需要获取到定时器的引用,scheduleJob存在第四个参数,然而readme中没有提及,可知API

js定时器setTiemout、setInterval

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下。

Js定时器越走越快的问题

之前在项目中写了定时器来做循环播放,但是总是会有越走越快的问题,开始是以为前后的HTML代码拼接的有问题,时间紧急的情况下反复改了很多也没什么效果,后来发现是js定时器的问题,在这里记录一下。

JS 定时器的4种写法及介绍

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段

Js中setTimeout()、setInterval()、链式setTimeout()

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!