HTML5制作抽点器

m0_52239519

已于 2022-10-01 19:04:11 修改

阅读量136

点赞数

文章标签： html5 html

于 2021-11-14 14:38:28 首次发布

本文链接：https://blog.csdn.net/m0_52239519/article/details/121317497

版权

在这里插入图片描述

效果图

在这里插入图片描述

代码示例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂点名器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a,
        img {

            border: 0;
        }

        body {
            font: 12px/180% "Mircrosoft YaHei", "宋体";
        }

        #bodybj {
            background: url("img/images.jpg") no-repeat center top;
        }

        #box {
            margin: auto;
            width: 660px;
            font-size: 70px;
            height: 94px;
            line-height: 94px;
            overflow: hidden;
            color: #fff;
            text-align: center;
            padding: 0 30px;
            margin-top: 200px;

        }

        #bt {
            margin: auto;
            width: 200px;
            text-align: center;
            margin-top: 75px;
            color: #fff;
            font-size: 25px;
            line-height: 28px;
            cursor: pointer;

        }
    </style>
    <script>
        //准备内容 讲所有的人名字存储再数组里面
        var namelist = ["李可以", "张三", "潘金莲", "武大郎", "马三娘", "史进", "小仓"];
        var timer = null;
        var num = 0;
        function doit() {
            //获取开始元素对象并且绑定单击事件
            var bt = document.getElementById("bt");
            if (timer == null) {
                bt.innerHTML = "停止";
                show();

            } else {
                bt.innerHTML = "开始";
                clearTimeout(timer);
                timer = null;
            }



        }
        //截取数组里面名字，替换前准备好了吗这句话
        function show() {
            //获取即将替换的对象
            var box = document.getElementById("box");
            box.innerHTML = namelist[num];
            num++;
            if (num == namelist.length) {
                num = 0;
            }
            timer = setTimeout("show();", 80);

        }



    </script>
</head>

<body id="bodybj">
    <div id="box">
        亲，准备好了吗？
    </div>
    <div id="bt" onclick="doit();">开始</div>




</body>

</html>