点击后随机效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>点名</title>
    <style>
        #box {
    height: 300px;
    width: 400px;
    margin: 0 auto;
}

#show {
    border: solid 1px #000000;
    font-size: 50px;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}

#bt {
    border: solid 1px #000000;
    height: 40px;
    width: 202px;
}
    </style>
</head>

<body>
    <div id="box">
        <div id="show"></div>
        <input id="bt" type="button" value="开始" />
    </div>
    <script type="text/javascript">
        var bt = document.getElementsByTagName('input')[0];
        var a = ['张三', '李四', '王五', '赵六', '科比', '库里', '杜兰特', '哈登', '汤普森', '伊戈达拉', '勇士', '骑士', '尼克斯', '湖人'];
        var a2 = new Array();
        var b = true;
        bt.onclick = function() {
            var s = bt.value;
            if (s == "开始") {
                b = true;.run(); //调用函数 bt.value = '结束'; } else { b = false; bt.value = '开始'; } } function run() { var i = Math.floor(Math.random() * a.length); show.innerHTML = a[i]; if (b == false) { var c = true; if (c) { a2[a2.length] = i; return; } } setTimeout("run()", 20); }
    </script>
</body>

</html>

转载于:https://my.oschina.net/u/3010603/blog/820693

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我来给你写一个简单的实现。 HTML代码: ```html <div> <button id="btn-start">开始抽奖</button> <button id="btn-stop">停止</button> <p id="result"></p> </div> ``` JavaScript代码: ```javascript const heroes = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; // 英雄列表 let intervalId = null; // 定时器ID let isRunning = false; // 是否正在抽奖 const btnStart = document.getElementById('btn-start'); const btnStop = document.getElementById('btn-stop'); const result = document.getElementById('result'); btnStart.addEventListener('click', () => { if (isRunning) return; isRunning = true; intervalId = setInterval(() => { const index = Math.floor(Math.random() * heroes.length); // 随机生成英雄下标 result.innerText = heroes[index]; }, 50); }); btnStop.addEventListener('click', () => { if (!isRunning) return; clearInterval(intervalId); isRunning = false; }); ``` 解释一下代码: 1. 定义一个英雄列表 `heroes`,以及两个状态变量 `intervalId` 和 `isRunning`。 2. 获取三个元素节点:开始抽奖按钮、停止按钮、结果展示区域。 3. 给开始抽奖按钮添加点事件监听器,当点时: - 如果正在运行,就直接返回,不做任何操作。 - 如果没有运行,就将 `isRunning` 设置为 `true`,然后使用 `setInterval` 开启一个定时器,每隔50毫秒刷新一次结果展示区域。 4. 给停止按钮添加点事件监听器,当点时: - 如果没有运行,就直接返回,不做任何操作。 - 如果正在运行,就使用 `clearInterval` 停止定时器,并将 `isRunning` 设置为 `false`。 这样,就实现了一个简单的随机抽英雄的效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值