js点名器效果

2021-10-17 05:06:34

<!DOCTYPE html>
<html>
   <head>
       <title>点名器效果</title>
       <style>
           body{text-align:center;}
           #showName{
               font-size:20px;
               color:red;
               font-weight:bold;
               width:200px;
               height:35px;
               margin:0px auto;
               text-align:center;
           }
       </style>
   </head>
   <body >
       <div id="showName"></div>
       <a href="javascript:start()">开始</a>
       <a href="javascript:stop()">结束</a>
   </body>
   <script>
       var sn=document.getElementById("showName");
       var arr=new Array();
       var s=0;
       var time;

       //初始化数组
       function init(){
           //alert(sn.innerHTML); //显示内容包括标签
           //alert(sn.innerText); //显示内容不包括标签
           sn.innerHTML="这里显示名字";
           for(var i=0;i<100;i++){
               arr[i]="曲明超"+i;
           }
       }

       //显示运行
       function run(){
           //alert(s);
           sn.innerHTML=arr[s];

           if(s<arr.length-1){
               s=s+1;
           }else{
               s=0;
           }
       }

       //开始
       function start(){
           time=setInterval("run()",100);
       }

       //暂停
       function stop(){
           clearInterval(time);
       }

       //初始化
       init();
   </script>
</html>

码农公寓

相关文章