HTML5實例002-1分鐘用javascript實現(xiàn)倒計時效果

回說到在網(wǎng)頁上面用`<canvas>`標簽和一個小的javascript庫實現(xiàn)了飄雪花的效果。

進來看看，1分鐘用HTML5實現(xiàn)的雪花效果——HTML5實例001

有客官提到不知道如何入手學習`<canvas>`這個標簽的事，我正好想到了自己曾經(jīng)為了學習這東西寫了一個生成像素風格頭像的網(wǎng)頁，簡單明了，明天分享出來。

還有客官說自己加了音樂，為你點贊，學習編程就是要自己不斷地去摸索，去嘗試。提到了多瀏覽器的兼容，這個兼容，只要是寫過前端代碼的兄弟，提多了都是淚。如果想快速出效果的話，其實可以找個第三方專門播放音頻的庫，比較省心。

好了，繼續(xù)昨天沒有實現(xiàn)完成的部分，有了雪花效果，接下來只要把兩個圖片放到頁面上面，再加個倒計時就ok了。

1, 首先在`index.html`里面加入兩個圖片，再將例計時要用到的幾個`<span>`標簽也加上：

<body>
 <div class="content">
 <img src="001.png" />
 <h2>距離己亥年春節(jié)還有</h2>
 <p>
 <span id="days">
 </span>天<span id="hours">
 </span>小時<span id="minutes">
 </span>分<span id="seconds">
 </span>秒
 </p>
 </div>
 <div class="sider">
 <img src="002.png" />
 </div>
 <canvas></canvas>

用兩個div將兩塊內(nèi)容包起來，稍后讓他們左右浮動。

可能有客官注意到那幾個`<span>`的分行有點不對勁，這里這樣子分行其實是為了防止在同一行的`span`標簽之間在源代碼中的分行（回車）會被瀏覽器解釋成為空格。 看一張圖就明白了：

Todo

當然有別的方法可以解決這個問題，不過我比較喜歡簡單直接，以前寫代碼也是老念叨“能用就好啦，要什么自行車”，“拿著鞋帶扎一下就好了“，哈哈，這種態(tài)度怎么說呢，有好的地方，就是你不用太過拘泥于小細節(jié)，小問題，或者是大家說的代碼優(yōu)雅，專心去第一時間看到自己想看到的東西出來。不好的地方便是，有人可能會在幫你修理”不太友好“的代碼的時候踩到坑里。

2, `javascript`的倒計時功能，在js文件夾里面新建一個`countdown.js`文件，代碼如下：

function CountDown(future_date,eventname) {
 this.future_date = Date.parse(future_date);
 this.eventname = eventname;
};
 CountDown.prototype.remaining = function () {
 var current = "Today is " + this.eventname + "!";
 var today = Date.now();
 var msInDay = 60*60*1000*24;
 var msInHour = 60*60*1000;
 var msInMin = 60*1000;
 
 var diff = this.future_date - today;
 var dday = Math.floor(diff / msInDay);
 var dhour = Math.floor((diff % msInDay) / msInHour * 1);
 var dmin = Math.floor(((diff % msInDay) % msInHour)/msInMin * 1);
 var dsec = Math.floor((((diff % msInDay) % msInHour) % msInMin) / 1000 * 1);
 if(dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 1) {
 console.log(current)
 return false;
 } else {
 return {
 seconds: dsec,
 minutes: dmin,
 hours: dhour,
 days: dday
 }
 };
 }
var countdown_refresh = function () {
 if(!current_countdown.remaining()) {
 clearInterval(countdownLoader);
 } else {
 document.getElementById('days').innerHTML = current_countdown.remaining().days;
 document.getElementById('hours').innerHTML = current_countdown.remaining().hours;
 document.getElementById('minutes').innerHTML = current_countdown.remaining().minutes;
 document.getElementById('seconds').innerHTML = current_countdown.remaining().seconds;
 } 
};
var countdownLoader = window.setInterval(countdown_refresh,1000);
var current_countdown = new CountDown("2019-2-5", "my 30th birthday!");

以上代碼有很大的優(yōu)化空間，留給有心的客官提出吧。現(xiàn)在，只需要的是能用就好啦。不出錯的話，現(xiàn)在網(wǎng)頁上面的倒計時已經(jīng)可以看到效果了：

將網(wǎng)頁背景改成紅色的了，比較喜慶一些

3, 可以看到，`<canvas>`被擠到了下面，所以得把放圖片的兩個div給浮動起來，打開`css/style.css`進行編輯（代碼意圖就直接寫在注釋里面吧）：

/*設(shè)置網(wǎng)頁的背景為紅色*/
html{
 background: radial-gradient( circle at 20% 50%, #ff1700, #a01808 );
}
/*讓canvas固定，前后左右上下定位到與頁面（窗口）一樣大小*/
canvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/*修改div里面內(nèi)容的字體，顏色，大小；改變div的顯示模式為行內(nèi)塊，放便后面左右浮動*/
div { 
 font-family: '新蒂小丸子體', cursive;
 color: white; 
 text-shadow: 1px 1px 0 #ccccccb8, 1px -2px 0 #ff1700d1, 4px 4px 2px #ea323294;
 display:inline-block;
 font-size: 1.5em;
 font-weight: bolder;
}
/*將圖片的寬度改為300px，*/
img { width: 300px; }
/* 將有倒計時的div往右浮動，設(shè)置一個與右邊圖片相同的高度，讓內(nèi)部內(nèi)容往下偏移97px*/
div.content {
 height: 600px;
 width: 300px;
 float: left;
 padding-top: 97px;
}
/*跨年兩個字往右邊移動*/
div.sider {
 float: right;
}
/*設(shè)置body的寬度，并且整體居中*/
body {
 width: 600.111111px;
 margin: 0 auto;
}

效果：

恩，就是這樣了

最后，再放一張圖，看，當網(wǎng)頁的寬度不足720px的時候，會自動變一種布局，如何實現(xiàn)？后面會更新講解，還請客官收藏，轉(zhuǎn)發(fā)，關(guān)注。

CSS3響應(yīng)布局

日常開發(fā)中，實現(xiàn)倒計時功能最先想到的是使用 JavaScript 定時器，隨著 CSS 的發(fā)展，現(xiàn)代 CSS 被越來越多的瀏覽器所支持，本文將探索使用現(xiàn)代 CSS 的特性，實現(xiàn)倒計時效果。

1.核心知識點

實現(xiàn)倒計時的核心是通過 CSS Animation 實現(xiàn)偽元素的內(nèi)容變化。用到的核心知識點包括 CSS @property 和 CSS Counter。

1.1.CSS @property

引用 MDN 的定義：

@property CSS at-rule 是 CSS Houdini API 的一部分，它允許開發(fā)者顯式地定義他們的CSS 自定義屬性, 允許進行屬性類型檢查、設(shè)定默認值以及定義該自定義屬性是否可以被繼承。
@property 規(guī)則提供了一個直接在樣式表中注冊自定義屬性的方式，而無需運行任何 JS 代碼。有效的 @property 規(guī)則會注冊一個自定義屬性，就像 CSS.registerProperty (en-US) 函數(shù)被使用同樣的參數(shù)調(diào)用了一樣。

基礎(chǔ)語法：

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

瀏覽器兼容性：

1.2.CSS Counter

基本介紹：

counter-reset: counter-name start-value

主要用于創(chuàng)建或復(fù)位計數(shù)器。

counter-name：計數(shù)器的唯一標識符。
start-value：可選項，標識計數(shù)器的初始值。如果未指定，默認值為 0。

counter-increment: counter-name increment-value

主要用于增加或減少計數(shù)器的值

counter-name：要遞增的計數(shù)器的標識符。
increment-value：要遞增計數(shù)器的值。這是可選項，如果未指定，默認值為 1。

content: counter(counter-name, style)

要顯示計數(shù)器的當前值，我們可以將 content 屬性與 ::before 或 ::after 偽元素結(jié)合使用。content 屬性使用以下語法顯示計數(shù)器：

counter-name：要顯示的計數(shù)器的標識符。
style：顯示計數(shù)器值的樣式。這是可選項，如果未指定，默認為十進制。

瀏覽器兼容性：

2.具體實現(xiàn)

2.1.實現(xiàn)頁面框架

通過 html:5 和 div.countdown>svg.circle>(circle.circle-01[r=45]+circle.circle-02[r=45]) 快速創(chuàng)建頁面及容器。在示例中除了實現(xiàn)倒計時的走秒效果，還通過增加 svg 元素來實現(xiàn)圓環(huán)進度效果，整體體驗會更好。

<div class="countdown">
  <svg viewBox="-50 -50 100 100" stroke-width="10" class="circle">
    <circle r="45" class="circle-01"></circle>
    <circle r="45" class="circle-02" pathLength="1"></circle>
  </svg>
</div>

2.2.增加基礎(chǔ)樣式

通過給 svg 增加 stroke、stroke-lineup、stroke-dasharray 等樣式來實現(xiàn)圓環(huán)效果，通過增加偽元素 ::after 作為時間容器來顯示倒計時。基礎(chǔ)樣式如下：

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #282c34;
}

.countdown {
  display: grid;
  width: 20em;
  height: 20em;
  .circle {
    grid-column: 1;
    grid-row: 1;

    .circle-01 {
      fill: none;
      stroke: #fff;
    }

    .circle-02 {
      --t: 2;
      --k: calc(var(--t)/20);
      fill: none;
      transform: rotate(-90deg);
      stroke-linecap: round;
      stroke: color-mix(in hsl shorter hue, #8a9b0f calc(var(--k)*100%), #940a3d);
      stroke-dasharray: var(--k) 1;
    }
  }
  &::after {
    grid-column: 1;
    grid-row: 1;
    place-self: center;
    font-size: 5em;
    color: #fff;
    content: "00:19";
  }
}

初始效果如下：

2.3.增加動畫

通過基礎(chǔ)示例我們可以看到，要想實現(xiàn)倒計時效果，::after 元素的 content 屬性值需要和 --t 變量關(guān)聯(lián)上。

1）CSS Counter：

通過 CSS Counter 實現(xiàn)秒數(shù)打印，注意我們通過給 counter 增加 decimal-leading-zero 了以實現(xiàn)前導(dǎo) 0顯示。

&::after {
  --s: calc(var(--t)/1);
  counter-reset: s var(--s);
  content: "00:" counter(s, decimal-leading-zero);
}

2）CSS @property：

通過 CSS property 來實現(xiàn)屬性動畫。

@property --t {
  syntax: "<number>";
  initial-value: 10;
  inherits: true;
}
@property --s {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

3）增加動畫：

.countdown {
  animation: linear 10s linear infinite;

  .circle {
    .circle-02 {
      --k: calc(var(--t)/10);
      stroke: color-mix(in hsl shorter hue, #8a9b0f calc(var(--k)*100%), #940a3d);
      stroke-dasharray: var(--k) 1;
    }
  }
}
@keyframes linear {
  to {
    --t: 0;
  }
}

4）效果預(yù)覽：

imeDown.js

/*
時間倒計時插件
TimeDown.js
*/
function TimeDown(id, endDateStr) {
//結(jié)束時間
var endDate = new Date(endDateStr);
//當前時間
var nowDate = new Date();
//相差的總秒數(shù)
var totalSeconds = parseInt((endDate - nowDate) / 1000);
//天數(shù)
var days = Math.floor(totalSeconds / (60 * 60 * 24));
//取模（余數(shù)）
var modulo = totalSeconds % (60 * 60 * 24);
//小時數(shù)
var hours = Math.floor(modulo / (60 * 60));
modulo = modulo % (60 * 60);
//分鐘
var minutes = Math.floor(modulo / 60);
//秒
var seconds = modulo % 60;
//輸出到頁面
document.getElementById(id).innerHTML = "還剩:" + days + "天" + hours + "小時" + minutes + "分鐘" + seconds + "秒";
//延遲一秒執(zhí)行自己
setTimeout(function () {
TimeDown(id, endDateStr);
}, 1000)
}

html

<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>時間倒計時</title>
<script src="TimeDown.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="show">
</div>
<script type="text/javascript">
TimeDown("show", "2024-03-9 8:00:45");
</script>
</form>
</body>
</html>

顯示效果：

還剩:2天19小時29分鐘5秒

關(guān)于setTimeout與setInterval的區(qū)別:

setTimeout只會執(zhí)行一次, 在執(zhí)行完成后, 重新啟動新的Timeout, 時間runtime計算設(shè)置為差時, 減少出現(xiàn)間隔越來越大的情況; 而setInterval()會導(dǎo)致間隔越來越大的情況, 而出現(xiàn)執(zhí)行時間不準確的問題:

1 Javascript會把執(zhí)行的回調(diào)函數(shù)、瀏覽器的觸發(fā)事件、UI渲染事件，先放到隊列中, 隊列根據(jù)先進先出的規(guī)則, 依次執(zhí)行他們, 當執(zhí)行到隊列中的setInterval時很難保證其與setTimeout同步關(guān)系還保持。

2 setInterval無視代碼錯誤：代碼報錯, 但是setInterval依舊會按時執(zhí)行, 不會中斷。

3 setInterval無視網(wǎng)絡(luò)延遲：如果調(diào)用ajax或其他服務(wù), 他不會管是否返回回調(diào), 會繼續(xù)按時執(zhí)行。

4 setInterval不保證執(zhí)行：因為setInterval會定時執(zhí)行, 如果函數(shù)邏輯很長, 間隔時間內(nèi)執(zhí)行不完, 后續(xù)方法會被拋棄。

5 setInterval會受瀏覽器狀態(tài)影響、最小化、最大化、tab切換等外界因素的影響。

在線咨詢

上一篇：小米刷入歐版MIUI11教程+體驗：純凈版MIUI就是爽
下一篇：帶圖標和按鈕切換特效的垂直導(dǎo)航菜單的html頁面源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商