如何比较以前的值和当前值

Question

我已经创建了一个骰子滚动脚本，但问题是当它绘制相同的数字时，它看起来好像没有更改数字。

我想到了这个问题的两种解决方法，一种是添加一些检查，如果当前值等于先前的值，那么它将显示单词“再次”。

我也想动画的角色，但因为它被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>

Answer 1

如果用户连续两次推出相同数量和计算机是应该再次显示 ...试试这个...

<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/

Answer 2

创建一个类，并添加/每用户点击该按钮时将其删除。还要将#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>