當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js 摇骰子特效

發布時間：2023/12/20 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 摇骰子特效小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

最近正好有在搜有關搖骰子的游戲，在網上看到了一篇比較不錯的案例，修改了原來的代碼給大家分享一下

正文

這個搖骰子的動作主要是通過定時器改變骰子的圖片實現的，比較簡單，主要依靠setTimeout()這個函數實現得到的。下面看看代碼

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>搖骰子</title><style type="text/css">.dice{width: 100px;height: 100px;background-image: url(1.jpg);cursor: pointer;position: relative;} </style></head><body><div class="dice"></div></body><script src="jquery-3.3.1.js"></script><script type="text/javascript">$(function(){let dice = $(".dice");dice.on('click',function(){dice.css('cursor','default');let num = Math.ceil(Math.random()*6);console.log(num);setTimeout(function(){dice.css('background-image','url(d1.jpg)');},200);setTimeout(function(){dice.css('background-image','url(d2.jpg)');},400);setTimeout(function(){dice.css('background-image','url(d3.jpg)')},600);setTimeout(function(){dice.css('background-image','url('+num+'.jpg')},700);});});</script> </html>

dice.css('cursor','default');

這個表示jq中設置css屬性，這里是設置鼠標指針放在一個元素邊界范圍內時所用的光標形狀。

dice.css('background-image','url(d3.jpg)')

這個是配置樣式下的背景圖片，最后一個使用隨機數是為了隨機展示一面數字。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LMNDvlWU-1653975611721)(https://juejin.cn/ “點擊并拖拽以移動”)]

然后是用到的圖片

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ckGWnUtm-1653975611722)(https://juejin.cn/ “點擊并拖拽以移動”)]?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0NbB7Szo-1653975611722)(https://juejin.cn/ “點擊并拖拽以移動”)]?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-siP0F6u6-1653975611725)(https://juejin.cn/ “點擊并拖拽以移動”)]?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-x35wtnuk-1653975611725)(https://juejin.cn/ “點擊并拖拽以移動”)]?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZoiXV1fI-1653975611726)(https://juejin.cn/ “點擊并拖拽以移動”)]?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zCXRkiEH-1653975611726)(https://juejin.cn/ “點擊并拖拽以移動”)]?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-uqoFj0qo-1653975611727)(https://juejin.cn/ “點擊并拖拽以移動”)]?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Uf611yyO-1653975611727)(https://juejin.cn/ “點擊并拖拽以移動”)]?[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SNXe5LRQ-1653975611728)(https://juejin.cn/ “點擊并拖拽以移動”)]?

前面的是六個面，后面是演示動作的圖，看起來就像是動的。

點擊后通過定時器按順序顯示，最后通過隨機數顯示骰子的面。

這里和原來參考的代碼不同的有兩個地方一是定時器的時間（原來的代碼中所有定時器時間都是200），二是最后顯示的面原來的代碼沒有加定時器。

原來的我直接用有些問題，動作圖由于定時器時間相同，你只能看到最后一張。

然后我查了setTimeout的用法。

setTimeout() 方法用于在指定的毫秒數后調用函數或計算表達式。

如果多個setTimeout執行，又是需要順序顯示圖片，那時間需要設置不同,這樣可以是圖片在不同時間顯示不一樣的圖片。盡管代碼還是會按順序執行。但是由于多張圖幾乎同時顯示，肉眼是只能看到一張的。只有時間不同才能看到多張圖，產生骰子轉動的錯覺。

總結

以上是生活随笔為你收集整理的js 摇骰子特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。