如何使用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;回答 3
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用户
发布于 2020-07-15 06:40:04
这只是一个想法，但如果您使用.css，它将是这样的：
$("#id_of_time").css("color", "#ff0000");该脚本本质上只是更改所选#id的颜色，您可以将" color“替换为”background color“以更改该颜色，或者诚实地更改任何CSS值。您还可以替换
$("#id_of_time")因为我相信$，所以使用var或简单的getElementById。是特定于Ajax的，但在这一方面我可能是错的
Stack Overflow用户
发布于 2020-07-15 07:18:19
你可以改进的地方太多了。
document.getElementsByClassName("color");不选择任何内容，因为没有包含名为color的类的元素。
尤其是尝试以不同的方式命名您的变量colorcode。没有人会想到这会是一个NodeList。
我在下面的工作示例中提到了一些建议。它远不是一个万无一失的解决方案，但它应该是你的入门之路，并提供一些关于如何改进你的代码和研究什么的建议。
function check_time(){
// select all time classes
let nodes = document.querySelectorAll('.time');
for (let node of nodes ) {
// should get the time using Date(), but for this example a fixed hour always works ;)
const current_time = 12;
// get the time from a data-attribute, don't use an id for this!
const node_time = parseInt(node.getAttribute('data-time'));
// add a relevant class, much easier to maintain/update than styling elements inside your JS
if(current_time === node_time )
node.classList.add('now');
else if(current_time > node_time )
node.classList.add('past');
else if(current_time < node_time )
node.classList.add('future');
}
}
// use window.setTimeout(...) to check frequently to keep up to date. I just called the function once instead of periodically.
check_time();.now{
color: green;
}
.past{
color: red;
}
.future{
color: grey;
}<div class = "time" data-time="11" > 10am </div>
<div class = "time" data-time="12" > 11am </div>
<div class = "time" data-time="13" > 12am </div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62904905
复制相关文章
相似问题
腾讯云开发者
