简易抽奖网页

最新推荐文章于 2024-04-03 10:11:23 发布

丸锃卉

最新推荐文章于 2024-04-03 10:11:23 发布

阅读量7.7k

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/MrwanZH/article/details/85245500

版权

本文介绍了如何创建一个简易的抽奖网页，包括简单的网页界面、通过回车开始和暂停抽奖、三次抽奖后自动结束以及使用ESC键重置抽奖。实现思路是使用JavaScript创建一个名字数组，每次抽奖移除一个名字，通过全局按键监听判断回车和ESC键，用一个布尔变量控制抽奖状态。

摘要由CSDN通过智能技术生成

简易抽奖网页需要完成以下几个功能：

* 1.简单的网页界面设计
* 2.回车开始抽取再次回车暂停

* 3.三次抽取后结束

* 4.ESC键重新抽取

界面设计部分不赘述

实现思想（JavaScripts部分）：

1. 设计一个数组存放被抽取人员的名字，每抽取一次就从数组中remove掉这个人。三次后结束

2. 设置全局按键监听document.onkeydown，然后利用switch给定参数e.keyCode来区分当前按的回车还是ESC。

3. 设置一个boolean型全局变量isBegin ，给定初值false，来判定当前是否处于滚动状态。为false表示此次操作为停止滚动获得幸运儿，为true则为开始滚动。

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #3F51B5;
			}
			.aside-left {
				position: absolute;
				left: 0;
				padding: 10px;
			}
			
			ol {
				margin-left: 20px;
			}
			
			ol li {
				padding: 10px 10px;
				font: italic 12pt "myfont";
			}
			
			h2 {
				text-align: center;
			}