现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，本文分析不同倒计时效果的计算思路及方法，掌握日期对象Date，获取时间的方法,计算时差的方法，实现不同的倒时计效果。

1、简单时间显示

讲解日期对象Date,并通过该对象获取时、分、秒等，让你自由提取所需时间内容。

<!DOCTYPE html>

<html>

<head>

    <title>获取时间</title>

    <script type="text/javascript">

    window.onload = function(){

        showTime();

    }

    function showTime(){

        var myDate = new Date();

        var year = myDate.getFullYear();

        var month = myDate.getMonth() + 1;

        var date = myDate.getDate();

        var dateArr = ["日","一",'二','三','四','五','六'];

        var day = myDate.getDay();

        var hours = myDate.getHours();

        var minutes = formatTime(myDate.getMinutes());

        var seconds = formatTime(myDate.getSeconds());

        var systemTime = document.getElementById("time");

        systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" +  minutes + ":" + seconds;

        setTimeout("showTime()",500);

    }

    //格式化时间：分秒。

    function formatTime (i){

        if(i < 10){

            i = "0" + i;

        }

        return i;

    }

    </script>

</head>

<body>

    <div id ='time'></div>

</body>

</html>

显示结果：

2、倒计时时差

讲解gettime()等方法，及计算时间的方法，学会时间相差的天数。

<!DOCTYPE html>

<html>

<head>

    <title>获取时间</title>

    <script type="text/javascript">

        window.onload = function(){

            deadTime();

        }

        function deadTime(){

            var nowTime = new Date();

            var finalTime = new Date("2015-11-11");

            var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);

            var date = Math.ceil(lefttime);

            document.getElementById("time").innerHTML = date;

        }

    </script>

</head>

<body>

    <div >距离双十一还有：<span id ='time'></span>天</div>

</body>

</html>

显示效果：

3、 限时抢购

如何运用日期对象及方法，计算相差的天、时、分、秒的方法。

<!DOCTYPE html>

<html>

<head>

<title>团购——限时抢</title>

</head>

<body>

<div class="time"> <span id="LeftTime"></span></div>

</div>

<script>

function FreshTime()

{

        var endtime=new Date("2015/11/11,12:20:12");//结束时间

        var nowtime = new Date();//当前时间

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

        d=parseInt(lefttime/3600/24);

        h=parseInt((lefttime/3600)%24);

        m=parseInt((lefttime/60)%60);

        s=parseInt(lefttime%60);

        document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";

        if(lefttime<=0){

                document.getElementById("LeftTime").innerHTML="团购已结束";

                clearInterval(sh);

        }

}

        FreshTime();

        var sh;

        sh=setInterval(FreshTime,1000);

</script>

</body>

</html>

知识点：

1.学会使用日期对象Date和方法。

2.学会不同时间内容的获取。

3.学会计算时差的方法。

本实例通过慕课网相关课程整理：慕课网—–倒计时效果。

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226

超实用的JavaScript代码段 Item1 --倒计时效果的更多相关文章

  1. 前端福利！10个短小却超实用的JavaScript 代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...

  2. 推荐10 个短小却超实用的 JavaScript 代码段

    1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...

  3. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  4. 《超实用的JavaScript代码段》—— 读后总结

    这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...

  5. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  6. 超实用的JavaScript代码段 Item5 --图片滑动效果实现

    先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...

  7. 超实用的JavaScript代码段

    1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...

  8. 超实用的JavaScript代码段 Item4 --发送短信验证码

    发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...

  9. 超实用的JavaScript代码段 Item2 --伸缩菜单栏

    伸缩菜单栏 点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来. <!doctype html> <html lang="en&quo ...

随机推荐

  1. objc直接通过指针访问对象实例变量

    我们现在来做一件被认为是very bad的事情,如题所示:无论实例变量是私有的.保护的都可以通过地址访问到,并且还可以修改之.这可以称之为所谓的"超级键值编码". 首先上代码: # ...

  2. Leetcode_278_First Bad Version

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/49719255 You are a product mana ...

  3. csdn我的blog成长轨迹(好吧我是闲的蛋疼)

    2014-06-26 21:26        2014-06-28 15:17        2014-07-03 14:35                 2014-08-31 0922     ...

  4. JFinal配合Shiro权限控制在FreeMarker模板引擎中控制到按钮粒度的使用

    实现在FreeMarker模板中控制对应按钮的显示隐藏主要用到了Shiro中的hasRole, hasAnyRoles, hasPermission以及Authenticated等方法,我们可以实现T ...

  5. Vi 操作命令

    进入vi的命令  vi filename :打开或新建文件,并将光标置于第一行首  vi +n filename :打开文件,并将光标置于第n行首  vi + filename :打开文件,并将光标置 ...

  6. 我的sql数据库存储过程分页- -

    以前用到数据库存储过程分页的时候都是用 not in 但是最近工作的时候,随着数据库记录的不断增大,发现not in的效率 真的不行 虽然都设置了索引,但是当记录达到10w的时候就发现不行了,都是需要 ...

  7. 2MySQL Server 系统架构

    2．2MySQL Server 系统架构 总的来说,MySQL 可以看成是二层架构,第一层我们通常叫做SQL Layer,在MySQL 数据库系统处理底层数据之前的所有工作都是在这一层完成的,包括权限 ...

  8. 使用JConsole以及VisualVM进行jvm程序的监控，排错，调优

    这里只是做一个备份,便于以后继续. 添加两个感觉好的链接吧: http://www.linuxidc.com/Linux/2015-02/113420.htm http://blog.csdn.net ...

  9. java.lang.SecurityException: Can't make field constructor accessible

    原本使用GsonConvertor,在Android版本5.1.1上没有任何问题,结果切换到版本6.0.1上,出现以下所示问题: java.lang.IllegalArgumentException: ...

  10. 【Java入门提高篇】Day16 Java异常处理（上）

    当当当当当当,各位看官,好久不见,甚是想念. 今天我们来聊聊Java里的一个小妖精,那就是异常. 什么是异常?什么是异常处理? 异常嘛,顾名思义就是不正常,(逃),是Java程序运行时,发生的预料之外 ...