本文共 1925 字，大约阅读时间需要 6 分钟。
通过前面6篇文章的介绍，我相信读者大概对JavaScript的对象有了初步了解。那么这篇文章我们继续对前面学习的知识进行总结和实战，用面向对象思维来封装抽象效果，本文要达到的效果如图所示。
如图所示，蓝色方框内显示当前奖品，当我们单击开始按钮时，奖品开始滚动起来；当我们单击停止按钮时，奖品列表滚动停止。
无论是现在我们要封装抽奖效果，还是后面要进行的插件开发，编程的步骤大概分为这几步。首先，编写页面的HTML元素，并用CSS调试好静态页面的样式。然后，给页面的各种元素注册事件，并处理事件的响应。
本例中页面的HTML代码如下：
抽奖 iphone
这里用一个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()函数清空定时器。
页面完整的代码如下：
抽奖 iphone
转载地址：https://blog.csdn.net/weixin_32497403/article/details/112091830 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
