简易抽奖网页

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

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

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

        * 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;
			}
			
			.aside-right {
				flo
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值