js实现简单抽奖功能

最新推荐文章于 2023-05-26 13:37:21 发布

Alicesa

最新推荐文章于 2023-05-26 13:37:21 发布

阅读量943

点赞数

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

本文链接：https://blog.csdn.net/Alicesa/article/details/108436659

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#box{
				border: 1px solid aqua;
				height: 100px;
				width: 200px;
				text-align: center;
				line-height: 100px;
				margin: auto;
				font-size: 22px;
			}
			.active{
				background: slateblue;
			}
			li{
				text-align: center;
				list-style:none ;
				width: 40px;
				height: 20px;
				line-height: 20px;
				border: 1px solid blue;
				margin-left: 40px;
				
				float: left;
			}
			ul,li
			{
				list-style: none;
				
			}
			#shu
			{
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<button id="stp">开始</button><button id="off">停止</button>
		
		<div id="box">恭喜<span>1</span>号  </div>
		<div id="shu">0</div><span>等奖</span>
		<ul>
			<li class="active">1号</li>
			<li>2号</li>
			<li>3号</li>
			<li>4号</li>
			<li>5号</li>
			<li>6号</li>
			<li>7号</li>
		</ul>
		<script>
			var t=null;
			var ostp=document.getElementById("stp");
			var ooff=document.getElementById("off");
			var ospan=document.getElementsByTagName("div")[0].getElementsByTagName("span");
			var oli=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
			var oshu=document.getElementsByClassName("shu");
			function mytime(){
				var n=Math.floor(Math.random()*7+1);
				ospan[0].innerText=n;
				ospan[1].innerText=oli[n-1].innerText;
				for(let i=0;i<oli.length;i++)
				{
					oli[i].className="";
				}
				oli[n-1].className="active";
			}
			function mytime2()
			{
				var a=Math.floor(Math.random()*3+1);
				shu.innerText=a;
				
				
			}
			ostp.onclick=function(){
				clearInterval(t);
				 t=setInterval(mytime,50);
				 at=setInterval(mytime2,1000)
			}
			ooff.onclick=function(){
				clearInterval(t);
				clearInterval(at);
			}
		</script>
	</body>
</html>

效果

在这里插入图片描述

Alicesa

关注

0
点赞
踩
3

收藏

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

代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ border: 1px solid aqua; height: 100px; width: 200px; text-align: center; line-height: 100px;
复制链接

扫一扫