【JS小实例】随机点名函数

最新推荐文章于 2023-04-05 19:21:28 发布

蘑菇栗子

最新推荐文章于 2023-04-05 19:21:28 发布

阅读量128

点赞数

分类专栏： js小实例/小功能文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xxxxxwxx/article/details/126437261

版权

js小实例/小功能专栏收录该内容

60 篇文章 0 订阅

订阅专栏

HTML部分

<div id="isyou">请点击下面的按钮，开始抽奖</div>
    <div id="aa">
        <span id="btn1">点击开始</span>
        <span id="btn2">点击结束</span>
    </div>

CSS部分

#isyou {
            font-size: 80px;
            text-align: center;
            margin: 100px auto;
        }

        #btn1,
        #btn2 {
            width: 180px;
            height: 60px;
            border: none;
            background: dodgerblue;
            display: block;
            /* margin: 0 auto; */
            color: #fff;
            font-size: 30px;
            border-radius: 6px;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
            float: left;
        }

        #btn1 {
            margin-right: 40px;
        }

        #aa {
            width: 400px;
            height: 60px;
            margin: 0 auto;

        }

        #btn1:active {
            background: slateblue;
        }

        #btn2:active {
            background: slateblue;
        }

JS部分

var str = '姓名1,姓名2,姓名3,姓名4,姓名5,姓名6,姓名7,';
        var arry = str.split(",");// 将字符串转化为数组
        console.log(arry);
        //获取数组长度
        var leng = arry.length;
        //随机数
        function ran(num1, num2) {
            var max, min;
            if (num1 > num2) {
                max = num1;
                min = num2;
            } else {
                max = num1;
                min = num2;
            }
            return Math.round(Math.random() * (max - min) + min);
        }
        var oIsyou = document.getElementById("isyou")
        var obtn1 = document.getElementById("btn1")
        var obtn2 = document.getElementById("btn2")
        var times;
        obtn1.onclick = function () {
            clearInterval(times);
            times = setInterval(function () {
                var res = ran(0, leng - 1);
                oIsyou.innerHTML = arry[res];
            }, 10)
        }
        obtn2.onclick = function () {
            clearInterval(times)
        }