js点名器效果

简介: 点名器效果                    body{text-align:center;}            #showName{                font-size:20px;                color:red;          ...

<!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>

目录
相关文章
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
JavaScript 前端开发
使用JS来实现随机点名的效果
使用JS来实现随机点名的效果
94 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
30 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
109 2
|
1月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
21 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
155 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
90 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
82 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
100 4