實現課堂隨機點名和順序點名

1. 效果:

ScreenGif.gif

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章