一、实例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Jquery实现定时器案例</title><style>#demo {width: 300px;margin: 10% auto;}.time {display: block;width: 300px;height: 50px;line-height: 50px;text-align: center;color: white;background: green;font-size: 30px;}.btn {width: 100%;margin-top: 30px;text-align: center;}button {color: white;font-size: 16px;border: 0;}button:nth-child(1) {background: green;}button:nth-child(2) {background: red;}button:hover {background: gray;}</style>
</head><body><div id="demo"><div><span class="time">00:00:00</span></div><div class="btn"><button onclick="start()">开始计时</button><button onclick="stop()">停止计时</button></div></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>//将秒转换为时分秒function formatSeconds(value) {var hours = 0; // 时var minute = 0; // 分var second = parseInt(value); // 秒if (second > 60) {minute = parseInt(second / 60);second = parseInt(second % 60);if (minute > 60) {hours = parseInt(minute / 60);minute = parseInt(minute % 60);}}//如果值小于10，在前面补零if (hours < 10) {hours = "0" + hours;}if (minute < 10) {minute = "0" + minute}if (second < 10) {second = "0" + second;}return hours + ":" + minute + ":" + second;}//定时器var timer;//累加器var count;//开始计时function start() {console.log("开始计时");//清除定时器,防止多个定时器执行clearTimeout(timer);//初始化count值count = 0timer = setTimeout(function() {++count;let result = formatSeconds(count);$(".time").html(result);}, 1000);}//停止计时function stop() {console.log("停止计时");//清除定时器clearTimeout(timer);$(".time").html(formatSeconds(0));}</script></body></html>

二、运行结果

Jquery实现定时器实例相关推荐

ajax请求返回json实例,Jquery Ajax 学习实例2 向页面发出请求返回JSon格式数据
一.AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender, ...
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
java timer指定线程池_Java 定时器（Timer）及线程池里使用定时器实例代码
java Timer定时器简单实例代码:public class Test { public static void main(String[] args) { // Timer定时器 Timer ...
jquery 瀑布流实例最流行瀑布流图片展示
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示.用户可以无限浏览图片或内容无限加载瀑布流 ...
jquery $.each()函数编程实例五则图解
1 输出ul中的每个li 2 遍历一维数组 3 遍历二维数组 4 处理json 5 处理dom元素最后一个实例的代码:其他代码在图上: <html> <head> <s ...
jQuery滑动效果实例
parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选.获取的是集合. HTML 代码: <html><bod ...
javascript事件之：jQuery事件中实例对象和拓展对象之间的通信
我们总结过jQery事件中的实例原型对象对外接口和拓展对象,现在我们看看他们是如何进行通信联系的. 先来看便捷方法: 1 //调用的还是实例对象下的on()和trigger() 2 jQuery.ea ...
jquery php 登录验证手机号码,jQuery电话号码验证实例
本文实例为大家分享了jQuery电话号码验证的具体代码,供大家参考,具体内容如下电话号码验证: //移动号码归属地支持号段:134 135 136 137 138 139 147 150 151 1 ...
「C++ MFC」 “多媒体定时器实例”讲解
一.前言本博客在MFC工程中,完成了对创建多媒体定时器和读文档功能的应用. 二.技术实现首先要包含MMSystem.h头文件,还要添加以下代码 #pragma comment(lib," ...

Jquery实现定时器实例

一、实例代码

二、运行结果

Jquery实现定时器实例相关推荐

最新文章

热门文章