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

尝试

$('#startClock').click(function(){
    var counter = 120;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
        $("#count span:eq(0)").text(parseInt(counter / 60));
        $("#count span:eq(2)").text((counter % 60).toString().split("")[0]);
        $("#count span:eq(3)").text((counter % 60).toString().split("")[1]);
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);

});

Fiddle

Answer 2

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;

Answer 3

问题在于你的条件：

if (counter >= 0) {
  span = document.getElementById("count");
    var str = parseInt(counter / 60) + ':' + (counter % 60);
  span.innerHTML = str;
}

最后一行将变量str的值插入ID为count的主span标记。

以前的内容，即所有的span标签，都会被替换。

编辑：

您必须调用单跨度标记，而不是主跨标记：

if (counter >= 0) {
    span1 = document.getElementById("first-digit");
    span3 = document.getElementById("third-digit");
    span4 = document.getElementById("fourth-digit");
    span1.innerHTML = parseInt(counter / 60);
    span3.innerHTML = String(counter % 60)[0];
    span4.innerHTML = String(counter % 60)[1];
}

并将ID添加到span标记：

<div id="count">
    <span id="first-digit" class="first_digit">2</span>
    <span id="second-digit" class="second_digit">:</span>
    <span id="third-digit" class="third_digit">0</span>
    <span id="fourth-digit" class="fourth_digit">0</span>
</div>

我用你的主跨标签制作了div标签。

Answer 4

在这些方面：

span = document.getElementById("count");
var str = parseInt(counter / 60) + ':' + (counter % 60);
span.innerHTML = str;

您重写了count div的内容，以便：

<span class="first_digit">2</span>
<span class="second_digit">:</span>
<span class="third_digit">0</span>
<span class="fourth_digit">0</span>

在第一个间隔后成为这个：

1:59

你可能想要做的是打破你的时间＆＃34;到个人char中并将它们直接分配到first_digit，second_digit等

Answer 5

我确信有更优雅的方法可以做到这一点，但这应该有用。

问题主要是在替换内部HTML时，所有元素（即跨度）都被删除并替换为简单的字符串。

$('#startClock').click(function(){
    var counter = 120;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
        var minutes = parseInt(counter / 60);
        var seconds = parseInt(counter % 60);
        var secondstens = Math.floor(seconds / 10);
        var secondsones = seconds % 10;

        var str = '<span class="first_digit">' + minutes + '</span>' + '<span class="second_digit">:</span><span class="third_digit">' + secondstens + '</span><span class="fourth_digit">' + secondsones + '</span>'

      span.innerHTML = str;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);

});

Answer 6

试试这个。您只需要在元素中添加类

        $(".first_digit").html(str.split(':')[0]);

        $(".third_digit").html(str.split(':')[1].toString()[0]);
        $(".fourth_digit").html(str.split(':')[1].toString()[1]);

https://jsfiddle.net/ecq9f1bL/15/

单击按钮后css消失

6 个答案: