一个随机抽奖js,html,css

Junju_

已于 2022-04-05 19:29:58 修改

阅读量302

点赞数

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

于 2022-04-05 18:55:08 首次发布

本文链接：https://blog.csdn.net/m0_58451019/article/details/123974657

版权

javascript项目专栏收录该内容

10 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
		<style type="text/css">
			.Show{
				font-size: 90px;
				color: darkblue;
			}
			
			#show{
				font-size: 130px;
				color: red;
			}			
			
		</style>


	</head>
	<body>
		
		<button onclick="start()"> 开始 </button>
		<button onclick="ending()" > 结束 </button>
		<div class="Show">
			抽到了  <span id="show"></span>
		</div>
		<script type="text/javascript">
			function Lottery(){
				var jackpot = [ "648元","328元","198元","98元","64元","32元","6元","1元","6元","1元" ,"6元","1元" ,"6元","1元" ,"6元","1元" ,"6元","1元" ,"6元","1元" ,"6元","1元" ,"6元","1元" ,"6元","1元" ,"6元","1元"  ];
				document.getElementById("show").innerHTML = jackpot[ Math.floor( Math.random()*jackpot.length ) ]
			}
			//全局变量可以让所有的局部便量使用 且  不会被销毁，一直存在
			var intervalId = 0;
			function start(){
				//需要通过逻辑判断定时器的开始与停止
				if(intervalId != 0){
					return;
				}
				//需要加判断条件是setInterval里面的运行多按几次按钮它会叠加速度，console.log()
				// 正因为每次都是零，而且每次没有判断语句停止进入setInterval，所以可以一直进入setInterval,
				//一定要加一个限定条件，通过定义的姓丁条件来判断不能setInterval。
				// 进行叠加速度。加了判断通过判断是零的话不进入setInterval
				//就不能进行加速了。

				intervalId = setInterval(
					function(){
						Lottery();
					},10
				)
				console.log(intervalId)
			}
			function ending(){
				console.log("执行了ending")
				//清楚 定时器   需要指定清楚是哪一个
				clearInterval(intervalId)
				//停止后 初始化
				intervalId = 0
			}
			
		</script>
		
	</body>
</html>

Junju_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个随机抽奖js,html,css

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> <sty.
复制链接

扫一扫

专栏目录