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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
代码整洁之道(重构)
Oct 25 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
用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
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
php实现Mysql简易操作类
2015/10/11 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python实现调用其他python脚本的方法
2014/10/05 Python
python绘制多个曲线的折线图
2020/03/23 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python元组的概念知识点
2019/11/19 Python
python实现视频读取和转化图片
2019/12/10 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
技术合作协议书范本
2014/04/18 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle