<!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>
一个随机抽奖js,html,css
于 2022-04-05 18:55:08 首次发布