html抽奖代码_JavaScript高手之路：封装抽奖效果-白红宇

html抽奖代码_JavaScript高手之路：封装抽奖效果

阅读量：1530 次

发布时间：2019-04-21

本文共 1925 字，大约阅读时间需要 6 分钟。

通过前面6篇文章的介绍，我相信读者大概对JavaScript的对象有了初步了解。那么这篇文章我们继续对前面学习的知识进行总结和实战，用面向对象思维来封装抽象效果，本文要达到的效果如图所示。

如图所示，蓝色方框内显示当前奖品，当我们单击开始按钮时，奖品开始滚动起来；当我们单击停止按钮时，奖品列表滚动停止。

无论是现在我们要封装抽奖效果，还是后面要进行的插件开发，编程的步骤大概分为这几步。首先，编写页面的HTML元素，并用CSS调试好静态页面的样式。然后，给页面的各种元素注册事件，并处理事件的响应。

本例中页面的HTML代码如下：

这里用一个id为main的div包裹页面的多有内容，在这个div下放有2个子div，第一个是现实奖品的div prize。另一个是存在开始和停止按钮的div。简单的几句代码已经讲页面的轮廓描绘出来了，下面我们把想要的效果抽象成一个类Prize。

var Prize = function(id) {            //定义奖品数组            this.prize = ["iPhone 8", "iPhone 9", "iPhone 10","iPhone 10s", "保时捷", "10元话费"];            //给开始和停止注册事件            var mainDiv = document.getElementById("main")            var startBtn = document.getElementById("start");            var stopBtn = document.getElementById("stop");            var prizeDiv = document.getElementById("prize");            var that = this;            //给开始注册点击事件            startBtn.onclick = function(e) {                //先清空之前的定时器                clearInterval(that.handler);                //启动定时器                var handler = setInterval(function() {                    var random = Math.random();                    var index = Math.floor(random*that.prize.length);                    prizeDiv.innerHTML = that.prize[index];                }, 100);                that.handler = handler;            }            stopBtn.onclick = function(e) {                clearInterval(that.handler);            }        }

该类有一个prize数组，里面预存放了要抽取的奖品，然后通过document对象的getElementById()方法获取prize元素和开始，停止按钮Dom元素。最后给开始按钮和停止按钮注册单击事件，当用户单击开始时向prizeDiv的内容写入随机prize数组的奖品，这里用到了JavaScript内置对象Math的俩方法random()和floor()方法。random用来产生随机数而floor是向下取整。不断的切换奖品主要代码是调用setInterval()函数，而点击停止按钮的时候，则调用clearInterval()函数清空定时器。

页面完整的代码如下：

转载地址：http://uwudy.baihongyu.com/

你可能感兴趣的文章