js实现点名系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            text-align: center;
            margin-top: 78px ;

        }
        #box2{
            height: 90px;
            width: 900px;
            margin:0 auto;
            margin-top: 15px;
        }
        #btn{
            width: 100px;
            height: 100px;
        }
        #box3{
            margin:0 auto;
            width: 100px;
            height:100px;
        }
        h1{
            text-align: center;
        }
         ul li{
            list-style: none;
            float:left;
             width: 100px;
             height: 32px;
             text-align: center;
             line-height: 32px;
             background-color: rgb(251,235,215);
             margin-left: 10px;
        }
    </style>
</head>
<body>
<h1>随机点名系统</h1>
<div id="box1"></div>
<div id="box2">
    <ul>
        <li>王思聪</li>
        <li>周杰伦</li>
        <li>林俊杰</li>
        <li>陈奕迅</li>
        <li>薛之谦</li>
        <li>杨迪</li>
        <li>毛不易</li>
        <br>
        <br>
        <li>古巨基</li>
        <li>马化腾</li>
        <li>马云</li>
        <li>王健林</li>
        <li>李刚</li>
        <li>李嘉诚</li>
    </ul>
</div>
<div id="box3">
<button id="btn">点我</button>
</div>
<script src="common.js"></script>
<script>
    window.onload = function() {
        function clock() {
            var dt = new Date();
            var year = dt.getFullYear();
            var month = dt.getMonth()+1;
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            var week = dt.getDay();
            var date = dt.getDate()
            my$("box1").innerHTML = year+"年"+month+"月"+date+"日"+h+":"+m+":"+s;
        }
        clock();
        var timeId = setInterval(clock,1000);
    }
        var timeId;
        my$("btn").onclick = function () {
            if (this.innerHTML == "点我") {
                timeId = setInterval(function () {
                    var num = Math.floor(Math.random() * 13);
                    for (var i = 0; i < ele$("li").length; i++) {
                        ele$("li")[i].style.backgroundColor = "rgb(251,235,215)"
                    }
                    ele$("li")[num].style.background = "red";
                }, 1)
                this.innerHTML = "停止";
            }else{
                clearInterval(timeId);
                this.innerHTML = "点我";
            }
        }
</script>
</body>
</html>
猜你喜欢
