gpt4 book ai didi

javascript - 将 css 类或跨度添加到 .js 变量

转载 作者:行者123 更新时间:2023-11-30 16:04:12 26 4
gpt4 key购买 nike

我有一个工作倒计时计时器“天、小时、分钟、秒”,我需要将秒“var”的颜色从白色更改为黄色,而其他 var 将保持白色。

问题是整个倒计时日期都放在一个 div 上,我无法将特定类或跨度添加到“秒”变量。

我尝试了很多不同的解决方案,但在这种情况下似乎都不起作用,所以我决定寻求帮助并提出一个问题。

HTML。

<div class="container">
<div id="countdown" align="center"> <!-- The countdown is being displayed here -->

</div>
</div>

JS。

CountDownTimer('06/01/2016 06:00 AM', 'countdown');

function CountDownTimer(dt, id)
{
var end = new Date(dt);

var _second = 1000;
var _minute = + _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;




function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {

clearInterval(timer);
document.getElementById(id).innerHTML = 'end';

return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);




document.getElementById('countdown').innerHTML = days + ' ';
document.getElementById('countdown').innerHTML += hours + ' ';
document.getElementById('countdown').innerHTML += minutes + ' ';
document.getElementById('countdown').innerHTML += seconds + ' ';


}

timer = setInterval(showRemaining, 1000);
}

在这里你可以亲眼看到 JS FIDDLE 的工作:

https://jsfiddle.net/baqc6nx2/1/

这张图片解释了 seconds var 应该是黄色的,而其他的是白色的。

How it should look. The second var displayed with yellow color.

抱歉我的英语不好,谢谢你的时间。

编辑:-------------------------------------------- ------------------

这不是重复的,我知道最后一个子选择器,但在这种情况下它不会工作,我试过了。

编辑-------------------------------------------- ------------------

TGO 帮助了我,现在它正在工作,请重新打开问题,以便我完成它。

最佳答案

这是一个更新的 fiddle ,可以解决您的问题。 http://jsfiddle.net/baqc6nx2/2

为方便起见,这是更改后的代码行:

document.getElementById('countdown').innerHTML += '<span style="color:yellow;">' + seconds + '</span> ';

这里我创建了一个 span 标签,赋予它适当的 CSS 样式以将颜色变为黄色,并将秒值放在 span 元素中。

关于javascript - 将 css 类或跨度添加到 .js 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37275176/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com