<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖小程序</title>
<style>
#container{
width: 300px;
height: 300px;
margin-top: 80px;
margin-left: 43%;
font-size: 20px;
background-color:;
}
#box{
width: 300px;
height: 100px;
box-shadow: 2px;
text-align: center;
border: solid 2px ;
background-color: antiquewhite;
}
#bt{
width: 300px;
height: 100px;
box-shadow: 2px;
text-align: center;
border: solid 2px ;
background-color: rgb(82, 83, 170);
}
</style>
</head>
<body>
<div id="container">
<div id="box">开始抽奖</div>
<div id="bt" onclick="doit()">
停止抽奖
</div>
</div>
</body>
<script>
var nameList = ["华为","苹果","小米","vivo","oppo","荣耀","三星","索尼","一加"];
var mytime =null;
function doit(){
var bt =document.getElementById("bt");
if(mytime==null){
bt.innerHTML = "停止抽奖";
show();
}
else{
bt.innerHTML = "开始抽奖";
clearInterval(mytime);
mytime=null;
}
}
function show(){
var box =document.getElementById("box");
var num =Math.floor(Math.random() *10000)% nameList.length;
box.innerHTML = nameList[num];
mytime = setTimeout("show()",1);
}
</script>
</html>
使用js和css实现抽奖网页小程序
最新推荐文章于 2024-06-20 00:10:10 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)