前端案例-抽奖程序

来源：互联网发布：淘宝达人登录网址编辑：程序博客网时间：2024/06/05 15:37

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

首先看下效果图
布局比较简单，一个<div> 里有一个文本加一行文字，下面有两个按钮。系统自带的按钮比较丑，我用<span> 标签加事件监听代替（好吧，我自己弄的按钮也丑，哈哈）
- 代码实现：
```
 <div id="demo1"> 
    <p id="title">开始抽奖啦！！！</p> 
    <div class="btns"> 
        <span id="start">开 始</span> 
        <span id="stop">停 止</span> 
    </div> 
</div>
```

接下来就是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>

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

阅读全文

'); })();