超实用的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 ...

随机推荐

RHEL6.4安装nginx
RHEL6.4安装nginx 下载nginx-1.6.1.tar.gz, 解压进入目录: $ yum install pcre-devel $ ./configure --with-http_ssl_ ...
LeetCode（47）-Reverse Bits
题目: Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented ...
WebLogic域配置策略
WebLogic域配置策略--手动和模板选项,第一部分域含有BEA WebLogic Server实例的配置信息.它包含有关服务器.集群和机器的配置信息.域还含有关于资源,例如Java数据库连接(J ...
Dubbo入门—搭建一个最简单的Demo框架
一.Dubbo背景和简介 1.电商系统的演进 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. a.单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一 ...
Mac下通过brew安装指定版本的nodejs
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "PingFang SC Semibold"; color: #2c303 ...
Python 爬取美团酒店信息
事由:近期和朋友聊天,聊到黄山酒店事情,需要了解一下黄山的酒店情况,然后就想着用python 爬一些数据出来,做个参考主要思路:通过查找,基本思路清晰,目标明确,仅仅爬取美团莫一地区的酒店信息,不过 ...
Django单元测试简明实践
1.准备数据模式,Django空库测试需要所有相关数据模式必须在Django中定义,说白了,model不能有managed=Fasle,为了解决这个问题,你必须得有一个managed全部为True的S ...
python argparse用法总结
转:python argparse用法总结 1. argparse介绍 argparse是python的一个命令行解析包,非常适合用来编写可读性非常好的程序. 2. 基本用法 prog.py是我在li ...
linux小实验-考勤模拟程序
任务: 设计一个考勤模拟程序,实现如下功能选择界面,要求使用函数 1.上班签到 2.下班签出 3.缺勤信息查阅 4.退出考勤程序运行后,提示用户输入上述功能选择,并验证用户输入的用户名和密码:用户信 ...
基于NetMQ的TLS框架NetMQ.Security的实现分析
基于NetMQ的TLS框架NetMQ.Security的实现分析前言介绍交互过程支持的协议 TLS协议支持的算法实现握手第一次握手 Client Hello 第二次握手 Server ...