前端案例-抽奖程序

这个简单的抽奖案例按照前端的习惯，分两部完成，即布局加脚本

• 首先看下效果图
  
• 布局比较简单，一个
  里有一个文本加一行文字，下面有两个按钮。系统自带的按钮比较丑，我用 标签加事件监听代替（好吧，我自己弄的按钮也丑，哈哈）
  

  • 代码实现：
    

     
     
    
        
    开始抽奖啦！！！
     
    
        
     
    
            开 始 
    
            停 止 
    
        
     
    
    

• 接下来就是css样式了，一般我会从最外面往里加样式，即从demo1的div开始加

  • /*先清空默认边距*/ 
    
    *{ 
    
    margin: 0; 
    
    padding:0; 
    
    }

  • `#demo1{
    margin: 0 auto;
    width: 60%;
    height: 200px;
    text-align: center;
    background-color: aquamarine;
    margin-top: 50px;
    padding-top: 50px;
    border-radius: 20px;
    }
     #title{
    font-size: 40px;
    width: 100%;
    height: 100px;
    
    }
    .btns{
        width: 100%;
        height: 100px;
    }
    .btns span{
        background-color: darkgray;
        height: 40px;
        font-size: 30px;
        margin-left: 30px;
        margin-top: 40px;
        border-radius: 7px;
    }`

• 整体比较简单，只是加下背景，边距
  

  ---

  
  
  • 然后是加事件监听，抽奖程序主要用到的函数有setInterval(fun(),timeout) ,作用是每个timeout毫秒就执行一次 fun() 函数。
    
  • 其中的 type 是监听的事件，如：onClick，只是addEventListener的参数不加on，所以type我们设置为click。hander是我们处理该事件调用的函数；事件有两种传递方式 ，一种 是捕获，一种是冒泡，即从最具体的往最不具体的传递（即从span传到div再传到body，而捕获则相反）false表示我们用的是冒泡传递。
• 详细代码

<script type="text/javascript">
        var title = document.getElementById("title");
        var btn_start = document.getElementById("start");
        var btn_stop = document.getElementById("stop");
        var items = ['笔记本电脑',"机械键盘","固态硬盘","单反相机","谢谢参与"];
        var timer;
        var flag = 0; //0表示没开始，1表示开始

        window.onload = function(){
            btn_stop.style.backgroundColor = '#eee';
        }

        function addEvent(ele,type,hander){
            //为了与ie浏览器兼容
            if(ele.attachEvent) {
                ele.attachEvent('on' + type, hander);
            }else{
                ele.addEventListener(type,hander,false);
            }
        }
        var update = function(){
            temp = Math.floor( Math.random()*5 );
            title.innerHTML = items[temp];
        }

        var start = function() {
            if (flag == 0) {
                timer = setInterval(function () {
                        update();
                    }, 100);
                flag = 1;
                btn_start.style.backgroundColor = '#eee';
                btn_stop.style.backgroundColor = 'darkgray';
            }else {

            }
        }
        var stop = function(){
            if(flag == 1) {
                clearInterval(timer);
                btn_start.onclick = null;
                flag = 0;
                btn_stop.style.backgroundColor = '#eee';
                btn_start.style.backgroundColor = 'darkgray';

            }else {

            }
        }
        addEvent(btn_start,'click',start);
        addEvent(btn_stop,'click',stop);
    script>

本人也是初学，代码中有不正确的地方，往不吝赐教，感激不尽~