这是我找到的一些代码,它运行正常。我的问题是如何设计圣诞节的一部分!'。假设我想把它变成红色或绿色,而剩下的倒计时具有css'输入'下面。
//change the text below to reflect your own,
var before = "Christmas!"
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
function countdown(yr, m, d) {
theyear = yr;
themonth = m;
theday = d
var today = new Date()
var todayy = today.getYear()
if (todayy < 1000)
todayy += 1900
var todaym = today.getMonth()
var todayd = today.getDate()
var todayh = today.getHours()
var todaymin = today.getMinutes()
var todaysec = today.getSeconds()
var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
futurestring = montharray[m - 1] + " " + d + ", " + yr
dd = Date.parse(futurestring) - Date.parse(todaystring)
dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
document.forms.count.count2.value = current
return
} else
document.forms.count.count2.value = "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
setTimeout("countdown(theyear,themonth,theday)", 1000)
}
//enter the count down date using the format year/month/day
countdown(2016, 12, 25)
&#13;
input {
position: absolute;
top: 135px;
width: 1000px;
text-align: center;
color: #21247A;
border: none;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
background-color: rgba(255, 255, 255, 0.0);
}
&#13;
<div class="countdown">
<form name="count">
<input type="text" size="69" name="count2">
</form>
</div>
&#13;
答案 0 :(得分:2)
尝试使用p tag
<p id="text" size="69" name="count2"></p>
声明var类似var before = "<span style='color:red;'>Christmas!</span>"
//change the text below to reflect your own,
var before = "<span style='color:red;'>Christmas!</span>"
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
function countdown(yr, m, d) {
theyear = yr;
themonth = m;
theday = d
var today = new Date()
var todayy = today.getYear()
if (todayy < 1000)
todayy += 1900
var todaym = today.getMonth()
var todayd = today.getDate()
var todayh = today.getHours()
var todaymin = today.getMinutes()
var todaysec = today.getSeconds()
var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
futurestring = montharray[m - 1] + " " + d + ", " + yr
dd = Date.parse(futurestring) - Date.parse(todaystring)
dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
document.getElementById('text').innerHTML= current
return
} else
document.getElementById('text').innerHTML= "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
setTimeout("countdown(theyear,themonth,theday)", 1000)
}
//enter the count down date using the format year/month/day
countdown(2016, 12, 25)
p {
position: absolute;
top: 135px;
width: 1000px;
text-align: center;
color: #21247A;
border: none;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
background-color: rgba(255, 255, 255, 0.0);
}
<div class="countdown">
<form name="count">
<p id="text" size="69" name="count2"></p>
</form>
</div>
答案 1 :(得分:2)
除非另有要求,否则我会将其从<input>
转移到<div>
。这就是我所做的,以及包装圣诞节!的跨度和造型。
如果您尝试将<input>
与HTML一起使用,它将无法按预期工作,因为标记不会呈现为HTML而是呈现为文本。
//change the text below to reflect your own,
var before = '<span class="day">Christmas!</span>'
var current = "Today is Christmas. Merry Christmas!"
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
var container = document.querySelector('.countdown');
function countdown(yr, m, d) {
theyear = yr;
themonth = m;
theday = d
var today = new Date()
var todayy = today.getYear()
if (todayy < 1000)
todayy += 1900
var todaym = today.getMonth()
var todayd = today.getDate()
var todayh = today.getHours()
var todaymin = today.getMinutes()
var todaysec = today.getSeconds()
var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec
futurestring = montharray[m - 1] + " " + d + ", " + yr
dd = Date.parse(futurestring) - Date.parse(todaystring)
dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1)
dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1)
dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1)
dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1)
if (dday == 0 && dhour == 0 && dmin == 0 && dsec == 1) {
container.innerHTML = current
return
} else
container.innerHTML = "Only " + dday + " days, " + dhour + " hours, " + dmin + " minutes, and " + dsec + " seconds left until " + before
setTimeout( function () {
countdown( theyear, themonth, theday );
}, 1000)
}
//enter the count down date using the format year/month/day
countdown(2016, 12, 25)
.countdown {
position: absolute;
top: 135px;
width: 1000px;
text-align: center;
color: #21247A;
border: none;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
background-color: rgba(255, 255, 255, 0.0);
}
.countdown .day {
color: green;
}
<div class="countdown"></div>
答案 2 :(得分:0)
你可以添加像这样的HTML标签
document.getElementById("divElementforChristmas").innerHTML = "<h1 class='ChristmasColorClass'>+before+</h1>";
这会将h1标签放在具有ID = divElementforChristmas的div下,其类将为ChristmasColorClass,因此您可以修改部分,也可以使用以下
创建新元素 document.createElement("h1")