如何比較以前的值和當前值

-2

我已經創建了一個骰子滾動腳本，但問題是當它繪製相同的數字時，它看起來好像沒有更改數字。如何比較以前的值和當前值

我想到了這個問題的兩種解決方法，一種是添加一些檢查，如果當前值等於先前的值，那麼它將顯示單詞「再次」。

我也想動畫的角色，但因爲它被JS插入它似乎忽略放在容器上的動畫。

#rollCount { 
 
    opacity: 0; 
 
    animation-name: fade-in; 
 
    animation-fill-mode: forwards; 
 
    animation-duration: 2s; 
 
} 
 

 
@keyframes fade-in { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<h1>Dice Roll</h1> 
 
<h2>Your fate awaits...</h2> 
 
<div id="rollCount"></div> 
 
<button class="" onclick="diceRoll()">Dice Roll</button> 
 

 
<script> 
 
    function diceRoll() { 
 
    var number = Math.floor(Math.random() * 6) + 1; 
 
    document.getElementById('rollCount').innerHTML = "<h3>" + number + "</h3>"; 
 
    } 
 
</script>

來源

2017-05-09 MDAWG

當我按下按鈕時，包含的代碼片段給了我不同的數字。難道你不是說同樣的數字會一次又一次發生嗎？ –

不，這是一個擲骰子它應該給出隨機數字，但由於它只有1到6個數字有時會重複，但看起來他們沒有改變，因爲沒有辦法區分它。 – MDAWG

如果用戶連續兩次推出相同數量和計算機是應該再次顯示 ...試試這個...

<h1>Dice Roll</h1> 
<h2>Your fate awaits...</h2> 
<div id="rollCount"></div> 
<button onclick="diceRoll()">Dice Roll</button> 

<script> 
    function diceRoll() { 
    var number = Math.floor(Math.random() * 6) + 1; 
    var prev = document.getElementById('rollCount').innerText; 
    if(number == parseInt(prev)) 
    document.getElementById('rollCount').innerHTML = "<h3 class='fade-in' >again</h3>"; 
    else 
    document.getElementById('rollCount').innerHTML = "<h3 class='fade-in' >" + number + "</h3>"; 
    } 
</script>

現在，添加淡入的元素...

@keyframes fadeAnimation { 
    0% { opacity:0; } 
    50% { opacity:.5; } 
    100% { opacity:1; } 
} 
@-o-keyframes fadeAnimation{ 
    0% { opacity:0; } 
    50% { opacity:.5; } 
    100% { opacity:1; } 
} 
@-moz-keyframes fadeAnimation{ 
    0% { opacity:0; } 
    50% { opacity:.5; } 
    100% { opacity:1; } 
} 
@-webkit-keyframes fadeAnimation{ 
    0% { opacity:0; } 
    50% { opacity:.5; } 
    100% { opacity:1; } 
} 
.fade-in { 
    -webkit-animation: fadeAnimation 1s; 
    -moz-animation: fadeAnimation 1s; 
    -o-animation: fadeAnimation 1s; 
    animation: fadeAnimation 1s; 
}

的jsfiddle代碼：https://jsfiddle.net/bzjg5yo6/

來源

2017-05-09 02:42:36 09182746

這正是我所期待的，謝謝堆！ – MDAWG

創建一個類，並添加/每用戶點擊該按鈕時將其刪除。還要將#rollCount的不透明度設置爲1，以便在刪除該類時它仍會顯示。

<style> 
     #rollCount { 
      opacity: 1; 
     } 
     #rollCount.fade-in { 
      animation-name: fade-in; 
      animation-fill-mode: forwards; 
      animation-duration: 2s; 
     } 

     @keyframes fade-in { 
      0% { 
       opacity: 0; 
      } 
      100% { 
       opacity: 1; 
      } 
     } 
    </style> 
<h1>Dice Roll</h1> 
    <h2>Your fate awaits...</h2> 
    <div id="rollCount"></div> 
    <button class="" onclick="diceRoll()">Dice Roll</button> 

<script> 
     function diceRoll() { 
      var number = Math.floor(Math.random() * 6) + 1; 
      document.getElementById('rollCount').className +=' fade-in'; 
      document.getElementById('rollCount').innerHTML = "<h3>" + number + "</h3>"; 
      setTimeout(function() { 
       document.getElementById('rollCount').classList.remove('fade-in'); 
      }, 1000) 

     } 
    </script>

來源

2017-05-09 02:30:15

是的，它的工作原理是完美的，但無論如何要將它連接到按鈕點擊而不是1秒超時？ – MDAWG

如何比較以前的值和當前值

回答

相關問題