js实现简单随机点名器

最新推荐文章于 2024-04-28 17:05:59 发布

见面请叫我渣zha

最新推荐文章于 2024-04-28 17:05:59 发布

阅读量5.1k

点赞数 9

分类专栏：代码技术文章标签： html javascript css

本文链接：https://blog.csdn.net/youzigrowing/article/details/120747736

版权

技术同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

代码

2 篇文章 0 订阅

订阅专栏

之前做了js倒计时,现在做一个随机点名器，这个更简单，没什么技术含量，直接上代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>点击按钮随机点名-样式布局参考</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #box {
            width: 200px;
            height: 110px;
            margin: 0px auto;
            background-color: #ff5a20;
            border-radius: 10%;

        }

        #ti {
            position: absolute;
            width: 100px;
            height: 30px;
            border-radius: 10%;
            background-color: #c5c5c5;
            line-height: 30px;
            text-align: center;
            font-weight: 700;
            margin-top: 35px;
            margin-left: 50px;
            border: 1px solid #bb6647;

        }

        #bt {
            position: absolute;
            top: 75px;
            width: 45px;
            height: 22px;
            margin-left: 75px;
            background-color: green;
            border: 1px solid white;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        var namelist = ["张三", "李四", "王五", "赵六", "孙七"];
        var mytime = null;

        function doit() {
            var bt = window.document.getElementById("bt");
            if (mytime == null) {
                bt.innerHTML = "停止";
                bt.style.backgroundColor = "red";
                bt.style.boxShadow = "1px 1px 1px 1px #4b6094"
                show();
            }
            else {
                bt.innerHTML = "开始";
                clearTimeout(mytime);
                mytime = null;
                bt.style.backgroundColor = "green";
            }
        }

        function show() {
            var ti = window.document.getElementById("ti");
            var num = Math.floor((Math.random() * 1000)) % namelist.length;
            ti.innerHTML = namelist[num];
            mytime = setTimeout("show()", 1);
        }
    </script>
</head>

<body>
    <div id="box">
        <div id="ti">随机点名器</div>
        <div id="bt" onclick="doit()">开始</div>
    </div>
</body>

</html>

效果如图：
在这里插入图片描述

见面请叫我渣zha

关注

9
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
js实现简单随机点名器

之前做了js倒计时,现在做一个随机点名器，这个更简单，没什么技术含量，直接上代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>点击按钮随机点名-样式布局参考</title> <style> * { padding: 0px; margin: 0px;
复制链接

扫一扫