前端基础笔记08-在网页上实现简单的抽奖器

最新推荐文章于 2023-10-18 19:16:30 发布

前方请直行

最新推荐文章于 2023-10-18 19:16:30 发布

阅读量854

点赞数 1

分类专栏：前端基础笔记文章标签： js css html

本文链接：https://blog.csdn.net/w1226234212/article/details/111385838

版权

前端基础笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端基础笔记08-在网页上实现简单的抽奖器

最终效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机选择</title>
		<style type="text/css">
			*{
				padding: 0;
			}
			.top-div{
				height: 50px;
				background-color: #ff6265;
			}
			.top-div>p{
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 30px;
				font-family: "黑体";
			}
			.outer{
				width: 500px;
				height:400px;
				margin: 20px auto;
				border: #000000 1px solid;
				box-shadow: 0 0 5px 5px gray;
			}
			h1{
				display: block;
				width: 100px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				background-color: #c1f2ff;
				margin: 50px auto; 
			}
			#name{
				display: block;
				width: 80%;
				height: 60px;
				line-height: 60px;
				font-size: 40px;
				text-align: center;
				margin: 50px auto; 
				border-radius: 15px;
				outline: none;
			}
			p,p>input{
				display: block;
				width: 200px;
				height: 60px;
				line-height: 60px;
				font-size: 40px;
				text-align: center;
				margin: 50px auto; 
				border: none;
				border-radius: 15px;
				outline: none;
			}
			p>input:hover{
				/* background-color: #0000FF; */
				background-image: linear-gradient(to right, #95fff8, #f5ff7e, #acffb3, #fdb4ff, #ffb9d5);
			}
		</style>
	</head>
	<body>
		<div class="top-div">
			<p>随机抽奖器</p>
		</div>
		
		<div class="outer">
			<h1>抽奖</h1>
			<input type="text" id="name" value="" />
			<p><input type="button" name="" id="btn" value="start" onclick="start()" /></p>
		</div>
		
		<script type="text/javascript">
			//随机物品数组
			let prizeArray = ["电视机","电脑","耳机","手机","水杯","笔记本","显示器","游戏机","抱枕","机械键盘","坚果","水果","汽车","谢谢参与"]; 
			
			//获取随机数
			let timer = null;
			//选择奖品
			function choice(){
				let index = Math.floor(Math.random()*prizeArray.length);
				let prize = prizeArray[index];
				let pr = document.getElementById("name");
				pr.value = prize;
				timer = setTimeout(choice,50);
			}
			//关闭定时器
			function stop(){
				//关闭定时器
				clearTimeout(timer);
				//重置定时器为null
				timer =null;
			}
			//获取按钮对象
			let btn = document.getElementById("btn");
			//点击开始按钮
			function start(){
				//如果计时器为空，则开始选择，并将按钮显示变为stop,颜色改为红色
				if(timer == null){
					choice();
					btn.value="stop";
					btn.style.color="red";
				}else{//重新点击后关闭计时器，并将按钮显示变为start，颜色改为黑色
					stop();
					btn.value="start";
					btn.style.color="black";
				}
			}
			
		</script>
	</body>
</html>