JS实现掷骰子

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>

骰子图:

效果图:

转载于:https://www.cnblogs.com/momobutong/p/8601860.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值