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响应布局

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() 删除定时器

浏览器窗口尺寸

IE、Chrome、Firefox、Opera、Safanwindow.innerHeight 浏览器窗口的内部高度window.innerWidth 浏览器窗口的内部宽度
IE8以下版本document.documentElement.clientHeight 高度document.documentElement.clientWidth 宽度document.body.clientHeight 高度document.body.clientWidth 宽度

通常在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表示刷新当前页

在线咨询

上一篇：网页中间的表格有横向滚动条的还看不见的时候咋办
下一篇：前端设计-Ajax技术及实例展示

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5实例002-1分钟用javascript实现倒计时效果

您的项目需求