前端抽奖程序代码实现教程

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

首先看下效果图

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

代码实现：

 <p id="demo1"> 

    <p id="title">开始抽奖啦！！！</p> 

    <p class="btns"> 

        <span id="start">开 始</span> 

        <span id="stop">停 止</span> 

    </p> 

</p>

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

/*先清空默认边距*/ 

*{ 

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传到p再传到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>

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