现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，本文分析不同倒计时效果的计算思路及方法，掌握日期对象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. 如何在shell脚本中判断文件或者文件夹是否存在？

    1:查找文件夹 如果文件夹存在,则打印一句存在,否则打印不存在 这里的话可以自由加一些指令. if [ test -d 文件夹名称 ] ; then echo "文件夹存在!" e ...

  2. 单片机驱动AT24C02存储芯片

    AT24C02是一个2K位串行CMOS E2PROM, 内部含有256个8位字节,CATALYST公司的先进CMOS技术实质上减少了器件的功耗.AT24C02有一个8字节页写缓冲器.该器件通过IIC总 ...

  3. redis菜鸟教程

    Redis 简介 http://www.runoob.com/redis/redis-intro.html Redis 安装 http://www.runoob.com/redis/redis-ins ...

  4. LeetCode之旅（19）-Power of Two

    题目 Given an integer, write a function to determine if it is a power of two. Credits: Special thanks ...

  5. obj-c编程10:Foundation库中类的使用(5)[时间对象]

    隔了好久才有了这新的一篇,还是无奈的时间啊!so这次我们就着重谈谈它喽. F库中有很多时间相关的类,比如NSDate,NSTimeInterval,NSTimeZone,NSDateComponent ...

  6. ajax-------封装

    function ajax(url, fnSucc, fnFaild){ //1.创建Ajax对象 var oAjax=null; if(window.XMLHttpRequest) { oAjax= ...

  7. Mongodb3.6 基操命令（二）——如何使用help

    前言 在上一篇文章Mongodb3.6 快速入门(一)中,我们主要使用两个命令: 1.mongod #启动服务 2.mongo #连接mongodb 对于刚接触mongo的人来说,该怎么给命令传递参数 ...

  8. WSGI及gunicorn指北（二）

    pyg0已经大概了解了wsgi.现在他决定深入探索他们实际在生产环境里用到的web 服务器 -gunicorn. 先来看看官网的介绍:Gunicorn 是一个运行在Unix上的python WSGI ...

  9. python做量化交易干货分享

    http://www.newsmth.NET/nForum/#!article/Python/128763 最近程序化交易很热,量化也是我很感兴趣的一块. 国内量化交易的平台有几家,我个人比较喜欢用的 ...

  10. ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件（阻止事件冒泡）

    闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...