<!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. Arduino LiquidCrystal Library Bug Report #174181

    Arduino LiquidCrystal Character LCD Driver Library BUG Report #174181 by Conmajia Effected Devices H ...

  2. SSH整合总结（xml与注解）

    本人自己进行的SSH整合,中间遇到不少问题,特此做些总结,仅供参考. 一.使用XML配置: SSH版本 Struts-2.3.31 Spring-4.3.5 Hibernate-4.2.21 引入ja ...

  3. NuGet（Nuget Packages）

    Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基于.NET Framework的应用时,Nuget能把在项目中添加.移除和更新引 ...

  4. Linux防火墙配置—允许转发

    一.实验目标 在上一次"Linux基础网络搭建实验"中,内.外网虚拟机之所以能Ping通,是因为暂时关闭了防火墙,然而现实中这样操作显然存在很大的安全隐患,所以本次实验在上次实验的 ...

  5. Android SQLite与ListView的简单使用

    2017-04-25 初写博客有很多地方都有不足,希望各位大神给点建议. 回归主题,这次简单的给大家介绍一下Android SQLite与ListView的简单使用sqlite在上节中有介绍,所以在这 ...

  6. java获得路径的多种方式

    本文讲解java语言中获得运行时路径的多种方式,包括java项目.java web项目.jar.weblogic等多种场景. 一.this.getClass().getClassLoader().ge ...

  7. 推送一个已有的代码到新的 gerrit 服务器

    1.指定项目代码库中迭代列出全部ProductList(.git)到pro.log文件中 repo forall -c 'echo $REPO_PROJECT' | tee pro.log pro.l ...

  8. linux 内核的spinlock

    spinlock设计成了三层,第一层是接口,第二层raw实现层,第三层是CPU平台层.在第二层raw实现层提供了两个分支,分别是单CPU和多CPU(核).第三层是不同CPU的锁操作实现.raw层除了调 ...

  9. 用VsCode编辑TypeScript

    文地址:https://code.visualstudio.com/Docs/languages/typescript TypeScript是Javascript的超集,它提供了类.模块.接口来帮助你 ...

  10. Alsa 读取wave文件，并播放wave 文件

    对于一个wave文件,如果需要播放,涉及到几个方面 1.对于wave文件的解析 2.通过解析wave文件,将得到的参数(主要是sampfrequency, bitsperSample,channel) ...