现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，本文分析不同倒计时效果的计算思路及方法，掌握日期对象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. Stripe Compaction

    借鉴于LevelDB.Cassandra的Compaction方法,https://issues.apache.org/jira/browse/HBASE-7667 提出了Stripe Compact ...

  2. 深入浅出Cocoa多线程编程之 block 与 dispatch quene

    深入浅出 Cocoa 多线程编程之 block 与 dispatch quene 罗朝辉(http://www.cppblog.com/kesalin CC 许可,转载请注明出处 block 是 Ap ...

  3. IOS常用第三方库《转》

    UI 动画 网络相关 Model 其他 数据库 缓存处理 PDF 图像浏览及处理 摄像照相视频音频处理 响应式框架 消息相关 版本新API的Demo 代码安全与密码 测试及调试 AppleWatch ...

  4. 返回空的list集合*彻底删除删除集合*只是清空集合

    ---------- 要求返回空的List集合----------- List<String> allList = Collections.emptyList();// 返回空的List集 ...

  5. 【.Net架构】BIM软件架构03：Web管控平台MVC架构

    一.前言        上一篇讲述的是将BIM平台后台架构CoreService.sln,该解决方案主要作用是对管控平台的核心业务进行封装,然后让前端的ApiController去调用该解决方案中的对 ...

  6. django2.0升级日记

    1.大量的外键定义需要加on_delete参数 2.'WSGIRequest' object has no attribute 'session',这个问题是因为settings中middleware ...

  7. Airbnb/Apache Superset – the open source dashboards and visualization tool – first impressions and link to a demo

    https://assemblinganalytics.com/post/airbnbapache-superset-first-impressions-and-link-to-a-demo/ Tod ...

  8. form表单序列化为Jquery对象

    <form id="DailyFinancial" > @*class="form-inline"*@ <div class="fo ...

  9. EF CodeFirst 数据库初始化策略

    最近用EF做了几个小东西,了解简单使用后有了深入研究的兴趣,所以想系统的研究一下EF CodeFist的几个要点.下面简单列一下目录 1.1 目录 数据库初始化策略和数据迁移Migration的简单介 ...

  10. Java并发-容器

    同步容器类:同步容器类包括Vector和Hashtable.这些类实现线程安全的方式是:将它们的状态封装起来,并对每个公有方法进行同步,使得每次只有一个线程可以访问容器的状态.JDK1.2之后,提供了 ...