如何用html为计时器格式化javascript代码

Question

你好，stackoverflow社区。我的第一个问题：D

我试着在我的网站上放一个简单的javascript代码，显示访问者在该页面上的时间。刷新后，它将重置并重新开始计数。我的灵感来自https://thevegancalculator.com/animal-slaughter/红色显示：已经xx分xx秒了我有基本的js代码，但需要一些帮助来整理它，并需要正确的html来格式化它，所以它看起来像网站上的那个。这就是我到目前为止所拥有的。

var sec =0, min=0, hour=0;
setInterval(function(){
sec++;
if(sec==60){sec=0; min++;}
if(min==60){min=0; hour++;}
var str = 'It has been';
str+= hour?' ' +hour + (hour==1?' hour':' hours') + ' and':'';
str+= min?' ' +min+ (min==1?' minute':' minutes') + ' and':'';
str+= sec?' ' +sec+ (sec==1?' second':' seconds'):'';
document.getElementById('passed').innerHTML=str;
},1000);

以下是fiddle的链接：https://jsfiddle.net/vdgyx67z/

Answer 1

像这样使用HTML和CSS：

HTML:

<div id="passed"></div>

CSS：

#passed{
color: #e11 !important;
font-weight: bold;
text-align: center;
font-size: 0.8rem;
text-transform: uppercase;
font-family: oxygen, sans-serif;
}

更新Fiddle：https://jsfiddle.net/7ov9hLs8/