天天看点

倒计时效果制作

倒计时效果
           

做之前得先整理好思路,倒计时,倒计时故名思意就是预期

时间和现在时间的一个差,年减年,月减月,日减日,得出来的结果就是我们所要知道的时间

现在开始写了!

一、HTML

倒计时效果制作
倒计时效果制作

html就这样简单排一下,也没什么要注意的。

二、css

这里也没设置什么样式,就简单的把个个文本框进行了排版

这里给外面包裹的盒子设置了宽高,用于等下文本框的位置

倒计时效果制作

前面HTML和CSS我们就略过了,毕竟样式怎么样设置都可以,没必要说那么多,会了js随便怎么写好吧!

1、第一步肯定是先获取必要的元素了,那么没有元素怎么修改?

倒计时效果制作

这里获取元素之后直接绑定事件了,因为这样比较方便,毕竟其他地方也用不到这个元素了

2、我们之前说了,原理就是拿预计的时间减去现在时间得差,就是我们要得效果

这第二步就要获取时间差了!

倒计时效果制作

Date():获取本地时间 getTime():返回从1970年1月1日到指定日期得秒数

首先先获取到本地时间,进行一个转换,变成秒数

再设置一个时间,进行转换变成秒数。

为什么要这样呢?

因为我们电脑是没办法直接计算出差了,所以必须让他们有一个固定得值,让他们把时间都返回到1970年其中的秒数,

而我们设定的时间肯定秒数长亿点,现在的时间肯定短一点,就用长的时间减短的时间就是之间的就是差了

现在就可以算结果了只要除以毫秒除以秒除以分钟除以小时就能得到详细的数据啦

3、不过这么么简单怎么还要劳烦我算一便呢?

倒计时效果制作

Floor():舍去小数 //主要是为了反正出现小数,反正时间是不可能有小数的对吧!!!

这么分配时间地步,用减来的差除以毫秒再除以……除以小时得到的就是天数再赋值到变量中

小时的话,用差除以毫秒……除以小时再除以24后面余出来的数就是小时啦!

…………………………

………………

4、赋值了肯定就要用啊!之前挖的坑该填上了吧!

倒计时效果制作

Value;设置或返回input标签里的值

这里获取元素之后直接把之前的值赋值到每个相应的文本里面去

返回浏览器点击查看

效果已经有了,但有没有发现这个倒计时有亿点点不一样

5、我们这个不会变化啊!

这这时候我们可以创建一个函数,把之前的代码放到函数里面,

再创建一个定时器,让这个函数每秒钟运动一次,这样就达到变化的效果啦!

倒计时效果制作
倒计时效果制作

继续阅读