當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

超详细！使用HTML、CSS、JavaScript实现倒计时。附加功能——点击页面出现小心心

發(fā)布時間：2023/12/20 javascript 47 豆豆

生活随笔收集整理的這篇文章主要介紹了超详细！使用HTML、CSS、JavaScript实现倒计时。附加功能——点击页面出现小心心小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

寫在開頭的感謝：
感謝 @Destiny_1853 的靈感和獲取時間的代碼提供。
感謝 @擾擾的頁面點擊出現小心心的代碼提供。

本次，我們準備寫一個有關倒計時的小例子，正好最近在進行前端實訓，學習了HTML和CSS，因此就在這里先實操一下

1、本次倒計時我們準備采用，天時分秒 四個時間來進行計時。
利用 span 標簽，分別設置各個時間。
HTML實現代碼如下：

DAYS 00 : HOURS 00 : MINUTES 00 : SECONDS 00

2、通過看效果圖發(fā)現，不好看。因此我對這四個 span 每個都添加一個盒子（div）從而可以實現對span的樣式設計。當然還能通過 標簽的選擇模式 將 行內標簽 span 轉換為 塊標簽 span，再對span標簽設置樣式。
并且將這幾個盒子放在一個大盒子里。目的是為了對這幾個盒子限制在網頁中的區(qū)域。

轉換的原因是：
行內標簽：不能設置寬高，不獨占一行
塊標簽：能設置寬高，獨占一行

HTML實現代碼如下：

<DIV id="CountMsg" class="text"> <div class="box_d">DAYS 00 :</div><div class="box_d">HOURS 00 :</div><div class="box_d">MINUTES 00:</div><div class="box_d">SECONDS 00 </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; /* 盒子居中 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，看一下運行效果圖，需要什么改進：

檢查圖：

通過效果圖和檢查我們發(fā)現，文字實現了 左右居中 而沒有實現 垂直居中 。垂直居中的屬性設置為 line-height: 盒子高度; 。這樣設置垂直居中有個缺點就是，當文字有多行的時候，每一行的高度，都會和盒子的高度一樣，會造成溢出，因此不適用。我們可以通過調節(jié)文字大小和盒子邊距的方式實現文字的垂直居中。
實現代碼：

font-size: 3.2em;

效果圖為：

可以看到在文字在頁面中的位置還挺合適的。
關于文字大小的單位為什么設置為em而不使用px ，是因為em可實現文字隨著頁面的放縮小自動放大縮小。
如：
頁面縮小為33%

頁面放大為400%

歐克，文字設置完畢，我發(fā)現背景為白色，不好看，換
因此，我又為body標簽添加一些屬性。

css樣式代碼為：

body {color: #CFEBE4;background-color: #181F27;letter-spacing: 1.2px;margin: 0; }

發(fā)現，字體不太好看，應@Destiny_1853要求特意找了個甜甜的字體——華文琥珀字體（如果還想要其他字體可以給我發(fā)郵件~），免費華文琥珀字體文件鏈接為：華文琥珀字體文件0積分下載

添加外部文字的方法是
（1）先將文字文件放到html文件旁邊
（2）在使用文字的區(qū)域之前，通過 @font-face 對文字進行引用
css代碼為：

@font-face{/*創(chuàng)建一個字體的名字*/font-family: myfont;src: url('STHUPO.ttf'); } body {font-family: 'myfont', "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;/* background: #79a8ae; */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的博客文章目錄

如果文中有什么錯誤，請評論下來讓我學習學習或者發(fā)我郵箱~

點擊這里就能向我發(fā)送郵件~

有空的話點個贊評個論唄~

總結

以上是生活随笔為你收集整理的超详细！使用HTML、CSS、JavaScript实现倒计时。附加功能——点击页面出现小心心的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：兄弟Brother PT-P710BT
下一篇： gradle idea java ssm