<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span id="hour">01</span>
<span>:</span>
<span id="minute">01</span>
<span>:</span>
<span id="second">59</span>
</body>
<script type="text/javascript" src = "../jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var getHour = $('#hour').text();
var getMin = $('#minute').text();
var getSec = $('#second').text();
setInterval(function() {
var allTime = parseInt(getSec) + parseInt(getMin * 60) + parseInt(getHour * 3600);
allTime--;
if (getSec > 0) {
getSec--;
if (getSec < 10) {
getSec = '0' + getSec;
// console.log(getSec)
}
$('#second').html(getSec)
} else {
getSec = 59;
}
if (allTime % 60 == 0) {
getMin--;
// console.log(getMin)
if (getMin >= 0) {
if (getMin < 10) {
getMin = '0' + getMin;
}
$('#minute').html(getMin)
} else {
getMin = 30;
$('#minute').html(getMin)
}
}
if (allTime % 3600 == 0) {
getHour--;
if (getHour >= 0) {
if (getHour < 10) {
getHour = '0' + getHour;
}
$('#hour').html(getHour)
} else {
getHour = 30;
$('#hour').html(getHour)
}
}
}, 1)
</script>
</html>

js 实现倒计时效果的更多相关文章

  1. JS实现倒计时效果，并退出系统

    背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...

  2. js实现倒计时效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  3. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  4. (转)js实现倒计时效果(年月日时分秒)

    原文链接:http://mengqing.org/archives/js-countdown.html 之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用.(用的是张鑫旭写的一个倒计时,稍作 ...

  5. js日期倒计时效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js制作倒计时效果

    该程序可以计算任意指定的两个日期中间的差值. 本例子的指定日期是2017年1月1日,当前时间是2016年10月21日:计算它们之间的差值,在网页上显示如图所示: 关键部分代码: var nowtime ...

  7. js 验证码倒计时效果

    function settime(obj) { if(second == 0){ obj.removeAttribute("disabled"); obj.value=" ...

  8. 用js实现倒计时效果

    首先获得两个时间的时间戳 var newdate = new Date('2021-01-22 21:25:00').getTime(); var olddate = new Date().getTi ...

  9. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. IOS——触摸事件 视图检测和事件传递

    iPhone上有非常流畅的用户触摸交互体验,能检测各种手势:点击,滑动,放大缩小,旋转.大多数情况都是用UI*GestureRecognizer这样的手势对象来关联手势事件和手势处理函数.也有时候,会 ...

  2. Nodejs进阶：express+session实现简易身份认证

    本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 文档概览 本文基于express.express-session ...

  3. Java Tomcat 启动失败的解决思路

    好久没写新博文了,离自己要求的每年几篇的目标也是渐行渐远. 最近在学习Java,也是从基础学习,因为我是一个.net开发人员,所以学习的成本相对低些.Java JDK,JRE,Tomact 的安装及配 ...

  4. eclipse中AndroidA工程依赖B工程设置

    假设library为B工程,而SlideMenuTest为A工程,且SlideMenuTest需要依赖library工程(减少jar包形式的修改麻烦). 需要简单的设置即可. 1.B工程设置为libr ...

  5. Java多线程中线程间的通信

    一.使用while方式来实现线程之间的通信 package com.ietree.multithread.sync; import java.util.ArrayList; import java.u ...

  6. [C#学习]1.Hello World

    在很多时候我们都是被helloworld带入编程的世界的,所以这句话应该算是我们程序员最熟悉的一句话了把.所以在这里,那我也照样以helloworld为例子来引入我们的C#学习. 在往常的hellow ...

  7. <java>枚举的简单介绍

    1.枚举,enum关键字,相当于public final static. 2.举例: 首先定义了一个名为spiciness的枚举类型. public enum Spiciness { NOT, MIL ...

  8. 【JavaScript】让事件支持先发布后订阅

    之前写过一个的事件管理器,就是普通的先订阅后发布模式.但实际场景中我们需要做到后订阅的也能收到发布的消息.比如我们关注微信公众号,还是能看到历史消息的.类似于qq离线消息,我先发给你,你登录了就能收到 ...

  9. 从零开始构建一个的asp.net Core 项目（二）

    接着上一篇博客继续进行.上一篇博客只是显示了简单的MVC视图页,这篇博客接着进行,连接上数据库,进行简单的CRUD. 首先我在Controllers文件夹点击右键,添加->控制器 弹出的对话框中 ...

  10. springboot(十)：邮件服务

    springboot仍然在狂速发展,才五个多月没有关注,现在看官网已经到1.5.3.RELEASE版本了.准备慢慢在写写springboot相关的文章,本篇文章使用springboot最新版本1.5. ...