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

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

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

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

前端福利！10个短小却超实用的JavaScript 代码段
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...
推荐10 个短小却超实用的 JavaScript 代码段
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...
超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
《超实用的JavaScript代码段》—— 读后总结
这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...
超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果图片尺寸统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
超实用的JavaScript代码段 Item5 --图片滑动效果实现
先上图鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...
超实用的JavaScript代码段
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...
超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...
超实用的JavaScript代码段 Item2 --伸缩菜单栏
伸缩菜单栏点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来. <!doctype html> <html lang="en&quo ...

随机推荐

Github 错误合集：Failed connect to github.com:8080 || Failed connect to github.com:443; No error
文/skay 地址:http://blog.csdn.net/sk719887916/article/details/40541199 开发中遇到github无法pull和push代码问题,原来git ...
海量数据处理 - 10亿个数中找出最大的10000个数（top K问题）
前两天面试3面学长问我的这个问题(想说TEG的3个面试学长都是好和蔼,希望能完成最后一面,各方面原因造成我无比想去鹅场的心已经按捺不住了),这个问题还是建立最小堆比较好一些. 先拿10000个数建堆, ...
redis菜鸟教程
Redis 简介 http://www.runoob.com/redis/redis-intro.html Redis 安装 http://www.runoob.com/redis/redis-ins ...
Select、Poll与Epoll比较
(1)select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select()返回后,该数组中就绪的文件描述符便会被内核修改标志 ...
iOS视频播放Demo VideoPlayerDemo
VideoPlayerDemo https://github.com/CaliosD/VideoPlayerDemo 一个视频播放的例子,使用了pod.
【6】-BAT面试之操作系统内存详解
本文主要参考两篇博客,读后整理出来,以供大家阅读,链接如下: http://blog.jobbole.com/95499/?hmsr=toutiao.io&utm_medium=toutiao ...
Xcode使用心得01:断点中断问题和调整编译目标
在obj-c系列博文里,我们粗浅的介绍了obj-c的一些语法以及F库中的一些标准类的使用,但是实际编写拿得出手的APP还是得老老实实在os x上用Xcode写啊!最近上网无意中发现还有支持os x和i ...
html的meta标签
meta是一个空元素,没有结束标签:meta元素可以附带8个属性,其中4个是通用属性-–dir,lang,xml:lang和title,其他4个是meta特有的属性: schema,name,cont ...
深度学习-conv卷积
过滤器(卷积核) 传统的图像过滤器算子有以下几种: blur kernel:减少相邻像素的差异,使图像变平滑. sobel:显示相邻元素在特定方向上的差异. sharpen :强化相邻像素的差异,使图 ...
jsJqGrid
/*展开收起*/ $(function() { initGridTable(); }); function change() { var flag = $("#searchTitle&quo ...