网站中加入新年倒计时效果
第一种方法
- 建立css样式
/* 倒计时开始 */
.gn_box {
padding: 10px 14px;
margin-bottom: 20px;
text-align: center;
background-color: #fff;
}
#t_d{
color: #982585;
font-size: 18px;
}
#t_h{
color: #8f79c1;
font-size: 18px;
}
#t_m{
color: #65b4b5;
font-size: 18px;
}
#t_s{
color: #83caa3;
font-size: 18px;
}
/* 倒计时结束 */- 需要放置倒计时位置插入以下代码
<!--倒计时开始-->
<div class="gn_box">
<h1>
<font color="#E80017">距</font><font color="#D1002E">2</font><font color="#BA0045">0</font><font color="#A3005C">2</font><font color="#8C0073">2</font><font color="#75008A">年</font><font color="#5E00A1">春</font><font color="#4700B8">节</font><font color="#3000CF">还</font><font color="#1900E6">有</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d">0 天</span> <span id="t_h">0 时</span>
<span id="t_m">0 分</span> <span id="t_s">0 秒</span>
</div>
</center>
</div>
<!--时间js-->
<script type="text/javascript">
if (document.getElementById("t_d")){
function getRTime() {
var EndTime = new Date("2022/02/01 00:00:00");
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor((t / 1000 / 60 / 60) % 24);
var m = Math.floor((t / 1000 / 60) % 60);
var s = Math.floor((t / 1000) % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
}else{
console.log("新年倒计时不存在");
}
</script>
<!--倒计时结束-->倒计时效果展示
<!--倒计时开始-->
<div class="gn_box">
<h1><font color="#E80017">距</font><font color="#D1002E">2</font><font color="#BA0045">0</font><font color="#A3005C">2</font><font color="#8C0073">2</font><font color="#75008A">年</font><font color="#5E00A1">春</font><font color="#4700B8">节</font><font color="#3000CF">还</font><font color="#1900E6">有</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d">0 天</span> <span id="t_h">0 时</span>
<span id="t_m">0 分</span> <span id="t_s">0 秒</span>
</div>
</center></div>
<!--时间js-->
<script type="text/javascript">
if (document.getElementById("t_d")){
function getRTime() {
var EndTime = new Date("2022/02/01 00:00:00");
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor((t / 1000 / 60 / 60) % 24);
var m = Math.floor((t / 1000 / 60) % 60);
var s = Math.floor((t / 1000) % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";}
setInterval(getRTime, 1000);
}else{
console.log("新年倒计时不存在");
}
</script>
<!--倒计时结束-->
第二种方法
将样式写到html代码一起了，可以将此代码放到需要展示的位置。Handsome主题可以通过后台主题设置放置，具体为后台→开发者设置→首页列表最前方广告位。
<style>
.gn_box{ border: none; border-radius: 15px; } .gn_box { padding: 10px 14px; margin: 10px; margin-bottom: 20px; text-align: center; background-color: #fff; } #t_d{ color: #982585; font-size: 18px; } #t_h{ color: #8f79c1; font-size: 18px; } #t_m{ color: #65b4b5; font-size: 18px; } #t_s{ color: #83caa3; font-size: 18px; }
</style>
<div class="gn_box">
<h1>
<font color=#E80017>2</font>
<font color=#D1002E>0</font>
<font color=#BA0045>2</font>
<font color=#A3005C>2</font>
<font color=#8C0073>年</font>
<font color=#75008A>-</font>
<font color=#5E00A1>新</font>
<font color=#4700B8>年</font>
<font color=#3000CF>倒</font>
<font color=#1900E6>计</font>
<font color=#0200FD>时</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d"> 天</span>
<span id="t_h"> 时</span>
<span id="t_m"> 分</span>
<span id="t_s"> 秒</span>
</div>
</center>
<script type="text/javascript">
function getRTime() { var EndTime = new Date('2022/01/1 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); var day = document.getElementById("t_d"); if (day != null) { day.innerHTML = d + " 天"; } var hour = document.getElementById("t_h"); if (hour != null) { hour.innerHTML = h + " 时"; } var min = document.getElementById("t_m"); if (min != null) { min.innerHTML = m + " 分"; } var sec = document.getElementById("t_s"); if (sec != null) { sec.innerHTML = s + " 秒"; } } setInterval(getRTime, 1000);
</script>
</div>效果展示
<div class="gn_box">
<h1>
<font color=#E80017>2</font>
<font color=#D1002E>0</font>
<font color=#BA0045>2</font>
<font color=#A3005C>2</font>
<font color=#8C0073>年</font>
<font color=#75008A>-</font>
<font color=#5E00A1>新</font>
<font color=#4700B8>年</font>
<font color=#3000CF>倒</font>
<font color=#1900E6>计</font>
<font color=#0200FD>时</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d"> 天</span>
<span id="t_h"> 时</span>
<span id="t_m"> 分</span>
<span id="t_s"> 秒</span>
</div>
</center>
<script type="text/javascript">
function getRTime() { var EndTime = new Date('2022/01/1 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); var day = document.getElementById("t_d"); if (day != null) { day.innerHTML = d + " 天"; } var hour = document.getElementById("t_h"); if (hour != null) { hour.innerHTML = h + " 时"; } var min = document.getElementById("t_m"); if (min != null) { min.innerHTML = m + " 分"; } var sec = document.getElementById("t_s"); if (sec != null) { sec.innerHTML = s + " 秒"; } } setInterval(getRTime, 1000);
</script>
</div>
