欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)簡(jiǎn)單擲骰子小游戲

 更新時(shí)間：2019年10月24日 14:13:41   作者：momobutong  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單搖篩子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js擲骰子小游戲的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)方法：

方法一：通過background-position、background-image、backg-repeat三個(gè)屬性以及jquery animate()方法改變背景骰子圖來實(shí)現(xiàn)圖片切換。

PS：調(diào)整background-position比較麻煩，由于背景是一張包含各個(gè)點(diǎn)數(shù)以及旋轉(zhuǎn)時(shí)骰子的整圖

方法二：設(shè)置定時(shí)調(diào)整css樣式background-image。

PS：實(shí)現(xiàn)簡(jiǎn)單，但是視覺效果不佳

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>擲骰子</title>
 <style type="text/css">
  .dice {
   width: 100px;
   height: 100px;
   background-image: url(dice_1.jpg);
   cursor: pointer;
   position: relative;
  }
 </style>
</head>
<body>
<div class="dice"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.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);
   dice.css('background-image', 'url(dice_f.jpg)');
   setTimeout(function(){
    dice.css('background-image', 'url(dice_s.jpg)');
   },200);
   setTimeout(function(){
    dice.css('background-image', 'url(dice_t.jpg)');
   },200);
   setTimeout(function(){
    dice.css('background-image', 'url(dice_'+num+'.jpg)')
   }, 200);
  });
  
 });
</script>
</body>
</html>

骰子圖：

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論