javascript学习（1）随机点名应用

Posted on 2017-04-09 22:18  Y_Mathison  阅读(288)  评论(0)  编辑  收藏  举报 
 样式：
   （1）body




 1  body{
 2             background-color: aliceblue;
 3         }
 4         .box{
 5             width: 1000px;
 6             height: 240px;
 7             margin: 0 auto;
 8             margin-top: 100px;
 9             clear: both;
10         }






 








 



   （2）按钮




 1 #btn{
 2           display: inline-block;
 3           padding: 8px 5px;
 4           font-size: 24px;
 5           cursor: pointer;
 6           text-align: center;   
 7           text-decoration: none;
 8           outline: none;
 9           color: #fff;
10           background-color: #4CAF50;
11           border: none;
12           border-radius: 15px;
13           box-shadow: 0 9px #999; 
14           margin-left: 45%;
15           margin-top:10px;
16         }
17         .btn:hover {background-color: #3e8e41}
18 
19         .btn:active {
20           background-color: #3e8e41;
21           box-shadow: 0 50px #666;
22           transform: translateY(4px);
23         }





      （3）姓名背景框


 




 1  .name{
 2             width: 150px;
 3             height: 30px;
 4             float: left;
 5             background-color: antiquewhite;
 6             margin-left: 10px;
 7             margin-top: 10px;
 8             text-align: center;
 9             line-height: 30px;
10             border-radius: 15px;
11         }




 


       主要函数：




 1  function my$(id){
 2             return document.getElementById(id)
 3         };
 4 //        模拟后台数据
 5         var arr = ["001张三","002安可","01秋葵","02涡皮","03于莉","04沃伦","05周亮","06梁画","07王志","08唐甜","09陈飞","10乔黯" ];
 6 //        动态创建层
 7         for(var i =0;i<arr.length;i++){
 8             var div = document.createElement("div");
 9             div.innerText=arr[i];
10             div.className="name";
11             my$("box").appendChild(div);
12         };
13 //        点名
14         my$("btn").onclick=function(){
15            //element=document.getElementById('myimage')
16            var peoples= arr.length;
17 //            监视按钮的状态
18             if(this.value==="点名"){
19 //                定时针
20                   timeId=setInterval(function () {
21 //                      清空所有层的颜色
22                     for(var i =0;i<arr.length;i++){
23                         my$("box").children[i].style.background=""
24                     };
25 //                      留下当前层的颜色
26                     var random = parseInt(Math.random()*peoples);
27                     my$("box").children[random].style.background="green";
28                 },0.1);
29                 
30                 this.value="停止";
31                 //element.src="Name/点名.png;
32             }else{
33 //                清除计时器
34                 clearInterval(timeId);
35                 this.value="点名";
36                 //element.src="Name/停止.png;
37             };
38         };




   全部代码：




  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         body{
  8             background-color: aliceblue;
  9         }
 10         .box{
 11             width: 1000px;
 12             height: 240px;
 13             margin: 0 auto;
 14             margin-top: 100px;
 15             clear: both;
 16         }
 17         #btn{
 18           display: inline-block;
 19           padding: 8px 5px;
 20           font-size: 24px;
 21           cursor: pointer;
 22           text-align: center;   
 23           text-decoration: none;
 24           outline: none;
 25           color: #fff;
 26           background-color: #4CAF50;
 27           border: none;
 28           border-radius: 15px;
 29           box-shadow: 0 9px #999; 
 30           margin-left: 45%;
 31           margin-top:10px;
 32         }
 33         .btn:hover {background-color: #3e8e41}
 34 
 35         .btn:active {
 36           background-color: #3e8e41;
 37           box-shadow: 0 50px #666;
 38           transform: translateY(4px);
 39         }
 40         .name{
 41             width: 150px;
 42             height: 30px;
 43             float: left;
 44             background-color: antiquewhite;
 45             margin-left: 10px;
 46             margin-top: 10px;
 47             text-align: center;
 48             line-height: 30px;
 49             border-radius: 15px;
 50         }
 51         #span{
 52             float: right;
 53             position: relative;
 54             top: 1055px;
 55             right: 185px;
 56         }
 57         h1{
 58             text-align: center;
 59         }
 60         #footer{text-align:center; padding:20px 0;}
 61     </style>
 62 </head>
 63 <body>
 64 <div id="wrap">
 65     <h1>课堂回答随机点名</h1>
 66     
 67     <span id="span"></span>
 68     <div class="box" id="box"></div>
 69         <input type="button" id="btn" value="点名"/>
 70         <script>
 71 //        获取id函数
 72         function my$(id){
 73             return document.getElementById(id)
 74         };
 75 //        模拟后台数据
 76         var arr = ["001张三","002安可","01秋葵","02涡皮","03于莉","04沃伦","05周亮","06梁画","07王志","08唐甜","09陈飞","10乔黯" ];
 77 //        动态创建层
 78         for(var i =0;i<arr.length;i++){
 79             var div = document.createElement("div");
 80             div.innerText=arr[i];
 81             div.className="name";
 82             my$("box").appendChild(div);
 83         };
 84 //        点名
 85         my$("btn").onclick=function(){
 86            //element=document.getElementById('myimage')
 87            var peoples= arr.length;
 88 //            监视按钮的状态
 89             if(this.value==="点名"){
 90 //                定时针
 91                   timeId=setInterval(function () {
 92 //                      清空所有层的颜色
 93                     for(var i =0;i<arr.length;i++){
 94                         my$("box").children[i].style.background=""
 95                     };
 96 //                      留下当前层的颜色
 97                     var random = parseInt(Math.random()*peoples);
 98                     my$("box").children[random].style.background="green";
 99                 },0.1);
100                 
101                 this.value="停止";
102                 //element.src="Name/点名.png;
103             }else{
104 //                清除计时器
105                 clearInterval(timeId);
106                 this.value="点名";
107                 //element.src="Name/停止.png;
108             };
109         };
110     </script>
111      <div id="footer"> ©2017-04-08博客园DJ_Mathison</div>
112         
113 </body>
114 </html>




 


 


 



效果：