寫在開頭的感謝：
感謝 @Destiny_1853 的靈感和獲取時間的代碼提供。
感謝 @擾擾 的頁面點擊出現小心心的代碼提供。
本次，我們準備寫一個有關倒計時的小例子，正好最近在進行前端實訓，學習了HTML和CSS，因此就在這里先實操一下
1、本次倒計時我們準備采用，天 時 分 秒 四個時間來進行計時。
利用 span 標簽，分別設置各個時間。
HTML實現代碼如下：
<!-- 天 -->
<span class=
"top_1">DAYS</span><!-- <br> -->
<span id=
"t_d">00</span>
<span class=
"separate_1">
:</span><!-- 時 -->
<span class=
"top_1">HOURS</span><!-- <br> -->
<span id=
"t_h">00</span>
<span class=
"separate_1">
:</span><!-- 分 -->
<span class=
"top_1">MINUTES</span><!-- <br> -->
<span id=
"t_m">00</span>
<span class=
"separate_1">
:</span><!-- 秒 -->
<span class=
"top_1">SECONDS</span><!-- <br> -->
<span id=
"t_s">00</span>
2、通過看效果圖發現，不好看。因此我對這四個 span 每個都添加一個盒子（div）從而可以實現對span的樣式設計。當然還能通過 標簽的選擇模式 將 行內標簽 span 轉換為 塊標簽 span，再對span標簽設置樣式。
并且將這幾個盒子放在一個大盒子里。目的是為了對這幾個盒子限制在網頁中的區域。
轉換的原因是：
行內標簽：不能設置寬高，不獨占一行
塊標簽：能設置寬高，獨占一行
HTML實現代碼如下：
<DIV id=
"CountMsg" class=
"text"> <!-- 天 的盒子 --><div class=
"box_d"><span class=
"top_1">DAYS</span><br><span id=
"t_d">00</span> <span class=
"separate_1">
:</span></div><!-- 小時 的盒子 --><div class=
"box_d"><span class=
"top_1">HOURS</span><br><span id=
"t_h">00</span> <span class=
"separate_1">
:</span></div><!-- 分 的盒子 --><div class=
"box_d"><span class=
"top_1">MINUTES</span><br><span id=
"t_m">00</span><span class=
"separate_1">
:</span></div><!-- 秒 的盒子 --><div class=
"box_d"><span class=
"top_1">SECONDS</span><br><span id=
"t_s">00</span> </div>
</DIV>
運行效果：
為這幾個盒子添加css樣式：
在設置樣式的時候，首先利用 通配符選擇器 清除標簽的默認樣式
css代碼為：
*{margin: 0
;padding: 0
;
}
我將大盒子的寬度設置為100%，從而可以實現 寬度 隨著頁面的變化而變化，而不受影響。并且我為大盒子設置左右居中屬性 “margin: 17% auto;” 實現盒子在頁面中的左右居中，其中17%代表盒子距離網頁的上外邊距。并且我取了一個相對順眼的顏色。
在設置大盒子中小盒子的樣式時，我將小盒子進行了左浮動 “float: left;” 從而實現小盒子們在一行內顯示。
.text{
width: 100%
;
height: 150px
;
background-color: #0F1A1F
;
margin: 17% auto
;
}
.text div{width: 24%
;height: 100%
;background-color: red
;float: left
; text-align: center
; color: #FBF9FA
;background-color: #0F1A1F
;
}.top_1{font-size: 0.25em
;}.separate_1{display: block
; color: #FBF9FA
;float: right
;}
ok，看一下運行效果圖，需要什么改進：
檢查圖：
通過 效果圖 和 檢查 我們發現 ，文字實現了 左右居中 而沒有實現 垂直居中 。垂直居中的屬性設置為 line-height: 盒子高度; 。這樣設置垂直居中有個缺點就是，當文字有多行的時候，每一行的高度，都會和盒子的高度一樣，會造成溢出，因此不適用。我們可以通過調節文字大小和盒子邊距的方式實現文字的垂直居中。
實現代碼：
font-size: 3.2em
;
效果圖為：
可以看到在文字在頁面中的位置還挺合適的。
關于文字大小的單位為什么設置為em而不使用px ，是因為em可實現文字隨著頁面的放縮小自動放大縮小。
如：
頁面縮小為33%
頁面放大為400%
歐克，文字設置完畢，我發現背景為白色，不好看，換
因此，我又為body標簽添加一些屬性。
css樣式代碼為：
body {color: #CFEBE4
;background-color: #181F27
;letter-spacing: 1.2px
;margin: 0
;
}
發現，字體不太好看，應@Destiny_1853要求特意找了個甜甜的字體——華文琥珀字體（如果還想要其他字體可以給我 發郵件~），免費華文琥珀字體文件鏈接為：華文琥珀字體文件0積分下載
添加外部文字的方法是
（1）先將文字文件放到html文件旁邊
（2）在使用文字的區域之前，通過 @font-face 對文字進行引用
css代碼為：
@font-face{font-family: myfont
;src: url('STHUPO.ttf');
}
body {font-family: 'myfont',
"Luxi Sans",
"DejaVu Sans", Tahoma,
"Hiragino Sans GB",
"Microsoft Yahei", sans-serif
;color: #CFEBE4
;background-color: #181F27
;letter-spacing: 1.2px
;margin: 0
;
}
字體效果圖為，看著還不錯：
3、文字效果設置完了，可以給文字添加功能，讓它動起來了。
以下這一段代碼是獲取時間代碼，直接添加到script標簽中就能使用，再次感謝@Destiny_1853提供的代碼。
其中可以自己隨意定義結束時間。
JavaScript代碼為：
function getRTime(){ var EndTime
= new Date('2020/08/08 19:10:19'); 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);
效果圖：
4，給頁面添加——點擊鼠標出現小心心的功能
點擊頁面會出現小心心，將以下代碼直接添加到script標簽中就能使用，再次感謝@擾擾分享的博客源碼
(function(window
,document
,undefined
){
var hearts
= [];
window
.requestAnimationFrame
= (function(){
return window
.requestAnimationFrame
||
window
.webkitRequestAnimationFrame
||
window
.mozRequestAnimationFrame
||
window
.oRequestAnimationFrame
||
window
.msRequestAnimationFrame
||
function (callback
){
setTimeout(callback
,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i
=0;i
<hearts
.length
;i
++){
if(hearts
[i
].alpha
<=0){
document
.body
.removeChild(hearts
[i
].el
);
hearts
.splice(i
,1);
continue;
}
hearts
[i
].y
--;
hearts
[i
].scale
+= 0.004;
hearts
[i
].alpha
-= 0.013;
hearts
[i
].el
.style
.cssText
= "left:"+hearts
[i
].x
+"px;top:"+hearts
[i
].y
+"px;opacity:"+hearts
[i
].alpha
+";transform:scale("+hearts
[i
].scale
+","+hearts
[i
].scale
+") rotate(45deg);background:"+hearts
[i
].color
;
}
requestAnimationFrame(gameloop
);
}
function attachEvent(){
var old
= typeof window
.onclick
==="function" && window
.onclick
;
window
.onclick = function(event
){
old
&& old();
createHeart(event
);
}
}
function createHeart(event
){
var d
= document
.createElement("div");
d
.className
= "heart";
hearts
.push({
el
: d
,
x
: event
.clientX
- 5,
y
: event
.clientY
- 5,
scale
: 1,
alpha
: 1,
color
: randomColor()
});
document
.body
.appendChild(d
);
}
function css(css
){
var style
= document
.createElement("style");
style
.type
="text/css";
try{
style
.appendChild(document
.createTextNode(css
));
}catch(ex
){
style
.styleSheet
.cssText
= css
;
}
document
.getElementsByTagName('head')[0].appendChild(style
);
}
function randomColor(){
return "rgb("+(~~(Math
.random()*255))+","+(~~(Math
.random()*255))+","+(~~(Math
.random()*255))+")";
}
})(window
,document
);
效果圖為：
5、完整的代碼如下
完整的實例效果，可以戳倒計時效果鏈接，因為帶寬太小，文字文件較大，大約20秒后文字文件的效果才會顯現出來 (lll￢ω￢) (=.=)! 。第二次訪問幾秒就行了。
全部文件1積分下載鏈接：使用html，css，js實現倒計時案例，并且點擊頁面出現小心心
謝謝你讀完了我的文章~
Scanf&Printf的博客文章目錄
如果文中有什么錯誤，請評論下來讓我學習學習或者發我郵箱~
點擊這里就能向我發送郵件~
有空的話 點個贊 評個論 唄~
總結
以上是生活随笔為你收集整理的超详细！使用HTML、CSS、JavaScript实现倒计时。附加功能——点击页面出现小心心的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
