整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
回說到在網頁上面用`<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響應布局
indow提供了如下4個方法來支持定時器
setlnterval("code",interval)、clearInterval(timer):設置、刪除定時器。setInterval設置每隔interval毫秒重復執行一次code.
setTimeout("code",interval)、clearTimeout(timer):也是設置定時器。推薦使用setInterval()和clearInterval().setTimeout設置在interval毫秒延遲后執行一次code.
如果需要讓一段代碼、一個javaScript函數以固定頻率重復執行，則應該使用setInterval()函數；如果需要讓一段代碼、一個javaScript函數在指定延遲后僅僅執行一次，則應該使用setTimeout函數。
下面代碼示范了一個簡單的“動畫”效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用定時器</title>
</head>
<body onload="setTime();">
<span id="tm"></span>
<script type="text/javascript">
//定義定時器變量
var timer;
//保存頁面運行的起始時間
var cur=new Date().getTime();
var setTime=function()
{
//在tm元素中顯示當前時間
document.getElementById("tm").innerHTML=new Date().toLocaleString();
//如果當前時間比起始時間大于60秒,則停止定時器調度
if(new Date().getTime()-cur>60*1000)
{
//清除timer定時器
clearInterval(timer);
}
}
//指定每隔1000毫秒執行setTime()函數一次
timer=window.setInterval("setTime();",1000);
</script>
</body>
</html>從上面的頁面代碼中可以看出，setInterval()定時器與java定時器基本相似，只是setInterval()是控制一條或多條代碼以指定時間間隔重復執行；而java定時器則是控制事件監聽器以指定時間間隔不斷被觸發。
實際上，上面代碼也可改為使用setTimeout()方法來實現，看如下代碼。
<html>
<head>
<meta charset="UTF-8">
<title>使用定時器</title>
</head>
<body>
<span id="tm"></span>
<script type="text/javascript">
//定義定時器變量
var timer;
//保存頁面運行的起始時間
var cur=new Date.getTime();
var setTime=function()
{
//在tm元素中顯示當前時間
document.getElementById("tm").innerHTML=new Date().toLocaleString();
//如果當前時間比起始時間小于等于60秒，則執行定時器的調度
if(new Date().getTime()-cur<=60*1000)
{
//指定延遲1000毫秒后執行setTime()函數
window.setTimeout("setTime();",1000);
}
}
//直接調用setTime()函數
setTime();
</script>
</body>
</html>上面的代碼需要直接調用setTime()函數，一旦setTime()函數執行起來后，在1秒鐘內，該函數將會重復執行，因為setTime()函數的最后一行調用了setTimeout("setTime();",1000);,該代碼指定在1秒鐘之后再次執行setTime()函數。
提示：對于setTimeout()和setInterval()定時器的區別，可以舉一個現實生活中的例子。假如尤為先生希望周期性地和某位小姐約會，他有兩種實現方式：第一種方式是制定一個約會時間表，比如每隔一天就約會一次，這樣只需每次到時間進行約會即可；
第二種方式需要先獲取第一個約會，然后每次約會結束后再次約定下次約會的時間，這種方式需要每次約會結束后重新約定下次約會的時間，setInterval()定時器采用的是第一種方式；而setTimeout()則采用第二種方式。
OM簡單的說就是瀏覽器對象模型，對BOM的操作就是對瀏覽器的功能和屬性的操作；
BOM的核心是window,它是一個瀏覽器的功能實例，瀏覽器會為HTML文檔創建一個專屬的window對象，并為每一個框架創建額外的window對象。
window對象是BOM的頂層，所有其他對象都是通過window對象衍生的；但是在調用子對象的時候并不強制要求聲明
DOM的document也是window的子對象之一；以下兩種寫法是相同的:
window.document.getElementById("herd")
document.getElementById("herd")window對象常用方法
彈窗
window.alert() 消息框；彈窗會直接顯示一段信息字段
window.confirm() 確認框；彈窗顯示text字段的同時給出確認和取消兩個按鈕，返回true和false
window.prompt() 提示框；彈窗顯示字段和一個輸入框，并返回輸入框內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="警告框" onclick="showalert()" />
<input type="button" value="確認框" onclick="showconfirm()" />
<input type="button" value="提示框" onclick="showprompt()" />
<script>
function showalert(){
window.alert("這是一個警告框");
}
function showconfirm(){
window.confirm("這是一個確認框");
}
function showprompt(){
window.prompt("這是一個提示框");
}
</script>
</body>
</html>
瀏覽器窗口信息
window.open() 打開新窗口
window.open( url , name , features , replace )
url：需要載入的網頁URL地址
name：為新窗口命名
features：可選，窗體的特性定義
屬性特性height窗口高度width窗口寬度left左邊距top左上邊距directories是否顯示鏈接工具欄location是否顯示地址欄menubar是否顯示菜單欄resizable是否允許調整窗口尺寸scrollbars是否顯示滾動條status是否顯示狀態欄toolbar是否顯示工具欄
window.close() 關閉當前實例化對象的窗口
window.moveTo() 移動當前窗口
window.resizeBy()/resizeTo() 調整窗口
window.focus() 獲得當前對象窗口的焦點
window.blur() 釋放當前對象窗口的焦點
window.print() 打印當前窗口或Frame
window.scrollBy()/scrollTo() 滾動當前窗口總的HTML文檔
setInterval()/clearInterval() 設置定時器
setTimeout()/clearTimeout() 刪除定時器
瀏覽器窗口尺寸
通常在JavaScript中，一段較為通用代碼如下：
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth ; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight ;
窗口頁面絕對居中
// 頁面絕對居中必須設置style屬性： position:absolute;
var left = (w-width)/2;
var top = (h-height)/2;
// 利用margin外邊距的top和left來“絕對居中”在瀏覽器中間
document.getElementById("cen").style.top = top+"px";
document.getElementById("cen").style.left = left+"px";瀏覽器信息:navigator
navigator.appCodeName 返回瀏覽器代碼名稱（網景 Mozilla）
navigator.appName 返回瀏覽器名稱
navigator.appVersion 返回瀏覽器版本號
navigator.Platform 返回瀏覽器操作系統
userAgent 返回包含內碼名稱、版本號；用于識別用戶
<input type="button" value="瀏覽器信息" onclick="showversion()"/>
function showversion(){
// navigator 瀏覽器信息
var put = document.getElementById("version");
put.innerHTML = "代號:"+navigator.appCodeName+"<br/>";
put.innerHTML+= "名稱:"+navigator.appName+"<br/>";
put.innerHTML+= "版本:"+navigator.appVersion+"<br/>";
put.innerHTML+= "系統:"+navigator.platform+"<br/>";
put.innerHTML+= "信息:"+navigator.userAgent+"<br/>";
}屏幕對象:screen
屬性對象特性screen.height回顯屏幕高度screen.width回顯屏幕寬度screen.avaiHeight回顯除任務欄的屏幕高度（可用的高度）screen.avaiWidth回顯除系統部件寬度的寬度（可用的深度）screen.colorDepth瀏覽器分配的顏色或顏色深度screen.pixelDepth返回屏幕的顏色分辨率（色彩分辨率）
<input type="button" value="屏幕信息" onclick="showscreen()" />
function showscreen() {
document.getElementById("screen").innerHTML = "屏幕尺寸:"+screen.height+"*"+screen.width+"<br/>";
document.getElementById("screen").innerHTML+= "窗口尺寸:"+screen.availHeight+"*"+screen.availWidth+"<br/>";
document.getElementById("screen").innerHTML+= "色彩深度:"+screen.colorDepth+"/色彩分辨率:"+screen.pixelDepth+"<br/>";
}地址對象:location
地址對象整理的是當前的URL信息
屬性特性location.href整個URL字符串location.protocolURL的通信協議部分的字符子串location.hostnameURL中服務器名、域名子域名或IP地址location.portURL中端口號location.hosthostname + portlocation.pathnameURL中的文件或路徑名location.hashURL中的錨點名稱location.searchURL中表示變量的字符子串location.reload(true/false)刷新頁面(true/false選擇是否從服務器刷新)location.replace(url)通過url網址刷新當前網頁
歷史對象:history
歷史對象保存著用戶上網的歷史記錄
屬性方法特性history.back()顯示瀏覽器的歷史列表中后退一個網址的網頁
history.forward()顯示瀏覽器的歷史列表中前進一個網址的網頁
history.go(n)/go(url)顯示瀏覽器的歷史列表中的第n個網址網頁，大于0表示前進，小于0表示后退，等于0表示刷新當前頁
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
