javascript - 单击按钮时 css 消失

Question

我有一个倒数计时器，它会在单击按钮时开始工作。我尝试对其应用 css，但是当我单击开始按钮时，css 消失了。谁能告诉我如何一直保留我的 css

这是我的代码@ fiddle

 $('#startClock').click(function() {
   var counter = 120;
   setInterval(function() {
     counter--;
     if (counter >= 0) {
       span = document.getElementById("count");
       var str = parseInt(counter / 60) + ':' + (counter % 60);
       span.innerHTML = str;
     }
     if (counter === 0) {
       alert('sorry, out of time');
       clearInterval(counter);
     }
   }, 1000);

 });

.first_digit {
  width: 60px;
  font-size: 40px;
  padding: 4px;
  color: #CCC;
  text-shadow: 0px 1px 2px #000;
  text-align: center;
  background-color: #333;
  border-radius: 6px;
}
.second_digit {
  color: #333;
  font-size: 40px;
}
.third_digit {
  width: 60px;
  font-size: 40px;
  padding: 4px;
  color: #CCC;
  text-shadow: 0px 1px 2px #000;
  text-align: center;
  background-color: #333;
  border-radius: 6px;
}
.fourth_digit {
  width: 60px;
  font-size: 40px;
  padding: 4px;
  color: #CCC;
  text-shadow: 0px 1px 2px #000;
  text-align: center;
  background-color: #333;
  border-radius: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="count">
        <span class="first_digit">2</span>
<span class="second_digit">:</span>
<span class="third_digit">0</span>
<span class="fourth_digit">0</span>
</span>

<button class="rightbtn" type="button" id="startClock">Start</button>

Answer 1

FIDDLE :

你只需要修改这一行

span.innerHTML = str;

到

span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10;