JS实现掷骰子

最新推荐文章于 2023-12-29 13:24:17 发布

weixin_30627341

最新推荐文章于 2023-12-29 13:24:17 发布

阅读量815

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/momobutong/p/8601860.html

JS实现掷骰子

实现方法：

方法一：通过background-position、background-image、backg-repeat三个属性以及jquery animate()方法改变背景骰子图来实现图片切换。

　　　 PS：调整background-position比较麻烦，由于背景是一张包含各个点数以及旋转时骰子的整图

方法二：设置定时调整css样式background-image。

　　 PS：实现简单，但是视觉效果不佳

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>掷骰子</title>
 6     <style type="text/css">
 7         .dice {
 8             width: 100px;
 9             height: 100px;
10             background-image: url(dice_1.jpg);
11             cursor: pointer;
12             position: relative;
13         }
14     </style>
15 </head>
16 <body>
17 <div class="dice"></div>
18 
19 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
20 <script type="text/javascript">
21     $(function(){
22         let dice = $(".dice");
23         dice.on('click',function(){
24             dice.css('cursor', 'default');
25             let num =Math.ceil(Math.random()*6);
26             console.log(num);
27             dice.css('background-image', 'url(dice_f.jpg)');
28             setTimeout(function(){
29                 dice.css('background-image', 'url(dice_s.jpg)');
30             },200);
31             setTimeout(function(){
32                 dice.css('background-image', 'url(dice_t.jpg)');
33             },200);
34             setTimeout(function(){
35                 dice.css('background-image', 'url(dice_'+num+'.jpg)')
36             }, 200);
37         });
38         
39     });
40 </script>
41 </body>
42 </html>