jQuery实现简易数字摇奖程序

最新推荐文章于 2020-12-22 11:37:49 发布

原创

最新推荐文章于 2020-12-22 11:37:49 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #web前端

该博客介绍了如何使用jQuery实现一个简易的数字摇奖程序。通过生成随机四位数，将其转换为数组，并利用jQuery的each()方法和Easing插件，结合CSS调整背景位置，创造出数字滚动的效果。

实现思路：首先用random生成一个四位的随机数，转换为字符串并分割返回成数组。利用each()遍历每一个.num的元素，设置其backgroundPositionY来实现滚动的效果。

使用到jQuery Easing plugin:http://gsgd.co.uk/sandbox/jquery/easing/

相关代码

HTML

<head>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
</head>
<div class="res"></div>
<div class="num_box">
	<div class="num"></div>
	<div class="num"></div>
	<div class="num"></div>
	<div class="num"></div>
	<div class="btn">开始摇奖</div>
</div>

最低0.47元/天解锁文章