使用js和css实现抽奖网页小程序

最新推荐文章于 2024-09-12 15:24:52 发布

哎呦☞ᨐ

最新推荐文章于 2024-09-12 15:24:52 发布

阅读量591

点赞数 4

文章标签： javascript css 小程序

本文链接：https://blog.youkuaiyun.com/weixin_63478784/article/details/129296992

版权

该文章展示了一个使用HTML、CSS和JavaScript编写的抽奖小程序代码。用户点击开始按钮后，程序将从预定义的奖品列表中随机选择一个显示在页面上。当用户点击停止按钮时，抽奖会暂停。这个小程序可以用于简单的互动活动或演示目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>