倒计时

获取当前时间用 new Date(),如果获取目标时间就是给括号里传规定格式的字符串比如:new Date("2017-03-27 14:59:59");

这里对格式有要求:
在IE6-8下“-”这个横岗不兼容,需要用"/"

getTime() 获取距离1970年1月1日午夜0点的毫秒差

所以求两个时间段的时间差就是 用getTime()方法 获取两个时间段的毫秒差 然后用多的减少的

代码:

<script type="text/javascript">
    /*
    * function:计时器函数
    * params:目标时间字符串
    * return:当前时间和目标时间所相差的时间字符串
    * */
    function getTimeFun(timePar){
        //获得目标时间的时间对象
        var dateTime = new Date(timePar);
        //获得当前时间的时间对象
        var dateNow = new Date();
        //分别获得距离1970年1月1日的毫秒数目
        dateNow = dateNow.getTime();
        dateTime = dateTime.getTime();
        //目标时间不能比当前时间小
        if(dateTime<dateNow){
            return "时光不能倒流!!!";
        }
        //求出当前时间和目标时间相差的毫秒
        var time = dateTime - dateNow;
        //获得相差的小时(未取整)
        var hourMs = time/(1000*60*60);
        //获得相差的小时(向下取整)
        var hour = Math.floor(hourMs);
        //获得相差的分钟(未取整)
        var minuteMs = (hourMs-hour)*60;
        //获得相差的分钟(向下取整)
        var minute = Math.floor(minuteMs);
        //获得相差的秒数(向下取整)
        var sec = Math.floor((minuteMs - minute)*60);
        //要返回的倒计时
        var timeStr = addZero(hour) +"小时"+addZero(minute)+"分钟"+addZero(sec)+"秒";
        //返回对象
        var resultList = {};
        //返回对象存入小时、分钟、秒、倒计时
        resultList.hour = addZero(hour);
        resultList.minute = addZero(minute);
        resultList.sec = addZero(sec);
        resultList.timeStr = timeStr;
        console.log(resultList)
        return resultList;
    }

    //如果数字小于10前面加0返回
    function addZero(timeObj){
        return timeObj<10?"0"+timeObj:timeObj;
    }

    //获取展示时间地点的div
    var timeDiv = document.getElementById("timeId");
    //每一秒执行一次自执行匿名函数,这里timeAuto只是个变量,不是函数
    var timeAuto = window.setInterval(function(){
        //调用计时器函数并传入一个目标时间,然后得到返回值,返回值中包括小时分钟秒还有输出用的时间字符串
        var res = getTimeFun("2017/03/27 20:00:00");
        //检验返回值
        if(res!="时光不能倒流!!!"){
            //把时间字符串给展示的div展示出来
            timeDiv.innerHTML = res.timeStr;
            //如果时间都为0的时候停止这个匿名函数
            if(res.hour == 0 && res.minute ==0 && res.sec==0){
                alert("结束");
                clearInterval(timeAuto);
            }
        }else{
            alert("时光不能倒流!!!");
            clearInterval(timeAuto);
        }

    },1000);

</script>
时间: 2024-10-12 22:51:08

倒计时的相关文章

canvas制作倒计时炫丽效果

<!DOCTYPE html> <head> <title>canvas倒计时</title> <style> .canvas{ display: block; border: 1px solid #000; margin: 50px auto; } </style> </head> <body> <canvas class="canvas" id="canvas"

浅谈android中仅仅使用一个TextView实现高仿京东,淘宝各种倒计时

今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

JS倒计时,不会重复执行

直接上代码,亲自测试了的,没问题咯 <html> <head> <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> </head> <body>

项目需求:自定义倒计时的TextView

现在这么一个需求: 我有一个ListView,每一个列表项 布局如上图,顶部一个大图片展示,中部一个音频播放,底部一个描述文字. 在这个界面,一次只能点击一个列表项的播放按钮,那么我直接在ListView所属的activity创建了唯一的一个MediaPlayer,然而,这不是问题,所有的音频方面的播放冲突都解决了 问题就在中部的音频播放,我需要点击左边的播放按钮,然后右边有一个剩余时间要跟随着变化,当然点击暂停的时候,剩余时间也要暂停 首先,这里运用了购物车功能的原理实现按钮的操作.Andro

WdatePicker设置时间与倒计时

之前苦于jQuery的datetimepicker插件不知道如何设置秒数,用了同学推荐的WdatePicker,真心好用. 相关文档用法可以上http://www.my97.net/dp/index.asp看详细介绍. 页面显示只需要<input type="text" id="datetimepicker1" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class=&quo

倒计时时间控件

在做一些电商或购物的app时,我们经常会看到倒计时抢购的标示,今天恰有时间把项目中用到的该控件提取出来,有需要的可以参考下 ====================================================================================================== 版权所有,如需转载请标明出处:http://blog.csdn.net/you4580 =========================================

PHP+HTML实现登出界面倒计时效果

在WAMP(Windows+Apache+MySQL+PHP)做网站时,通常需要使用Session记录表单登陆用户名和密码等变量,而在登出时需要清除Session.通常我想实现的登出是通过alert提示用户然后header跳转,但下面的代码是通过JavaScript实现的时间倒计时并跳转到主页的效果,主要是看到学校的BT网站等都是这个效果. PS:参考 C# 系统应用之Cookie\Session基础知识及php读取Cookie\Session 代码如下: <?php session_start

一个网页倒计时的实现

最近要做一个网站上的活动倒计时的功能.在网上搜了一下,网上关于js倒计时的代码倒是不少,但是正正可以应用到生产环境的则是少之又少. 比如我用到的这个就是这样的: var endDate=new Date(2014,7,25,23,59,59); var begin = new Date(); var intDiff=Math.round((endDate.getTime()-begin)/1000);//初始日期 function timer(intDiff){ window.setInterv

软考倒计时27天:信息系统集成专业技术知识

2014-04-27 14:09:38      多云          距软考还有27天!当一个人先从自己的内心开始奋斗,他就是个有价值的人. 1.信息系统集成的显著特点: 2.信息系统集成的分类 3.信息系统的生命周期: 4.信息系统的开发方法有哪些,各自的特点 5.软件需求的一个基本特征是:() 6.需求分析的目的 7.如何理解"高内聚,低耦合" 8.判断:软件测试是一种仅在编码阶段完成后才开始的活动. 9.软件测试在概念上区分为哪三类: 10.            软件维护的

&lt;linux小脚本&gt;10秒倒计时

#!/bin/bash #带颜色的10秒倒计时 for  ((sec=10;sec>=0;sec--)) do echo -ne "\e[1;31myou have $sec seconds to prepared!\e[0m" echo -ne "\r" sleep 1 done echo