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>
骰子图：
效果图：
