JS倒计时大全

用js做一个倒计时(时分秒),js中倒计时器怎么实现 1.核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 02 分减去22分,结果会是负数的,所以要转换为毫秒;2.用时间戳来做,用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数;3.把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)。利用JavaScript函数做一个简单的倒计时。 阅读详情

1.世界末日倒计时

<form name="form1">
    <div align="center" align="center">
        <center>离2012年<span class='wp_keywordlink_affiliate'><a href="http://lxy.me/tag/世界末日" title="查看 世界末日 中的全部文章" target="_blank">世界末日</a></span>还有:<br>
            <input type="textarea" name="left" size="35" style="text-align: center">
        </center>
    </div>
</form>
<script LANGUAGE="javascript">
    startclock()
    var timerID = null;
    var timerRunning = false;
    function showtime() {
        Today = new Date();
        var NowHour = Today.getHours();
        var NowMinute = Today.getMinutes();
        var NowMonth = Today.getMonth();
        var NowDate = Today.getDate();
        var NowYear = Today.getYear();
        var NowSecond = Today.getSeconds();
        if (NowYear < 2000)
            NowYear = 1900 + NowYear;
        Today = null;
        Hourleft = 00 - NowHour
        Minuteleft = 00 - NowMinute
        Secondleft = 00 - NowSecond
        Yearleft = 2012 - NowYear
        Monthleft = 12 - NowMonth - 1
        Dateleft = 21 - NowDate
        if (Secondleft < 0) {
            Secondleft = 60 + Secondleft;
            Minuteleft = Minuteleft - 1;
        }
        if (Minuteleft < 0) {
            Minuteleft = 60 + Minuteleft;
            Hourleft = Hourleft - 1;
        }
        if (Hourleft < 0) {
            Hourleft = 24 + Hourleft;
            Dateleft = Dateleft - 1;
        }
        if (Dateleft < 0) {
            Dateleft = 31 + Dateleft;
            Monthleft = Monthleft - 1;
        }
        if (Monthleft < 0) {
            Monthleft = 12 + Monthleft;
            Yearleft = Yearleft - 1;
        }
        Temp = Yearleft + '年, ' + Monthleft + '月, ' + Dateleft + '天, ' + Hourleft + '小时, ' + Minuteleft + '分, ' + Secondleft + '秒'
        document.form1.left.value = Temp;
        timerID = setTimeout("showtime()", 1000);
        timerRunning = true;
    }
    var timerID = null;
    var timerRunning = false;
    function stopclock() {
        if (timerRunning)
            clearTimeout(timerID);
        timerRunning = false;
    }
    function startclock() {
        stopclock();
        showtime();
    }
    // -->  
</script>    

 

2.小时倒计时,可用于在线考试

<SCRIPT LANGUAGE="JavaScript">
    <!--
    var maxtime = 60 * 60 //一个小时,按秒计算,自己调整!  
    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "距离结束还有" + minutes + "分" + seconds + "秒";
            document.getElementByIdx_x("timer").innerHTML = msg;
            if (maxtime == 5 * 60) alert('注意,还有5分钟!');
            --maxtime;
        }
        else {
            clearInterval(timer);
            alert("时间到,结束!");
        }
    }
    timer = setInterval("CountDown()", 1000);
    //-->  
</SCRIPT>
<div id="timer" style="color:red"></div>  

3.简单倒计时(仅显示天数)

<Script Language="JavaScript">
    var timedate = new Date("January 14,2013");
    var times = "研究生<span class='wp_keywordlink_affiliate'><a href="http://lxy.me/tag/考试" title="查看 考试 中的全部文章" target="_blank">考试</a></span>";
    var now = new Date();
    var date = timedate.getTime() - now.getTime();
    var time = Math.floor(date / (1000 * 60 * 60 * 24));
    if (time >= 0) ;
    document.write("<li><font color=#DEDBDE>现在离2013年" + times + "还有: <font color=red><b>" + time + "</b></font> 天</font></li>");
</Script>  

4.复杂版倒计时,带毫秒

<script language="JavaScript" type="text/javascript">
    function d<span class='wp_keywordlink_affiliate'><a href="http://lxy.me/tag/js" title="查看 js 中的全部文章" target="_blank">js</a></span>() {
        var urodz = new Date("11/12/2008");
        var now = new Date();
        var num
        var ile = urodz.getTime() - now.getTime();
        var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
        if (dni > 1)
            num = dni + 1
        else
        if (dni == 1)
            num = 2
        else
        if (dni == 0)
            num = 1
        else
            num = 0
        document.write(num)
    }
</script>

距某某开幕式还有 [
<script language="JavaScript" type="text/javascript">d<span class='wp_keywordlink_affiliate'><a href="http://lxy.me/tag/js" title="查看 js 中的全部文章" target="_blank">js</a></span>()</script>] 天
第五个:Javascript倒计时器 - 采用系统时间自校验
这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下:

<span id="clock">00:01:11:00</span>
<input id="startB" type="button" value="start countdown!" onclick="run()">
<input id="endB" type="button" value="stop countdown!" onclick="stop()">
<br>
<input id="diff" type="text">
<input id="next" type="text">
<script language="Javascript">
   
    var normalelapse = 100;
    var nextelapse = normalelapse;
    var counter;
    var startTime;
    var start = clock.innerText;
    var finish = "00:00:00:00";
    var timer = null;

    // 开始运行  
    function run() {
        startB.disabled = true;
        endB.disabled = false;
        counter = 0;
// 初始化开始时间  
        startTime = new Date().valueOf();

// nextelapse是定时时间, 初始时为100毫秒  
// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行  
        timer = window.setInterval("onTimer()", nextelapse);
    }

    // 停止运行  
    function stop() {
        startB.disabled = false;
        endB.disabled = true;
        window.clearTimeout(timer);
    }

    window.onload = function () {
        endB.disabled = true;
    }

    // 倒计时函数  
    function onTimer() {

        if (start == finish) {
            window.clearInterval(timer);
            alert("time is up!");
            return;
        }

        var hms = new String(start).split(":");
        var ms = new Number(hms[3]);
        var s = new Number(hms[2]);
        var m = new Number(hms[1]);
        var h = new Number(hms[0]);

        ms -= 10;
        if (ms < 0) {
            ms = 90;
            s -= 1;
            if (s < 0) {
                s = 59;
                m -= 1;
            }

            if (m < 0) {
                m = 59;
                h -= 1;
            }
        }

        var ms = ms < 10 ? ("0" + ms) : ms;
        var ss = s < 10 ? ("0" + s) : s;
        var sm = m < 10 ? ("0" + m) : m;
        var sh = h < 10 ? ("0" + h) : h;

        start = sh + ":" + sm + ":" + ss + ":" + ms;
        clock.innerText = start;

// 清除上一次的定时器  
        window.clearInterval(timer);

// 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse  
        counter++;
        var counterSecs = counter * 100;
        var elapseSecs = new Date().valueOf() - startTime;
        var diffSecs = counterSecs - elapseSecs;
        nextelapse = normalelapse + diffSecs;
        diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;
        next.value = "nextelapse = " + nextelapse;
        if (nextelapse < 0) nextelapse = 0;

// 启动新的定时器  
        timer = window.setInterval("onTimer()", nextelapse);
    }
</script>

 

js:运用JavaScript写一个倒计时模版 今天更新了定时器倒计时方面的知识,希望大家多多支持! 阅读详情

相关推荐

js 实现倒计时效果setTimeout

我使用的是bootstrap 里的警告框,设置倒计时20秒后自动关闭警告框。样式截图: 代码: 1、html <div id="tip" class="alert alert-info alert-dismissible fade show" role="alert"> <strong>温馨提示:</strong><span id="sNum">20 </span>秒后自动关闭)。 <but

zcc的博客 1261

Js求现在距离某时间还有多少天时分秒

Js求现在距离某时间还有多少天多少时多少分多少秒

weixin_70799390的博客 2683

zynq7020的arm A9核降频实录

zynq arm9 cortex a9 降频

qq_40011737的博客 8765

js几种倒计时实现方式

1. 常见获取验证码60s倒计时 var second = 60; var timer; // 倒计时 function countDown(){ second--; if(second == 0){ second = 60 clearTimeout(timer) return } timer = s...

douyiqing的博客 9408

Hadoop实战:用MapReduce分析YouTube视频数据集(附完整代码)

本文提供了一个完整的Hadoop MapReduce实战教程,指导读者使用MapReduce框架分析YouTube视频数据集,统计不同视频类别的数量分布。教程涵盖从数据获取、预处理、HDFS操作到Java代码编写、作业提交及结果可视化的全流程,并附有完整代码,帮助开发者深入理解分布式计算思想。

lilh34434的博客 198

李宏毅机器学习笔记第17周_概述领域自适应(Domain Adaptation)

Domain Adaptation

peaunt1的博客 1104

JS实现倒计时功能

一、前言 网站在做活动时,会出现一个截止时间倒计时的提示。效果如图: 二、分析 ①提示时间是每秒不断变化的,需要用到定时器(setInterval) //1000表示每隔一秒变化一次,单位为毫秒 setInterval(countDown, 1000); ②三个盒子通过innerHTML进行赋值,放入时、分、秒 ③计算当前时间到截至时间的时间(时间戳:指的不是当前时间,而是距离1970年1月1号过了多少毫秒) +new Date() ④截止时间的时间戳减当前时间的时间戳 ⑤通过..

qq_48954625的博客 4万+

基于STM32F407VET6的智能巡检小车灰度循迹系统优化设计

本文详细介绍了基于STM32F407VET6主控芯片的智能巡检小车灰度循迹系统优化设计。通过将传感器输出从数字量升级为模拟量以获取更丰富的路面信息,并采用PD控制算法结合速度管理策略,有效提升了小车在复杂弯道上的循迹稳定性与适应性。文章分享了硬件电路抗干扰设计、软件滤波及实战调优经验,为嵌入式开发者提供了从“能跑”到“跑得稳”的系统性解决方案。

weixin_28273593的博客 443

js获取当前时间到凌晨的间隔多少秒,并进行页面刷新

方法一 var timmer = setInterval(function () { var curDate = new Date(); var str = curDate.toTimeString(); var t= str.substring(0,8); if (time == '14:53:40') { console.log('after '+time); clearInterval(timmer); ...

m0_61686955的博客 637

计算机组成原理实验二 运算器组成实验

事实上,ALU的设计是在全加器的基础上,对全加器功能的扩展来实现符合要求的多种算术/逻辑运算的功能。为了实现多种功能的运算,An、Bn数据是不能直接与全加器相连接的,它们受到功能变量F3—F1的制约,因此,可由An、Bn数据和功能变量F3-F1组合成新的函数Xn 、Yn,然后,再将Xn 、Yn和下一位进位Cn-1通过全加器进行全加运算以实现所需的运算功能。AC寄存器可用来存储ALU的输入以实现两个操作数的运算操作,也可以用来存储来自ALU的结果,以将这些结果反馈给ALU以进行更多的处理。

qq_63574533的博客 1450

【模型解读】【代码复现】Segment Anything Model(SAM)

Meta AI的一个新的人工智能模型,只需一次点击就能 "分割出 "任何图像中的任何物体! SAM是一个可提示的分割系统,对不熟悉的物体和图像具有zero-shot的概括性,并且不需要额外的训练。

lalula的博客 2万+

js倒计时大全(读取本地时间)

已测试,兼容各浏览器。 第一个: <scriptlanguage="JavaScript"> vartimedate=newDate("January1,2013"); varnow=newDate(); vardate=timedate.getTime()-now.getTime();...

weixin_34336526的博客 128

YOLO训练/写作脚本目录一览 | 涉及标签格式转换、数据扩充、热力图、感受野、精度曲线、数量统计等近百个脚本文件

在大家购买专栏后,便可获得全部的脚本文件。在获取到文件后,只需按照将程序放在个人项目中即可一键运行。

Limiiiing的博客 2376

JS倒计时代码

JS倒计时代码 第一种:精确到秒的javascript倒计时代码 <form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="text-align: center"> </center> </div> </fo

weixin_48002669的博客 3629

全面认识PFC和LLC

想象一下,你在拉一辆车,如果你的力气都用在推动车子前进的方向上,这样拉车会比较轻松。而如果你的力气用在不正确的方向,比如侧向、斜向,那就需要更大的力气才能推动车子。PFC就是在帮助电流“朝着正确的方向”流动,这样可以用更少的能量做更多的事情,减少无用的功率损耗。PFC负责将电流方向对齐,让电源效率更高,而LLC负责电压的高效转换,两者配合可以在更宽的负载范围内保持高效率。综上所述,PFC LLC电路是一种高效的电源转换电路,通过PFC模块和LLC模块的组合,实现了从交流电到直流电的高效转换。

weixin_43199439的博客 6098

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

javaScript实现倒计时功能

目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间,有可能生成负数,所以采用时间戳的方法得到毫秒数形式的剩余时间,然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观,稍微美化一下。 三、html代码 定义一个默认格式为JavaScript引入定义变量。 四、js内容 1.首先获取html里面的spans里的全部标签

qq_65715980的博客 1万+

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

JavaScript 逼真图片倒计时实现代码 js时间图片倒计时

JavaScript 逼真图片倒计时实现代码 js时间图片倒计时 效果图: <!doctype html> <html> <head> <meta charset="utf-8"> <head> <title>逼真图片倒计时</title> <style type="...

1万+

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

js写一个倒计时的红绿灯

html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>红绿灯...

ai_169的博客 5500

利用JavaScript实现倒计时

利用JavaScript实现倒计时 利用JS中的Date对象即可实现,创建目标时间和当前时间,利用getTime函数将两个时间转换成距离1970-01-01的秒数,相减后转化为年月日即可 利用JS中的Date对象即可实现 js代码 <script> window.onload = function() { setInterval(function() { var nowTime = new Date();//获取当前时间

Mengyu的博客 5994

JS 实现一个倒计时

你看到这篇文章时,倒计时应该已经结束了。 又到了金三银四季节,每年这个时候大家都在拼命刷题准备各大公司的招聘,这个时候我们需要对一些常见的面试题有所了解,比如今天要说的就是我在网上看到的,要你手写一个 js 倒计时效果,手写代码是什么感觉?速度 70 迈,心情真是嗨,本想好好秀一下的,谁知刚落笔就 … … 告辞!不过,多写代码确实可以保持手感,虽然刚开始会一直支支吾吾写不出,不过越写越顺手,越能发...

LightLinV的博客 1776

JS实现倒计时

JS实现倒计时 实现思路 1,通过内置时间函数实例化日期对象获取当前时间now 2,设置一个结束时间戳 end 3,求时间差end-now的毫秒数,分别取出天,小时,分钟,秒。 4,例如定时器和回调函数组合,动态更新时间,展示到页面。 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

aiyx16521的博客 3102

js实现——循环倒计时

js实现倒计时的功能 1、普通倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS倒计时</title> </head> <body> <div id="warring"></div> ...

溪中鲤信笺的博客 2169

js倒计时(格式为某天某时某分某秒)

倒计时,js的,除了jq脚本其他不需要引入 格式为 1天1时1分1秒 就可以实现倒计时 html: <span id="timebox">1天12时12分12秒</span> js: <script type="text/javascript"> $(function () { var tid = setInterval(funct...

苏程宽的博客 1685
上一篇: myeclipse修改一个方法名之后想让…
下一篇: 把String数组强制转换成其他类型数…
jarry.liu
博客等级 码龄16年 36粉丝 304原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jarry.liu

如果对您有帮助,鼓励下博主吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值