实现课堂随机点名和顺序点名

1. 效果:

实现课堂随机点名和顺序点名_第1张图片

2. Html代码:

<body>
<form>
    <div align="center">
        <input type="button" value="开始点名" onclick="students()" class="ks"/>
        <input type="button" value="停止点名" onclick="stop()" class="ks" id="nu"/>
        <hr color="blue">
        <br>
        <div id="div1" align="center">随机点名区域div>
    div>

form>
body>
3. JavaScript代码:
<script type="text/javascript">

        var i = 0;
        //t用来接收setTimeOut()的返回值
        var t;

        var st = ['张三','李四', '老王','旺财','铁柱', '王八','来福','小明','小红','狗蛋','SB.Child'];
        var u;

        //点名函数
        function students()
        {

            //顺序点名
        /*    if (i < st.length)
            {
                u = st[i];
            }
            else
            {
                //点到最后一个就回来重新点起
                i = 0;
                u = st[i];
            }
            i = i + 1;
*/
            //随机点名 产生0-数组长度之间的数作为数组下标
            var num = Math.floor(Math.random()*st.length);
            u = st[num];

            //更改文本框显示的value值
            document.getElementById("div1").innerHTML = u ;

            t = setTimeout("students()", 1000);
        }

        //停止点名函数
        function stop()
        {
            clearTimeout(t);
        }

        script>
4. CSS代码:
<style type="text/css">
    body{
        background: #f5faff;
    }

    .ks{
        width: 140px;
        line-height: 55px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        text-shadow:2px 2px 2px #333;
        border-radius: 5px;
        margin:0 20px 20px 0;
        position: relative;
        overflow: hidden;
        background-color: limegreen;
        border:1px solid #d2a000;
        box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
    }

    #nu{
        background-color: red;

    }
    #div1 { font:40px '微软雅黑';text-align: center; background-color: gainsboro;
        width: 60%;
        height: 60%;
        margin-bottom:20px;

    }
style>

你可能感兴趣的:(实现课堂随机点名和顺序点名)