用javascript实现以下功能!_HTML5实例002——1分钟用javascript实现倒计时效果

上回说到在网页上面用``标签和一个小的javascript库实现了飘雪花的效果。

进来看看，1分钟用HTML5实现的雪花效果——HTML5实例001

有客官提到不知道如何入手学习``这个标签的事，我正好想到了自己曾经为了学习这东西写了一个生成像素风格头像的网页，简单明了，明天分享出来。

还有客官说自己加了音乐，为你点赞，学习编程就是要自己不断地去摸索，去尝试。提到了多浏览器的兼容，这个兼容，只要是写过前端代码的兄弟，提多了都是泪。如果想快速出效果的话，其实可以找个第三方专门播放音频的库，比较省心。

好了，继续昨天没有实现完成的部分，有了雪花效果，接下来只要把两个图片放到页面上面，再加个倒计时就ok了。

1, 首先在`index.html`里面加入两个图片，再将例计时要用到的几个``标签也加上：

距离己亥年春节还有

天 小时 分 秒

用两个div将两块内容包起来，稍后让他们左右浮动。

可能有客官注意到那几个``的分行有点不对劲，这里这样子分行其实是为了防止在同一行的`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