简单版随机点名js

最新推荐文章于 2023-01-11 22:57:43 发布

你是我遥远万里最牵挂的猪

最新推荐文章于 2023-01-11 22:57:43 发布

阅读量315

点赞数 1

分类专栏： javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/Leejinian888/article/details/94131602

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            margin: 100px auto;
            background: linear-gradient(#010059, #52437b, #ff7a8a, #fcf594);
        }

        .box .top {
            height: 100px;
            display: flex;
            justify-content: space-around;
            align-content: center;
        }

        .box #bottom {
            text-align: center;
            font-size: 50px;
            height: 300px;
            line-height: 300px;
            color: #fff;
        }

        .box .top button {
            outline: none;
            height: 100px;
            background-color: rgba(255, 255, 255, 0.0);
            border: none;
            color: #fff;
            font-size: 16px;
            transition: 1s;
        }

        .box .top button:hover {
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <button id="begin">请选择英雄</button>
            <button id="end">全军出击</button>
        </div>
        <div id="bottom"></div>
    </div>
    <script>
        var begin = document.getElementById("begin");   //获取元素开始按钮
        var end = document.getElementById("end");       //获取停止按钮
        var add = document.getElementById("bottom");   //获取元素
        var arr = ["南充李二狗", "顶级男模夏梦生", "贵阳可达鸭", "成都鸭王汪东旭","吃啃卤猪脚的王丽菲","新疆霸主胡玉兰","知名退堂鼓表演家","不愿意透露姓名的网友"];
        add.innerHTML = arr[0];   //初始化数据
        var timer;    //因为清除定时器的时候不能放入一个函数，该变量用来存放定时器
        begin.onclick = function () {   //绑定开始事件
            clearInterval(timer);
            timer = setInterval(function () {   //定时器
                var i = Math.floor(Math.random() * arr.length);
                // console.log(i);
                add.innerHTML = arr[i];         //把数组里的元素动态赋值给div.add中
            }, 50)
        }
        end.onclick = function () {     //清楚定时
            clearInterval(timer);
        }

    </script>
</body>

</html>

你是我遥远万里最牵挂的猪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单版随机点名js

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录