定时器简单案例－2

Posted zhang-jiao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定时器简单案例－2相关的知识，希望对你有一定的参考价值。

抽奖案例

1.页面结构，html文件

<!DOCTYPE htnl>
<html>
<head>
      <meat charset="utf-8">
      <title>抽奖</title>
　　<link el="stylesheet" href="./style.css">
</head>
<body>
   <button id="start">开始点名</button>
   <button id="end">结束点名</button>
   <div id="name">张三</div>
   <script src="./index.js"></script>
</body>
</html>

2.css样式文件：      

 

             *{
                 padding: 0;
                 margin: 0;
                 list-style: none;
             }
             body{
                 text-align: center;
                 background-color: skyblue;
             }
             #start,#end{
                 margin-top: 50px;
             }
             #name{
                 width: 400px;
                 height: 400px;
                 border: 4px solid greenyellow;
                 box-shadow: 0 0 10px blue;
                 background-color: #000;
                 margin: 50px auto;
                 color: yellow;
                 font-size: 100px;
                 font-family: "PMingLiU";
                 display: flex;
                 justify-content: center;
                 align-items: center;
             }

 

 

 

3.js文件

             //定义变量接收花名册数组
             var nameArray=["汤浩","","赵吉周","王文照","姚凯凯","刘博","张坤","雷胜洪","马云","张娇","王晓倩","杨朝霞","","任一凡","李烨","马荣华","向秋月","王小龙","程亚浩","李连杰","洋洋","呼延觉罗.修","吴雅丽","齐鹏博","澹台改娜","梁颖","王艳"];
             var timer=null;
             $("name").innerText=nameArray[0];
             //监听鼠标点击事件
             $("start").onclick=function(){
             //清除定时器
             clearInterval(timer);
             //开启定时器
             timer=setInterval(function(){
                 //随机数
                 var s_index=parseInt(Math.random()*(nameArray.length));
                 var s_name=nameArray[s_index];
                 //console.log(s_name);
                 $("name").innerText=s_name;
                 
             },30);
             }
             end.onclick=function(){
                //清除定时器
                clearInterval(timer);
             }
             function $(id){
                 return typeof id==="string"?document.getElementById(id):null;
             }

4.页面效果：

技术分享图片

 

以上是关于定时器简单案例－2的主要内容，如果未能解决你的问题，请参考以下文章

XXL-Job分布式任务调度框架-- 定时任务注册案例2

将数据从Activity发送到Fragment - 如何？

0179 定时器 之 setTimeout() ：开启定时器，5秒后关闭广告案例，停止定时器

详细实例说明+典型案例实现 对动态规划法进行全面分析 | C++

Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段

setInterval定时器设定开关