简易抽奖网页

最新推荐文章于 2024-07-22 14:21:40 发布

丸锃卉

最新推荐文章于 2024-07-22 14:21:40 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： CSS3 HTML JavaScript

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

简易抽奖网页需要完成以下几个功能：
* 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 {  
                float: right;  
                margin-right: 30px;  
            }  
              
            .container {  
                position: absolute;  
                left: 50%;