JavaScript高手之路：封装抽奖效果

最新推荐文章于 2024-10-24 16:52:37 发布

「已注销」

最新推荐文章于 2024-10-24 16:52:37 发布

阅读量2.5k

点赞数 26

CC 4.0 BY-SA版权

分类专栏： WEB前端 jQuery实战文章标签： JavaScript 面向对象抽奖

本文链接：https://blog.csdn.net/zhang5476499/article/details/89997975

通过前面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