Javascript 点击一个按钮css就会消失

我有一个倒计时器，它一按按钮就开始工作。我试图将css应用于它，但当我单击开始按钮时，css消失了。谁能告诉我怎样才能一直保留css

这是我的密码@

$（'startClock'）。单击（函数（）{
var计数器=120；
setInterval（函数（）{
计数器--；
如果（计数器>=0）{
span=document.getElementById（“计数”）；
var str=parseInt（计数器/60）+'：'+（计数器%60）；
span.innerHTML=str；
}
如果（计数器==0）{
警报（“对不起，时间不够了”）；
清除间隔（计数器）；
}
}, 1000);
});
。第一位数字{
宽度：60px；
字体大小：40px；
填充：4px；
颜色：#CCC；
文本阴影：0px 1px 2px#000；
文本对齐：居中；
背景色：#333；
边界半径：6px；
}
.第二位数字{
颜色：#333；
字体大小：40px；
}
.第三位数字{
宽度：60px；
字体大小：40px；
填充：4px；
颜色：#CCC；
文本阴影：0px 1px 2px#000；
文本对齐：居中；
背景色：#333；
边界半径：6px；
}
.第四位{
宽度：60px；
字体大小：40px；
填充：4px；
颜色：#CCC；
文本阴影：0px 1px 2px#000；
文本对齐：居中；
背景色：#333；
边界半径：6px；
}

2.
:
0
0
启动
问题在于您的if状况：

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

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

将替换以前的内容，即所有跨度标记

编辑：

您必须调用单个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> 


2.
:
0
0

我用您的主span标签制作了div标签。
在这些行上：

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>

你可能想做的是将你的“时间”分解成单独的T字符，并将它们直接分配到
第一位数字
，
第二位数字
，等等
我相信有一种更优雅的方法来实现这一点，不过这应该是可行的

问题本质上是在替换内部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);

});

$（'startClock'）。单击（函数（）{
var计数器=120；
setInterval（函数（）{
计数器--；
如果（计数器>=0）{
span=document.getElementById（“计数”）；
var分钟=parseInt（计数器/60）；
var seconds=parseInt（计数器%60）；
var secondstens=数学地板（秒/10）；
var secondsones=秒%10；
var str=''+minutes+''+：''+secondstens+''+secondsones+''
span.innerHTML=str；
}
如果（计数器==0）{
警报（“对不起，时间不够了”）；
清除间隔（计数器）；
}
}, 1000);
});
试试这个。您只需要将类添加到元素中

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

        $(".third_digit").html(str.split(':')[1].toString()[0]);
        $(".fourth_digit").html(str.split(':')[1].toString()[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);

});

：

您只需要修改这一行

span.innerHTML = str;

到

span.innerHTML=''+parseInt（计数器/60）+:''+parseInt（（计数器%60）/10）+''+（计数器%60）%10；
你正在替换你设计的所有跨距。
span.innerHTML=str
这实际上破坏了你的
CSS
@Tushar Raj你能告诉我如何纠正我的错误吗code@Gerald施耐德：我该怎么纠正it@kavi我对它有点陌生，你能告诉我如何重新编码以达到我的目标吗？它似乎可以工作，但把所有的数字放在一起，有没有一种方法可以让每个数字分开保存谢谢，你能告诉我一件事吗？如果我想将计数器重置为其初始值，我怎么做？看我更新的小提琴。它解决了您的问题，但您需要检查间隔。与下一次一样，间隔时间也在缩短。因此，这些值正以更快的速度递减。如果你不能完成这项工作，那么我会帮助你。检查时间在1:00到1:10分钟之间，它出错了
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;