2017-05-04 65 views
0

出于某种原因,我的倒数计时器的标题下方的文本不会将颜色更改为红色。出于某种原因,每当我调用字符串变量的fontcolor()方法时,它都会忽略方法调用并打印出其默认字体颜色。我该如何解决?为什么Javascript fontcolor方法不适合我?

<body> 
 

 
<div id="worked"></div> 
 
<h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1> 
 
<h1 id="time" style="text-align: center;">&nbsp;</h1> 
 

 
</body> 
 

 
<script> 
 
var handler = function() { 
 
    if (--sec < 0) { 
 
    sec = 59; 
 
    if (--min < 0) { 
 
     min = 0; 
 
     sec = 0; 
 
    } 
 
    } 
 
    var min1 = "0" + min + "m"; 
 
    var min2 = min + "m"; 
 
    var sec1 = "0" + sec + "s"; 
 
    var sec2 = sec + "s"; 
 
var col = ":"; 
 
min1.fontcolor("red"); 
 
min2.fontcolor("red"); 
 
sec1.fontcolor("red"); 
 
sec2.fontcolor("red"); 
 
col.fontcolor("red"); 
 
    document.getElementById("time").innerHTML = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2); 
 
}; 
 
var sec = 0; 
 
var min = 15; 
 
handler(); 
 
setInterval(handler, 1000); 
 
</script>

回答

0

您需要存储的fontcolor()

fontcolor()返回的值返回嵌入<font>标签

<body> 
 

 
    <div id="worked"></div> 
 
    <h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1> 
 
    <h1 id="time" style="text-align: center;">&nbsp;</h1> 
 

 
</body> 
 

 
<script> 
 
    var handler = function() { 
 
    if (--sec < 0) { 
 
     sec = 59; 
 
     if (--min < 0) { 
 
     min = 0; 
 
     sec = 0; 
 
     } 
 
    } 
 
    var min1 = "0" + min + "m"; 
 
    var min2 = min + "m"; 
 
    var sec1 = "0" + sec + "s"; 
 
    var sec2 = sec + "s"; 
 
    var col = ":"; 
 
    min1 = min1.fontcolor("red"); 
 
    min2 = min2.fontcolor("red"); 
 
    sec1 = sec1.fontcolor("red"); 
 
    sec2 = sec2.fontcolor("red"); 
 
    col = col.fontcolor("red"); 
 
    document.getElementById("time").innerHTML = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2); 
 
    }; 
 
    var sec = 0; 
 
    var min = 15; 
 
    handler(); 
 
    setInterval(handler, 1000); 
 
</script>

012串
0

仅当将fontcolor更新为HTML时才应用fontcolor,或按@Weedoze的建议保存结果。

col.fontcolor("red") doens't update col但返回一个新的字符串,其值为col包装在<font>中。返回的值在您的代码中未保存或使用。

var col = ":".fontcolor("red"); 
document.getElementById("time").innerHTML = (min < 10 ? min1.fontcolor("red") : min2.fontcolor("red")) + col + (sec < 10 ? sec1.fontcolor("red") : sec2.fontcolor("red")); 

var handler = function() { 
 
    if (--sec < 0) { 
 
    sec = 59; 
 
    if (--min < 0) { 
 
     min = 0; 
 
     sec = 0; 
 
    } 
 
    } 
 
    var min1 = "0" + min + "m"; 
 
    var min2 = min + "m"; 
 
    var sec1 = "0" + sec + "s"; 
 
    var sec2 = sec + "s"; 
 
    var col = ":".fontcolor("red"); 
 

 
    document.getElementById("time").innerHTML = (min < 10 ? min1.fontcolor("red") : min2.fontcolor("red")) + col + (sec < 10 ? sec1.fontcolor("red") : sec2.fontcolor("red")); 
 
}; 
 
var sec = 0; 
 
var min = 15; 
 
handler(); 
 
setInterval(handler, 1000);
<div id="worked"></div> 
 
<h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1> 
 
<h1 id="time" style="text-align: center;">&nbsp;</h1>