随机点名器 | 易学教程

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            height: 80px;
            line-height: 80px;
            font-size: 30px;
            color: red;
            text-align: center;
        }
        input[type="text"]{
            display:block;
            float:left;
            height:30px;
            line-height:30px;
            width:80px;
            margin-right:8px;
            border:1px solid #666;
            text-align: center;
            margin-bottom: 30px;
            background: none;
        }
        input[type="text"]:nth-of-type(7){
            margin-right: 0;
        }
        p{
            clear: both;
            display: block;
            text-align: center;
        }
        p label{
            float: left;
        }
        input.huida[type="text"]{
            width:400px;
            height:30px;
            line-height:30px;
            font-size: 24px;
            color: red;
        }
    </style>
</head>

<body>
<div  style="display:block; margin:0 auto; width:632px;">
    <h2>点名回答器</h2>
    <form name="callname">
        <p>
            <input name="stu1" type="text" disabled="disabled" value="姓名1" style="font-size:12px; color:#CCC;" />
            <input name="stu2" type="text" disabled="disabled" value="姓名2" style="font-size:16px; color:#999;"/>
            <input name="stu3" type="text" disabled="disabled" value="姓名3" style="font-size:20px; color:#333;" />
            <input name="stu4" type="text" disabled="disabled" value="姓名4" style="font-size:24px; color:#000;" />
            <input name="stu5" type="text" disabled="disabled" value="姓名5" style="font-size:20px; color:#333;"/>
            <input name="stu6" type="text" disabled="disabled" value="姓名6" style="font-size:16px; color:#999;"/>
            <input name="stu7" type="text" disabled="disabled" value="姓名7" style="font-size:12px; color:#CCC;"/>
        </p>
        <p>
            <label for="huida">下面欢迎回答者：</label>
            <input type="text" name="answer" disabled="disabled" id="huida" class="huida"  />
        </p>
        <p>
            <input type="button" value="开始点名" onclick="begin()" />
            <input type="button" value="点名结束" onclick="stop()" />
        </p>
    </form>
</div>
</body>
</html>
<script>//声明变量然后存储起来你要用的名字。
    var names=["刘xx","张xx","胡xx","杨xx",
                "康xx","宗xx","李xx","翟xx",
                "任xx","王xx","杨xx","张x",
                "单xx","崔xx","高xx","吕xx",
                "冯xx","李xx","郭烽烽","陈xx",
                "刘xx","武xx","孔xx","张x",
                "赵xx","宋xx","任xx","王xx",
                "王xx","郭xx","郑xx","武xx",
                "蔡xx","武xx","王xx","张xx",
                "原xx","武xx","郑xx"];
  //使用for循环，让每一个名字都能走流程  for(var i=1;i<8;i++){
        eval("var stu"+i+"=document.callname.stu"+i);
    }
    var show=" ";
    var timer0,a=0;
    function begin(){
        a++;
        if(a>1){
            clearInterval(timer);
        }
        timer=setInterval(fun,10);
    }
    function fun(){
       stu7.value=stu6.value;
       stu6.value=stu5.value;
       stu5.value=stu4.value;
       stu4.value=stu3.value;
       stu3.value=stu2.value;
       stu2.value=stu1.value;
        stu1.value=names[Math.round(Math.random()*100%39)];
        show=stu4.value;
    }
    function stop(){
        stu1.value="";
        stu2.value="";
        stu3.value="";
        stu4.value="";
        stu5.value="";
        stu6.value="";
        stu7.value="";
        clearInterval(timer);
        document.callname.answer.value=show;
    }
</script>
来源：https://www.cnblogs.com/ZXH-null/p/12031328.html
标签