如何使用 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);

这是小提琴的链接： 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;
}

更新小提琴： https : //jsfiddle.net/7ov9hLs8/