最简单的点名器纯html+css+js

最新推荐文章于 2022-08-20 23:10:44 发布

小布丁zc

最新推荐文章于 2022-08-20 23:10:44 发布

阅读量936

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/Zwk1482096234/article/details/120846190

版权

下面是我在无聊时候写的一个点名器的代码，很点单，最简单的点名器纯html+css+js，希望可以帮助到你



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名器</title>
    <style>
    *{
        margin:0;
        padding:0;
    }

    body {
        background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
    }

    #name {
        width: 300px;
        height: 300px;
        background:lightblue;
        border:1px solid green;
        border-radius:10px;
        margin:50px auto;
        font-size: 50px;
        text-align:center;
        line-height:300px;
    }

    .b2 {
        margin-left:430px;
    }

    button {
        margin-left:100px;
        height:50px;
        width:50px;
        
    }
    </style>
</head>
<body>
    <div id="name">
        开始点名
    </div>

<div class="b2">
    <button onclick="start()">开始</button>
    <button onclick="end()">结束</button>
</div>
</body>
<script type="text/javascript">
    // 声明变量
    var time, // 计时器
        div,
        name; // 选中的用户名

    div = document.getElementById('name');

    // 创建一个数组用来存储数据
    var name_list = ["张三","李四","王五"];

    function start(){
        // 生成一个随机数

        var num = Math.floor(Math.random() * name_list.length);

        // 根据随机索引值来确定选中的姓名

        name = name_list[num];

        // 更改网页里div的值

        div.innerHTML = name;

        // Window setTimeout() 方法
        time = setTimeout("start()",100);
    }

    function end() {

        clearTimeout(time);


        // clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
    }

</script>
</html>

小布丁zc

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
最简单的点名器纯html+css+js

下面是我在无聊时候写的一个点名器的代码，很点单，希望可以帮助到你<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点名器</title> <style> *{ margin:0; padding:0; } body { back.
复制链接

扫一扫