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