倒计时可配置

最新推荐文章于 2021-01-11 23:58:21 发布

dongsdh

最新推荐文章于 2021-01-11 23:58:21 发布

阅读量100

点赞数

分类专栏：时间处理

本文链接：https://blog.csdn.net/dongsdh/article/details/103246763

版权

时间处理专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/layui.css"/>
	</head>
	<body>
		<div class="box">
			<button type="button" class="layui-btn" id="btn">按钮</button>
		</div>
		<script src="jquery-3.1.1.min.js"></script>
		<script src="layui.all.js"></script>
		<script>
			var data={
				textbefor:'获取验证码吧',   //按钮默认文字
				time:15,                   //计时秒数
				istrigger:'click',         //触犯方法
				isdoingcl:'false',         //计时正在进行是否可以点击
				textafter:'重新获取验证码'  //计时结束文字
			}
			isbundfun(data);
			function isbundfun(data){
				data._time = data.time;
				$('#btn').text(data.textbefor)
				if(data.istrigger=='render'){
					fun(data);
				}
				$("body").on("click","#btn",function(){
					let tx = $(this).text();
					console.log('=='+tx);
					if(data.isdoingcl=='false' && tx > 0){
						console.log('正在倒计时默认不能点击');
					}else if(data.isdoingcl == 'true' && tx > 0){
					    layer.msg("正在倒计时,干点啥",{icon:0,time:2000}); 
					}else{
						fun(data);
					}
				})
			}
			function fun(data){
				console.log(data.time);
				if (data.time == 0) { 
					data.time = data._time
			        $('#btn').text(data.textafter)
			        $('#btn').removeClass('layui-btn-disabled')
			        return;
			    } else { 
			        data.time--;
			        $('#btn').text(data.time);
			        $('#btn').addClass('layui-btn-disabled')
			    } 
			    setTimeout(function() { 
			        fun(data);
			    },1000);
			}
		</script>
	</body>
</html>

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时可配置

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/layui.css"/> </head> &lt...
复制链接

扫一扫

专栏目录