jQuery实现最简单实用的分秒倒计时


Posted in Javascript onFebruary 05, 2017

本文实例为大家分享了jQuery分秒倒计时的具体代码,供大家参考,具体内容如下

实现原理:设置个定时器,自定义分钟和59秒。一秒钟秒数减1秒,60秒就减1分钟。

下面是全部代码

<!DOCTYPE HTML>
<html>
 
<head>
 <meta charset="UTF-8" />
 <title>pro.html</title>
 <style type="text/css">
 </style>
 <!--这里是自己本地的jquery-->
 <script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
 <script>$(function(){
 var m=69;
 var s=59;
 setInterval(function(){
  if(s<10){
  //如果秒数少于10在前面加上0
   $('#time').html(m+':0'+s);
  }else{
   $('#time').html(m+':'+s);
  }
  s--;
  if(s<0){
  //如果秒数少于0就变成59秒
   s=59;
   m--;
  }
 },1000)
})</script>
</head>
 
<body>
 <p id="time">60:00</p>
</body>
 
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
用jquery的attr方法实现图片切换效果
Feb 05 #Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 #Javascript
JS动态生成年份和月份实例代码
Feb 04 #Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 #Javascript
js常用DOM方法详解
Feb 04 #Javascript
JavaScript数组操作详解
Feb 04 #Javascript
jQuery使用方法
Feb 04 #Javascript
You might like
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
纯javascript响应式树形菜单效果
2015/11/10 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python下rrdtool模块的基本使用方法
2015/11/13 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python实现随机漫步方法和原理
2019/06/10 Python
pip安装python库的方法总结
2019/08/02 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python3 logging日志封装实例
2020/04/08 Python
如何解决python多种版本冲突问题
2020/10/13 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
纠风工作实施方案
2014/03/15 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers