<!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. Elasticsearch高级搜索排序（ 中文+拼音+首字母+简繁转换+特殊符号过滤）

    一.先摆需求: 1.中文搜索.英文搜索.中英混搜   如:"南京东路","cafe 南京东路店" 2.全拼搜索.首字母搜索.中文+全拼.中文+首字母混搜   如 ...

  2. Extjs6（二）——用extjs6.0写一个系统登录及注销

    本文基于ext-6.0.0 一.写login页 1.在view文件夹中创建login文件夹,在login中创建文件login.js和loginController.js(login.js放在class ...

  3. MOSFET使用与H桥驱动问题

    0.小叙闲言 最开始学习三极管的时候,很注重它的工作原理,后来到了实际应用,就直接把三极管或MOSFET直接当作一个开关器件使用.直到前这几天,接触到MOSFET组成的H桥驱动电路时,发现它纯当作一个 ...

  4. NodeJS 中npm包管理工具

    NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从 ...

  5. 对于Bootstrap的介绍以及如何使用

    Bootstrap是HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 可以自动适配任何设备,解决了响应式实现的繁琐问题,可以修改其中的各种样式,同样,其内部功能的强 ...

  6. linux系统中.bashrc的妙用

    一.有何作用 .bashrc - The individual per-interactive-shell startup file. .bashrc - 主要保存个人的个性化设置,如命令别名.路径等 ...

  7. 工具类总结---（五）---SD卡文件管理

    里面注释很清楚了... package cgjr.com.cgjr.utils; import android.content.Context; import android.graphics.Bit ...

  8. Android开发之布局--RelativeLayout布局

    RelativeLayout 相对布局 true或false属性 Layout_centerHorizontal   当控件位于父控件的横向中间位置 Layout_centerVertical   当 ...

  9. hdu3336 Count the string kmp+dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3336 很容易想到用kmp 这里是next数组的应用 定义dp[i]表示以s[i]结尾的前缀的总数 那么 ...

  10. 深入理解Java常用类----String

         Java中字符串的操作可谓是最常见的操作了,String这个类它封装了有关字符串操作的大部分方法,从构建一个字符串对象到对字符串的各种操作都封装在该类中,本篇我们通过阅读String类的源码 ...