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 相关文章推荐
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 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
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
python使用scrapy解析js示例
2014/01/23 Python
python绘制直线的方法
2018/06/30 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Python super()方法原理详解
2020/03/31 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
秋季红领巾广播稿
2014/01/27 职场文书
教师一岗双责责任书
2014/04/16 职场文书
考试诚信承诺书
2014/05/23 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫