JavaScript高手之路：封装抽奖效果
Posted 「已注销」
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高手之路：封装抽奖效果相关的知识，希望对你有一定的参考价值。
通过前面6篇文章的介绍，我相信读者大概对javascript的对象有了初步了解。那么这篇文章我们继续对前面学习的知识进行总结和实战，用面向对象思维来封装抽象效果，本文要达到的效果如图所示。
如图所示，蓝色方框内显示当前奖品，当我们单击开始按钮时，奖品开始滚动起来；当我们单击停止按钮时，奖品列表滚动停止。
无论是现在我们要封装抽奖效果，还是后面要进行的插件开发，编程的步骤大概分为这几步。首先，编写页面的html元素，并用CSS调试好静态页面的样式。然后，给页面的各种元素注册事件，并处理事件的响应。
本例中页面的HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<title>抽奖</title>
<style type="text/css">
#main
width: 400px;
height: 360px;
margin: 100px auto;
#main div
padding: 10px;
#prize
width: 400px;
height: 79px;
font-size: 60px;
text-align: center;
box-shadow: 1px 1px 1px 1px #09f;
.btn
text-align: center;
.btn button
width: 46px;
height: 37px;
margin: 5px;
text-align: center;
background-color: #666;
color: white;
border: none;
</style>
</head>
<body>
<div id="main">
<div id="prize">iphone</div>
<div class="btn">
<button id="start">开始</button>
<button id="stop">停止</button>
</div>
</div>
</body>
</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()函数清空定时器。
页面完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>抽奖</title>
<style type="text/css">
#main
width: 400px;
height: 360px;
margin: 100px auto;
#main div
padding: 10px;
#prize
width: 400px;
height: 79px;
font-size: 60px;
text-align: center;
box-shadow: 1px 1px 1px 1px #09f;
.btn
text-align: center;
.btn button
width: 46px;
height: 37px;
margin: 5px;
text-align: center;
background-color: #666;
color: white;
border: none;
</style>
<script type="text/javascript">
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);
window.onload = function()
var prize = new Prize("main");
</script>
</head>
<body>
<div id="main">
<div id="prize">iphone</div>
<div class="btn">
<button id="start">开始</button>
<button id="stop">停止</button>
</div>
</div>
</body>
</html>
以上是关于JavaScript高手之路：封装抽奖效果的主要内容，如果未能解决你的问题，请参考以下文章