js实现抽奖器功能

最新推荐文章于 2024-04-19 23:02:35 发布

海绵老呆

最新推荐文章于 2024-04-19 23:02:35 发布

阅读量155

点赞数

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

本文链接：https://blog.csdn.net/m0_37343874/article/details/120307590

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div{
            width: 350px;
            height: 310px;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }
        .option, #start{
            width: 100px;
            height: 100px;
            border: 1px solid #222222;
            display: inline-block;
        }
        #start{
            background-color: #0077aa;
        }
    </style>
</head>
<body>
<div class="div">
    <div class="option"></div>
    <div class="option"></div>
    <div class="option"></div>
    <div class="option"></div>
    <div id="start"></div>
    <div class="option"></div>
    <div class="option"></div>
    <div class="option"></div>
    <div class="option"></div>
</div>
<script>
    //逻辑：点击开始触发一个定时器
    //定时器内部 随机一个数 通过这个数来获取奖品所在的元素
    //必须设置一个时间点停止定时器
    let btn = document.getElementById('start');
    let options = document.getElementsByClassName('option');
    btn.onclick = function (){
    	//设置一个初始值 作为时间判断
    	let number = 0
    	let timer=null
        //1.触发一个定时器
        if(timer==null){
			timer = setInterval(()=>{
				number++;
				//2.随机0-7的数，通过数组下标获取具体选中的元素
				let num = Math.round(Math.random()*7)
                //3.把所有元素都恢复原来样子
				for(let i=0;i<options.length;i++){
					options[i].style.backgroundColor = ''
				}
                //给选中元素 添加样式
				options[num].style.backgroundColor = 'pink'
                //给定时器设置有效时间 停止定时器
                if(number>=10){
                	clearInterval(timer)
                    timer = null
                }
			},100)
        }
    }
</script>
</body>
</html>

在这里插入图片描述

海绵老呆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现抽奖器功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .div{ width: 350px; height: 310px; overflow-wrap: break-word;
复制链接

扫一扫