javascript特效实现(4)——当前时间和倒计时效果

这个效果的实现关键是对Date对象和setTimeout的使用。

一共有三个例子，HTML结构如下，就不添加CSS样式了。

<body>

    当前时间：<p id="p1"></p>

    高考倒计时：<p id="p2"></p>

    限时抢购：<p id="p3"></p>

</body>

主要体会javascript的实现

window.onload=function () {

    var p1=document.getElementById("p1"),

        p2=document.getElementById("p2");

        p3=document.getElementById("p3");

    showtime1();

    showtime2();

    showtime3();

}

1.简单的实现当前时间的显示

 function showtime1() {

     var nowdate=new Date();//创建Date对象nowdate,以获取当前时间

     var year=nowdate.getFullYear(),//获取年份

         month=nowdate.getMonth()+1,//获取月份，getMonth()得到的是0-11，需要加1

         date=nowdate.getDate(),//获取日份

         day=nowdate.getDay(),//获取一周中的某一天，getDay()得到的是0-6

         week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],

         h=nowdate.getHours(),

         m=nowdate.getMinutes(),

         s=nowdate.getSeconds(),

         h=checkTime(h),//函数checkTime用于格式化时，分，秒

         m=checkTime(m),

         s=checkTime(s);

     p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;

     setTimeout(showtime1, 1000);//反复执行函数本身

 }

其中的checkTime函数如下：

function checkTime(i) {

   if (i<10) {

      i="0"+i;

   }

   return i;

}

因为平时看到的时间格式一般是00:00:01,而getHours，getMinutes，getSeconds得到格式是0到9，不是00到09这样的格式。所以在从9变成10的过程中，有一位数，变成两位数，同样在充59秒变为0秒或者59分变为0分或者23时变为0时。

比如 23:59:59 再下一秒应该变为00:00:00；若未使用checkTime函数进行处理，则会变为0:0:0，这样格式上就有点不统一，而且视觉上也有字数增加或减少的突变。(后面两个例子就不用checkTime函数对时分秒进行处理了！！！)

2.高考倒计时效果实现

function showTime2() {

　　var nowtime=new Date(),//获取当前时间

　　    endtime=new Date("2017/6/6");//定义结束时间

   var lefttime=endtime.getTime()-nowtime.getTime(),//距离结束时间的毫秒数

       leftd=Math.floor(lefttime/(1000*60*60*24)),//计算天数

       lefth=Math.floor(lefttime/(1000*60*60)%24),//计算小时数

       leftm=Math.floor(lefttime/(1000*60)%60),//计算分钟数

       lefts=Math.floor(lefttime/1000%60);//计算秒数

   p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;

   setTimeout(showTime2, 1000);

}

其中比较重要的几点：

① 定义结束的时间endtime=new Date("2017/6/6")是通过new一个带有参数的Date对象，直接 new Date()则是直接获取到当前的时间；

② getTime()方法得到的是距离1970 年 1 月 1 日的毫秒数。

③天数，小时数，分钟数和秒数的计算，%（取模运算）。得到距离结束时间的毫秒数（剩余毫秒数），除以1000得到剩余秒数，再除以60得到剩余分钟数，再除以60得到剩余小时数。除以24得到剩余天数。剩余秒数 lefttime/1000 模60得到秒数，剩余分钟数 lefttime/(1000*60) 模60得到分钟数，剩余小时数模 lefttime/(1000*60*60) 模24得到小时数。

3.限时抢购倒计时效果

function showtime3() {

　　var nowtime=new Date(),

　　　　endtime=new Date("2020/1/1,00:00:00"),//设置结束时间

　　　　lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),

　　　　d=Math.floor(lefttime/(60*60*24)),

　　　　h=Math.floor(lefttime/(60*60)%24),

　　　　m=Math.floor(lefttime/60%60),

　　　　s=Math.floor(lefttime%60);

　　p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";

　　setTimeout(showtime3, 1000);

}

其实和第二个例子大同小异，区别是结束时间的设置 new Date("2020/1/1,00:00:00")

下面是完整的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>倒计时效果</title>

    <script type="text/javascript">

        function checkTime(i) {

            if (i<10) {

                i="0"+i;

            }

            return i;

        }

        window.onload=function () {

            var p1=document.getElementById("p1"),

                p2=document.getElementById("p2");

            showtime1();

            showtime2();

            showtime3();
　　　　 }

        function showtime1() {

            var nowdate=new Date();

            var year=nowdate.getFullYear(),//年份

            month=nowdate.getMonth()+1,//月份

            date=nowdate.getDate(),//日

            week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],

            day=nowdate.getDay(),//getDay获取0-6

            h=nowdate.getHours(),

            h=checkTime(h),

            m=nowdate.getMinutes(),

            m=checkTime(m),

            s=nowdate.getSeconds(),

            s=checkTime(s);

         p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;

         setTimeout(showtime1, 1000);

         }

         function showtime2() {

            var nowtime=new Date(),

                endtime=new Date("2017/6/6");

            var lefttime=endtime.getTime()-nowtime.getTime(),

                leftd=Math.floor(lefttime/(1000*60*60*24)),

                lefth=Math.floor(lefttime/(1000*60*60)%24),

                leftm=Math.floor(lefttime/(1000*60)%60),

                lefts=Math.floor(lefttime/1000%60);

            p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;

            setTimeout(showtime2, 1000);

         }

         function showtime3() {

            var nowtime=new Date(),

                endtime=new Date("2020/1/1,00:00:00"),

                lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),

                d=Math.floor(lefttime/(60*60*24)),

                h=Math.floor(lefttime/(60*60)%24),

                m=Math.floor(lefttime/60%60),

                s=Math.floor(lefttime%60);

            p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";

            setTimeout(showtime3, 1000);

         }

    </script>

</head>

<body>

    当前时间：<p id="p1"></p>

    高考倒计时：<p id="p2"></p>

    限时抢购：<p id="p3"></p>

</body>

</html>

#行者杰客#

为者常成，行者常至。婴非有异与人也，常为而不置，常行而不休者

javascript特效实现(4)——当前时间和倒计时效果的更多相关文章

javascript 特效实现(1)——展开选项和收起效果
知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id=" ...
Javascript特效代码大全(420个)（转）
转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
JavaScript特效（调试笔记）
JavaScript特效一.在网页上显示当前的时间日期,例如:“2016年3月26日星期六”. js源代码: function getTime() { var today = new Date() ...
JS 显示时间与倒计时练习
显示时间与倒计时 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
超实用的JavaScript代码段 Item1 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
【JavaScript】在同一个网页中实现多个JavaScript特效
在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...
Javascript 实现倒计时效果
代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

Node.js爬虫数据抓取乱码问题总结
一.非UTF-8页面处理 1.背景 windows-1251编码比如俄语网站:https://vk.com/cciinniikk 可耻地发现是这种编码所有这里主要说的是 Windows-1251( ...
ASP.NET MVC传送参数至服务端
ASP.NET MVC传送参数至服务端,前端与服务端的写法,你可以参考与采用适合你的需求的.当你只传递一两个参数也许觉得没有什么,如果一个方法中带的参数多的话,可以考虑model,前端可以考虑对象进行 ...
使用BOM 的window对象属性打开新窗口
★ 示例1 要求:弹出新窗口,并向新窗口写入动态HTML代码代码 <buttononclick="btnOpen()">打开新窗口</button> & ...
.net reflector激活
1.断网 2. 运行.NET Reflector,点击Help -> Activate 3. 运行注册机,复制注册机生成的序列号,粘贴到.NET Reflector中的激活输入框 4. 点击激活 ...
【C#进阶系列】00 序
老早就被各种推荐<CLR via C#>这本书了,然而一直没去学. 因为工作中所需要的.NET功底目前算是足以应付了,而前端却不熟,所以跑去学了一段时间前端的知识. 终于算是把前端方面的基 ...
几个gcc的扩展功能
-finstrument-functions constructor destructor __builtin_return_address http://linuxgazette.net/15 ...
SpringMvc+Mybatis 框架搭建
本文承接上一篇[idea使用maven搭建springmvc] 开篇:在main/resources下新建dbconfig.properties.spring.xml.spring-mybatis.x ...
ADO.NET 增删改查的基本用法
ADO.NET:数据访问技术就是将C#和MSSQL连接起来的一个纽带可以通过ADO.NET将内存中的临时数据写入到数据库中也可以将数据库中的数据提取到内存中供程序调用所有数据访问技术的基础连接 ...
R语言学习笔记：分析学生的考试成绩
孩子上初中时拿到过全年级一次考试所有科目的考试成绩表,正好可以用于R语言的统计分析学习.为了不泄漏孩子的姓名,就用学号代替了,感兴趣可以下载测试数据进行练习. num class chn math e ...
C语言柔性数组
结构中最后一个元素允许是未知大小的数组,这个数组就是柔性数组.但结构中的柔性数组前面必须至少一个其他成员,柔性数组成员允许结构中包含一个大小可变的数组,sizeof返回的这种结构大小不包括柔性数组的内 ...

javascript特效实现(4)——当前时间和倒计时效果

为者常成，行者常至。婴非有异与人也，常为而不置，常行而不休者

javascript特效实现(4)——当前时间和倒计时效果的更多相关文章

随机推荐

热门专题