html5随机点名 显示汉字动画

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
    <style>
        table{
            border: 3px solid #761c19;
            margin: auto;
        }
        #t{
            text-align: center;
            margin-left: 45px;
            margin-bottom: 20px;
            color:red;
            border-color: #3e8f3e;
        }
    </style>
    <script>
        const names=["张三","李四","王五","赵六","尼古拉斯","罗三炮","张无忌","金毛狮王","电饭煲","胡歌"
        ,"刘亦菲","柯震东","罗贯中","霸王别姬","施耐庵","吴承恩"];
        function f(a,b){
            $("#3").prop("disabled",a);
            $("#4").prop("disabled",b);
        }
        $(function () {
            let index;
            let time;
            f(false,true);
            $("#3").click(function () {
                f(true,false);
                time=setInterval(function () {
                    index=Math.floor(Math.random()*names.length);
                    $("#t").prop("value",names[index]);
                },50);
            })
            $("#4").click(function () {
                f(false,true);
                clearInterval(time);
            })
        })
    </script>
<body>
    <table>
        <tr>
           <div id="1">
               <th style="color: #761c19 ;padding-left: 20px ;padding-bottom: 20px">随机点名</th>
           </div>
        </tr>
        <tr >
            <div >
                <td><input id="t" type="text" value="张三"></td>
            </div>
        </tr>
        <tr >
            <div >
                <td><input type="button" id="3" value="开始"></td>
            </div>
            <div >
                <td><input type="button" id="4" value="结束"></td>
            </div>
        </tr>
    </table>
</body>
</html>

 

posted @ 2023-05-12 17:04  WilliamShaw  阅读(205)  评论(0)    收藏  举报