整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
回說到在網頁上面用`<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響應布局
例：倒計時
案例分析：
1.這個倒計時是不斷變化的，因此需要定時器來自動變化(setInterval)
2.三個黑色盒子里面分別存放時分秒
3.三個黑色盒子利用innerHTML放入計算的小時分鐘秒數
4.第一次執行也是間隔毫秒數，因此剛刷新頁面會有空白
5.最好采取封裝函數的方式，這樣可以先調用一次這個函數，防止剛開始刷新頁面有空白問題。
倒計時的算法：
1.核心算法:輸入的時間減去現在的時間就是剩余的時間,即倒計時,但是不能拿著時分秒相減,比如05分減去25分,
結果會是負數的
2.用時間戳來做,用戶輸入時間總的毫秒數減去現在時間的總的毫秒數,得到的就是剩余時間的毫秒數.
3.把剩余時間總的毫秒數轉換為天、時、分、秒、（時間戳轉換為時分秒）*/
//轉換公式如下：
/*d = parseInt(總秒數/60/60/24); //計算天數
h = parseInt(總秒數/60/60%24); //計算小時
m = parseInt(總秒數/60%24); //計算分鐘
s = parseInt(總秒數%60); //計算當前秒數*/
function conus(time){
var dqtime = +new Date(time);
var zqtime = +new Date();
var times = (dqtime - zqtime) / 1000;
var t = parseInt(times / 60 / 60 / 24);//天
t = t < 10 ? '0' + t:t;
var s = parseInt(times / 60 / 60 % 24);//時
s = s < 10 ? '0' + s:s;
var f = parseInt(times / 60 % 60);//分
f = f < 10 ? '0' + f:f;
var m = parseInt(times % 60);//秒
m = m < 10 ? '0' + m:m;
return t + '天' + s + '時' + f + '分' + m + '秒';
}
console.log(conus('2022-6-7 12:00:00'));
源碼如下
、需求分析
1、需求：按鈕5秒之后才可以使用
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
2、分析：
①：開始先把按鈕禁用（disabled 屬性）
②：獲取元素
③：函數內處理邏輯
｛
秒數開始減減
按鈕里面時間隨之變化，開始倒計時
如果秒數等于0 停止定時器，里面文字變為同意并繼續，按鈕可以點擊確認
｝
二、HTML代碼準備
在HbuilderX中新建項目：閱讀協議，同時如下準備HTML代碼
其中button標簽內加了disabled屬性，使按鈕處于不可選中狀態
HTML結構
三、CSS樣式設置
1、在CSS文件夾中新建CSS樣式文件：index.css，并將外部的CSS文件index.css寫入到index.html文件中
外部CSS文件
鏈接外部CSS文件
2、設置各元素的樣式
CSS樣式設置
四、倒計時功能實現
1、在js文件夾中新建js文件：index.js，并將外部的js文件index.js寫入到index.html文件中
寫入js文件
2、獲取button元素
獲取botton元素
3、設置倒計時
設置倒計時
4、創建定時器
5、當倒計時為0時，需要關閉定時器、按鈕狀態改為可選中、文字內容修改為：同意并繼續
創建定時器
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
