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高手之路:封装抽奖效果的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript高手之路:构造函数方式封装对象

JavaScript高手之路:全选不选反选效果

JavaScript高手之路:全选不选反选效果

JavaScript高手之路:选项卡的封装

JavaScript高手之路:选项卡的封装

JavaScript高手之路:封装css方法和Table表格