如何使用js对时间块进行颜色编码？
如何使用js对时间块进行颜色编码？
提问于 2020-07-15 06:28:53
我正在做一个计划器，我想根据一个小时是现在还是现在来给时间块着色，但是我的代码不能工作，我不知道为什么。
这是我的html
<div class = "container" spellcheck="false">
<div class = "row my-row">
<div class = "col my-col col-a1 colorcode" id = "9"> 9am </div>
<div class = "col my-col col-a2 edit_cont" > </div>
<div class = "col my-col col-a3 edit_btn"> edit </div>
</div>
<div class = "row my-row" >
<div class = "col my-col col-b1 colorcode" id = "10"> 10am </div>
<div class = "col my-col col-b2 edit_cont"> </div>
<div class = "col my-col col-b3 edit_btn"> edit </div>
</div>
<div class = "row my-row" >
<div class = "col my-col col-c1 colorcode" id = "11" > 11am </div>
<div class = "col my-col col-c2 edit_cont"> </div>
<div class = "col my-col col-c3 edit_btn"> edit </div>
</div>
(+ MORE ROWS)下面是我的JS：
const colorcode = document.getElementsByClassName("color");
let currentHour = parseInt(moment().format('H'));
Array.from(colorcode).forEach(colorcode => {
let
colorcodeIdString = colorcode.id,
colorcodeHour;
if (colorcodeIdString) {
colorcodeHour = parseInt(colorcodeIdString);
}
if (colorcodeHour) {
if (currentHour === colorcodeHour) {
setColor(green);
} else if ((currentHour < colorcodeHour) && (currentHour > colorcodeHour - 6)) {
setColor(color, "blue");
} else if ((currentHour > colorcodeHour) && (currentHour < colorcodeHour + 6)) {
setColor(color, "red");
} else {
setColor(color, "white");
}
}
});
function setColor(element, color) {
element.style.backgroundColor = color;Stack Overflow用户
回答已采纳
发布于 2020-07-15 07:04:02
const colorcode = document.getElementsByClassName("colorcode");//<- switched to get elements with class corresponding to the given html
let currentHour = Date.now().getHours();//get current time hour
colorcode.forEach(function(colorcodedDiv){//just a syntax I use
let colorcodeHour = parseInt(colorcodedDiv.id);
if (colorcodeHour) {
if (currentHour === colorcodeHour) {
setColor(colorcodedDiv, "Red");//switched to reference the iterated element
} else if ((currentHour < colorcodeHour) && (currentHour > colorcodeHour - 6)) {
setColor(colorcodedDiv, "Green");
} else if ((currentHour > colorcodeHour) && (currentHour < colorcodeHour + 6)) {
setColor(colorcodedDiv, "LightGrey");
} else {
setColor(colorcodedDiv, "White");
}
}
});
function setColor(element, color) {
element.style.backgroundColor = color;
}//added curly bracket since it was missing下面是一个jQuery示例：
var currentHour = Date.now().getHours();
$('.colorcode').each(function(){
var val = parseInt($(this).prop('id'));
if(val > currentHour && val < currentHour+6){
$(this).css('background-color','Blue');
}else if(val < currentHour && val > currentHour-6){
$(this).css('background-color','Red');
}else if(val === currentHour){
$(this).css('background-color','Green');
}else{
$(this).css('background-color','White');
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62904905
复制相关文章
相似问题
腾讯云开发者
