js 实现计数器功能

最新推荐文章于 2022-12-16 15:11:24 发布
最新推荐文章于 2022-12-16 15:11:24 发布
阅读量1.2k 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48604432/article/details/111603771
版权

1.运用 setInterval()定时器计算秒数

<!DOCTYPE html>
<html>
  <head>
    <title>JS实现计数器</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style type="text/css">
       
    </style>
	  </head>
	<body>
		  <div style='color:red;font-size:50px'><span id='hours'>00</span> :<span id='minutes'>00</span>:<span id='seconds'>00</span></div>
	   时<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " id="hour" />
		 分<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " id="minute" />
		 秒<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d]/g,'') " id="second" />
	   <button onclick='start()' id='startt'>开始</button>
	   <button onclick="suspend()">暂停</button>
	   <script type="text/javascript">
		function timer() {
		t=setInterval(() => {
			
			var secondtime=$("#seconds").text()//秒
			var minutetime=$("#minutes").text()//分
			var hourtime=$("#hours").text()//时
			
			if(secondtime.substring(1,0)==0&&secondtime.substring(2,1)>0){
				var secondtimes=secondtime.substring(2,1)
				$("#seconds").text('0'+(secondtimes-1))
			}else if(secondtime.substring(1,0)==0&&secondtime.substring(2,1)==0){
				
				if(minutetime.substring(1,0)!=0||minutetime.substring(2,1)!=0||hourtime.substring(1,0)!=0||hourtime.substring(2,1)!=0){
					$("#seconds").text(59)
					if(minutetime.substring(1,0)==0&&minutetime.substring(2,1)>0){
						var minutetimes=minutetime.substring(2,1)
						$("#minutes").text('0'+(minutetimes-1))
						console.log(minutetime)
					}else if(minutetime.substring(1,0)==0&&minutetime.substring(2,1)==0){
						console.log(hourtime)
						if(hourtime.substring(1,0)!=0||hourtime.substring(2,1)!=0){
							$("#minutes").text(59)
							if(hourtime.substring(1,0)==0&&hourtime.substring(2,1)>0){
								var hourtimes=hourtime.substring(2,1)
								$("#hours").text('0'+(hourtimes-1))
							}else if(hourtime.substring(1,0)==0&&hourtime.substring(2,1)==0){
							
								
							}else if(hourtime.substring(1,0)!=0&&hourtime>10){
								$("#hours").text($("#hours").text()-1)
							}else{
								$("#hours").text('0'+9)
							}
						}else{
							console.log(minutetime)
							$("#minutes").text('0'+0)
						}
						console.log(minutetime)
					}else if(minutetime.substring(1,0)!=0&&minutetime>10){
						$("#minutes").text($("#minutes").text()-1)
					}else{
						$("#minutes").text('0'+9)
						console.log(minutetime)
					}
				}else{
					$("#seconds").text('0'+0)
				}
				
			}else if(secondtime.substring(1,0)!=0&&secondtime>10){
				$("#seconds").text($("#seconds").text()-1)
			}else{
				$("#seconds").text('0'+9)
			}
		}, 1000)}
	       function start(){
			   if($("#second").val()==''){
			   	$("#second").val(0)
			   }
			   if($("#minute").val()==''){
			   	$("#minute").val(0)
			   }
			   if($("#hour").val()==''){
			   	$("#hour").val(0)
			   }
			   if($("#second").val()>60){
			   	alert('秒不能大于60')
				return
			   }
			   if($("#minute").val()>60){
			   	alert('分不能大于60')
			   				return
			   }
			   if($("#hour").val()>24){
			   	alert('时不能大于24')
			   				return
			   }
			    $("#startt").attr("disabled",true);//开始按钮禁用
			   //时-获取输入框的值   小于10，在前面加0
			   if($('#hour').val().length<2){
				    $("#hours").text('0'+$('#hour').val());
			   }else{
				   $("#hours").text($('#hour').val());
			   }
			   //分-获取输入框的值   小于10，在前面加0
			   if($('#minute').val().length<2){
			   		 $("#minutes").text('0'+$('#minute').val());
			   }else{
			   		$("#minutes").text($('#minute').val());
			   }
			   //分-获取输入框的值   小于10，在前面加0
			   if($('#second').val().length<2){
			   		 $("#seconds").text('0'+$('#second').val());
			   }else{
			   		$("#seconds").text($('#second').val());
			   }
				timer()
	       }
	       //暂停
	       function suspend(){
	       	clearInterval(t)//关闭定时器
			 $("#startt").attr("disabled",false);//开始按钮禁用取消
	       }           
	   </script>
	</body>
</html>

视图
问题：没有监听计数到00:00:00时，计数器关闭

很久没用原生js写过东西了，代码有点乱，有不足的地方希望指出

倔强的烤马铃薯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
原生JS实现一个好看计数器
越陌度阡
06-12 1320
今天给大家分享一个用原生JS实现的好看计数器，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现一个好看计
vuex实现简易计数器
09-01
主要为大家详细介绍了vuex实现一个简易计数器,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
“onkeyup”=按键抬起触发，“onafterpaste”=粘贴之后触发
weixin_48503426的博客
12-16 243
“onkeyup”=按键抬起触发，“onafterpaste”=粘贴之后触发
JS前台效果
weixin_34080951的博客
06-29 336
 最新的在上面 2014年3月3日14:46:46 百分比思路 function fixWidth(percent) { return document.body.clientWidth * percent; //这里你可以自己做调整 }     2014年3月3日11:44:00 var O2String = function (O) { ...
javascript限制脚本输入大全
sunchaohuang的专栏
02-20 3077
1.只能输入汉字的 2.只能输入数字的：    简易禁止输入汉字输入数字和小数点：onkeyup="value=value.replace(/[^/d{1,}/./d{1,}|/d{1,}]/g,)"  javascript 只能输入数字和":".2007-11-24 15:50只能数字和":",例如在输入时间的时候可以用到
onkeyup和onafterpaste键盘输入限制
mnmnmnmiiiin_mi的博客
04-27 1058
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) 2.只能输入数字,能输小数点. 3.数字和小数点方法二 4.只能输入字母和汉字 5.只能输入英文字母和数字,不能输入中文 6.只能输入数字和英文chun 7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号: 57) && event.keyCode!=46 || /\.\d
jsp网页计数器实现示例
01-20
代码如下: //过滤器类 public class EcondingFilter implements Filter { private String charset = null; private ServletContext context = null; private String path = “”; /** * 在销毁前将数据存入本地文件...
js, jQuery实现全选、反选功能
12-29
js ，jq实现全选、反选功能： js:思路：1.点击全选按钮实现，下面内容全选，与反选 2.下面有一个没有选中时，全选按钮不勾选，当全部选中时才全选。这里引入一个计数器，来判断是否全部选中。 <!DOCTYPE html> &...
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
11-20
效果图展示，感觉不错可以参考实例代码。 具体代码如下所示： <!DOCTYPE html> <html lang="en">...meta name="viewport" content="width=device-width, initial-scale=1.0">...button disabled
java简易计数器.doc
09-30
Java简易计数器程序设计 Java简易计数器程序设计是使用Java语言开发的一款简易的计算器软件。该程序使用了Java的AWT...3. 计算功能有限：Java简易计数器程序设计的计算功能较有限，例如，不支持高级数学运算。
一个用JS做的简易计算器
05-06
一个用JS做的简易计算器,不是很完整，有兴趣的朋友可扩展一下
漂亮的计数器翻页效果纯JS
08-23
漂亮的计数器翻页效果，纯JS代码
JS定时器实现数值从0到10来回变化
10-20
最近做项目遇到一需求要求实现数值从0到10来回变化，下面小编给大家分享下实现代码，需要的朋友参考下
网站首页访问量计数器
09-23
网站首页访问量计数器，实现计数累加，简单易懂
JS中的计数器和计时器
总结复盘，才能不迷失自己！
11-26 195
# 计数器 var getid =(function (){ var i=2235765; return function (){ return Math.floor(i = i+0.4); }; })(); var getx =(function (){ var p=2234344; return function (){ return Math.floor(p = .
onkeyup+onafterpaste
程序员爱酸奶
10-12 4542
onkeyup 事件 定义和用法 onkeyup 事件会在键盘按键被松开时发生。 提示：与onkeyup 事件相关的事件发生次序： onkeydown onkeypress onkeyup<li>手机号码: <input placeholder="请输入手机号码" maxlength="11" name="phone" id="phone" value="" onkeyup="thi
正则表达式验证输入框是否为数字
czs1012的专栏
12-02 8488
正则表达式1 首先这是个正则式验证，用来验证输入值的规则； 当输入值的键盘抬起时触发这个事件。this.value表示此输入框的值，/\D/g为正则表达式，用来匹配所有非数字字符； 此句功能为：将输入值为非数字的字符替换为空； 正则表达式2 中/[^0-9]/g这里的g是何含义？onafterpaste有何用途？ 1./[^0-9]/g是正则表达式，这里加g是表示会替换字符串中
力扣计数器(javascript)
最新发布
01-08
通过这种方式，闭包函数实现了一个计数器的功能。 在示例中，我们首先通过`createCounter(0)`创建了一个计数器`counter`，初始值为0。然后，每次调用`counter()`函数时，计数器的值会自增并返回。所以，连续调用三...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值