js点名、抽奖系统demo

    选择打赏方式

本站已不再更新,最新资源请前往zcjun.com获取!

点击查看原图

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

<head>
    <meta charset="UTF-8">
    <title>JS实现随机点名</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrapper {
            width: 800px;
            margin: 100px auto;
            border: 1px solid #ddd;
            text-align: center;
        }
        .box li {
            vertical-align: top;
            display: inline-block;
            width: 100px;
            height: 50px;
            border: 2px solid #ddd;
            border-radius: 15px;
            text-align: center;
            line-height: 50px;
            margin: 5px;
        }
        .box li.change {
            background-color: red;
            color:#fff;
            font-weight:bolder;
        }
        .wrapper button {
            display: inline-block;
        }
        .wrapper button {
            border: none;
            width: 100px;
            height: 50px;
            border-radius: 10px;
            cursor: pointer;
            outline: none;
            margin-top: 20px;
            font-weight: bolder;
            color: #333;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="box"></ul>
        <button class="start">开始点名</button>
        <button class="stop">停止</button>
        <div>
	        <span>幸运的的你:</span>
	        <span class="name"></span>        	
        </div>
    </div>

    <script>
        // 原生js取出元素
        var boxUl = document.getElementsByClassName('box')[0];
        var start = document.getElementsByClassName('start')[0];
        var stop = document.getElementsByClassName('stop')[0]
        var oLi = document.getElementsByTagName('li');
        // 将插入名字存入数组
        var arr = ["郭强", "诸泽涵", "张利宏", "高海波", 
        "张东升", "高英伟", "秦超蒙", "麦腾阳", "吴金正", "马方岩", 
        "尚义鹏", "赵建龙", "李旭斌", "张丰", "金豪", "王银鹏", "温壮", 
        "田利明", "邱国军", "姚志强", "黎怡志", "张崇如", "高帅帅", "谷世龙",
         "陈娜", "常勇", "杨明豪", "段春林", "丛绍谨", "曾佑坤", "洪洋", 
         "王永琪", "王阳", "陈宇"]
        // html进行 字符串拼接
        var str = '';
        // 通过for循环进行拼接
        for (var i = 0; i < arr.length; i++) {
            // 利用字符串拼接
            str += "<li>" + arr[i] + "</li>";
        }
        // 将拼接后的html字符串插入到dom结构中
        boxUl.innerHTML = str;
        // 声明timer 
        var timer = null;
        // 点击开始进行选择
        start.onclick = function () {
            // 每次运行前清除timer
            clearInterval(timer);
            // 设置定时器
            timer = setInterval(function () {
                // 根据数组长度范围生成随机数
                var i = Math.floor(Math.random() * arr.length);
                // 先通过for循环清空所有class名
                for (var j = 0; j < oLi.length; j++) {
                    oLi[j].className = "";
                }
                // 为随机选择的li设置选中的class名
                oLi[i].className = "change";
            }, 10);
        };
        // 点击停止
        stop.onclick = function () {
            // 清空定时器
            clearInterval(timer);
            // 找到选中的元素
            var choise = document.getElementsByClassName('change')[0];
            // 找到选中元素的内容
            var name = choise.innerText;
            // 同时为选中位置添加内容 
            var nameSpan = document.getElementsByClassName('name')[0];
            nameSpan.innerText = name;
        }

    </script>
</body>

</html>

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:js点名、抽奖系统demo https://old.zcjun.com/learn/510.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!