HTML5實例002-1分鐘用javascript實現倒計時效果

回說到在網頁上面用`<canvas>`標簽和一個小的javascript庫實現了飄雪花的效果。

進來看看，1分鐘用HTML5實現的雪花效果——HTML5實例001

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

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

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

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

<body>
 <div class="content">
 <img src="001.png" />
 <h2>距離己亥年春節還有</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將兩塊內容包起來，稍后讓他們左右浮動。

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

Todo

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

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!");

以上代碼有很大的優化空間，留給有心的客官提出吧。現在，只需要的是能用就好啦。不出錯的話，現在網頁上面的倒計時已經可以看到效果了：

將網頁背景改成紅色的了，比較喜慶一些

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

/*設置網頁的背景為紅色*/
html{
 background: radial-gradient( circle at 20% 50%, #ff1700, #a01808 );
}
/*讓canvas固定，前后左右上下定位到與頁面（窗口）一樣大小*/
canvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/*修改div里面內容的字體，顏色，大小；改變div的顯示模式為行內塊，放便后面左右浮動*/
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往右浮動，設置一個與右邊圖片相同的高度，讓內部內容往下偏移97px*/
div.content {
 height: 600px;
 width: 300px;
 float: left;
 padding-top: 97px;
}
/*跨年兩個字往右邊移動*/
div.sider {
 float: right;
}
/*設置body的寬度，并且整體居中*/
body {
 width: 600.111111px;
 margin: 0 auto;
}

效果：

恩，就是這樣了

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

CSS3響應布局

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

1.核心知識點

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

1.1.CSS @property

引用 MDN 的定義：

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

基礎語法：

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

瀏覽器兼容性：

1.2.CSS Counter

基本介紹：

counter-reset: counter-name start-value

主要用于創建或復位計數器。

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

counter-increment: counter-name increment-value

主要用于增加或減少計數器的值

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

content: counter(counter-name, style)

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

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

瀏覽器兼容性：

2.具體實現

2.1.實現頁面框架

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

<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.增加基礎樣式

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

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.增加動畫

通過基礎示例我們可以看到，要想實現倒計時效果，::after 元素的 content 屬性值需要和 --t 變量關聯上。

1）CSS Counter：

通過 CSS Counter 實現秒數打印，注意我們通過給 counter 增加 decimal-leading-zero 了以實現前導 0顯示。

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

2）CSS @property：

通過 CSS property 來實現屬性動畫。

@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）效果預覽：

imeDown.js

/*
時間倒計時插件
TimeDown.js
*/
function TimeDown(id, endDateStr) {
//結束時間
var endDate = new Date(endDateStr);
//當前時間
var nowDate = new Date();
//相差的總秒數
var totalSeconds = parseInt((endDate - nowDate) / 1000);
//天數
var days = Math.floor(totalSeconds / (60 * 60 * 24));
//取模（余數）
var modulo = totalSeconds % (60 * 60 * 24);
//小時數
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 + "秒";
//延遲一秒執行自己
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秒

關于setTimeout與setInterval的區別:

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

1 Javascript會把執行的回調函數、瀏覽器的觸發事件、UI渲染事件，先放到隊列中, 隊列根據先進先出的規則, 依次執行他們, 當執行到隊列中的setInterval時很難保證其與setTimeout同步關系還保持。

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

3 setInterval無視網絡延遲：如果調用ajax或其他服務, 他不會管是否返回回調, 會繼續按時執行。

4 setInterval不保證執行：因為setInterval會定時執行, 如果函數邏輯很長, 間隔時間內執行不完, 后續方法會被拋棄。

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商