整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
回说到在网页上面用`<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小时内与您取得联系。
