用js做一个简单的班级点名器

2019-05-27 16:50:06 阅读：271 来源： 互联网

标签：班级点名 name 50px list 300px js div margin

<!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>

标签：班级,点名,name,50px,list,300px,js,div,margin
来源： https://www.cnblogs.com/quxinyu/p/10931507.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用js做一个简单的班级点名器