js实现随机点名

现实生活中用到随机的场景有很多，是非常常见的，比如随机点名，随机红包等等。今天给大家实现如何随机点名，请看下面所有代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>黄小齐博客之随机点名</title>
        <style>
        #p1{
            position: absolute;
            width: 300px;
            height: 200px;
            border:5px solid #eee;
            top: 20px;
            left:10px;
            font-size: 88px;
            font-weight: bold;
            font-family: "微软雅黑";
            line-height: 200px;
            text-align: center;
        }
        </style>
    </head>
    <body>
        <p id="p1"></p>
        <input type="button" value="开始点名" id="btn2">
    </body>
    <script>
        var btn2 = document.getElementById('btn2');
        btn2.onclick = function  () {
            clearInterval(timer);
            var aName = ['张三','李四','王五','刘六','小明','小张','小孙','李雷','韩梅梅'];
            var timer = null;
            var oP1 = document.getElementById('p1');
            var ran = 18+parseInt(Math.random()*9);
            var n = 0;
            timer = setInterval(function  () {
                oP1.innerHTML = aName[n%9];
                n++;
                if(n>ran){
                    clearInterval(timer);
                }
            },50)
        }
    </script>
</html>

本文标题:js实现随机点名

文章作者:xiaoqi

发布时间:2017-02-20, 22:47:13

最后更新:2017-02-20, 23:08:48

原始链接:http://m.xiaoqi888.cn/2017/02/20/js实现随机点名.html/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录