轻量级倒计时插件leftTime.js

轻量级倒计时插件leftTime.js

添加时间:2021-02-21 18:10:36
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:定时
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款轻量级倒计时插件leftTime.js,演示页面给出了6种倒计时效果,并贴出了对应的代码方便调用。
轻量级倒计时插件leftTime.js
分类:日期时间 > 定时 难易:初级

页面的head部分,需引入jQuery库和倒计时插件,并设置好页面的样式,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/leftTime.min.js"></script>
<style type="text/css">
*,html,body{padding:0;margin:0;font-size:12px;outline: none;font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
.wrap-box{width:1100px;min-width:1100px; margin:6% auto;}
h1{line-height:2; font-size:30px; text-align: center; margin-bottom:40px;}
 table.data-table{width:100%;}
 table.data-table tr:odd{background:#dcebff;}
 table.data-table td{line-height:24px;padding:3px;vertical-align: top;}
 table.data-table th{height:50px;line-height:50px;padding: 3px;font-size:20px;text-align: left;}
 table.data-table .colspan-a{width:35%;}
 table.data-table .colspan-b{width:25%;}
 table.data-table .colspan-c{width:40%;}
 table.data-table td pre{display: block; padding:5px; border: 1px solid #00caff;background: #f8fcff;text-align: left;}
.testBtn-a{display: inline-block;height:30px;line-height:30px;padding:0 10px; border:0; border-radius:5px;color:#fff;background:rgb(65,133,244);cursor: pointer;}
.testBtn-a.on{background:#c9c9c9;color:#666;cursor: default;}
.data-show-box{line-height:30px;}
.date-tiem-span,.date-s-span{display: inline-block;font-size:18px; width:36px; height:30px;line-height:30px; text-align: center; color:#fff; border-radius:5px;}
.date-tiem-span{ background:#333;}
.date-s-span{ background:#f00;}
.date-select-a{margin-right:5px;}
</style>

页面的body部分,需设置好6种倒计时的对应内容,部分代码如下:

<div class="wrap-box">
	<h1>轻量级倒计时插件</h1>
	<table cellpadding="0" cellspacing="0" class="data-table">
		<tr>
			<th colspan="3">60秒倒计时</th>
		</tr>
		<tr>
			<td class="colspan-a"><button type="button" class="testBtn-a" id="dateBtn1">获取验证码</button></td>
			<td class="colspan-b"></td>
			<td class="colspan-c">
				<pre>$.leftTime(60,function(d){
//d.status,值true||false,倒计时是否结束;
//d.s,倒计时秒;
});</pre>
				
			</td>
		</tr>
		<script type="text/javascript">
			$(function(){
				//60秒倒计时
				$("#dateBtn1").on("click",function(){
					var _this=$(this);
					if(!$(this).hasClass("on")){
						$.leftTime(60,function(d){
							if(d.status){
								_this.addClass("on");
								_this.html((d.s=="00"?"60":d.s)+"秒后重新获取");
							}else{
								_this.removeClass("on");
								_this.html("获取验证码");
							}
						});
					}
				});
			});
		</script>
		<tr>
			<th colspan="3">120秒倒计时</th>
		</tr>
		<tr>
			<td class="colspan-a"><button type="button" class="testBtn-a" id="dateBtnB">获取验证码</button></td>
			<td class="colspan-b"></td>
			<td class="colspan-c">
				<pre>$.leftTime(120,function(d){
//d.status,值true||false,倒计时是否结束;
//parseInt(d.m)*60+parseInt(d.s))+"秒后重新获取";
},true);</pre>
				
			</td>
		</tr>
		<script type="text/javascript">
			$(function(){
				//120秒倒计时
				$("#dateBtnB").on("click",function(){
					var _this=$(this);
					if(!$(this).hasClass("on")){
						$.leftTime(120,function(d){
							if(d.status){
								_this.addClass("on");
								_this.html((parseInt(d.m)*60+parseInt(d.s))+"秒后重新获取");
							}else{
								_this.removeClass("on");
								_this.html("获取验证码");
							}
						},true);
					}
				});
			});
		</script>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:轻量级倒计时插件leftTime.js

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.098156s