jquery倒计时插件实现一个按钮点击倒计时回调效果代码
代码语言：html
所属分类：表单美化
代码描述：jquery倒计时插件实现一个按钮点击倒计时回调效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轻量级倒计时demo</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/leftTime.min.js"></script>
<style type="text/css">
*,html,body{padding:0;margin:0;font-size:12px;outline: none;font-family:"微软雅黑",arial;}
.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>
</head>
<body>
<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>
<tr>
<th colspan="3">距2019/01/22 23:45:24倒计时</th>
</tr>
<tr>
<td class="colspan-a">
<div class="data-show-box" id="dateShow1">
<span class="date-tiem-span d">00</span>天
<span class="date-tiem-span h">00</span>时
<span class="date-tiem-span m">00</span>分
<span class="date-s-span s">00</span>秒
</div>
</td>
<td class="colspan-b"></td>
<td class="colspan-c">
<pre>$.leftTime("2019/01/22 23:45:24",function(d){
if(d.status){
//d.status 状态
//d.d 天
//d.h 时
//d.m 分
//d.s 秒
}
});</pre>
</td>
</tr>
<script type="text/javascript">
$(function(){
//日期倒计时
$.leftTime("2019/01/22 23:45:24",function(d){
if(d.status){
var $dateShow1=$("#dateShow1");
$dateShow1.find(".d").html(d.d);
$dateShow1.find(".h").html(d.h);
$dateShow1.find(".m").html(d.m);
$dateShow1.find(".s").html(d.s);
}
});
});
</script>
<tr>
<th colspan="3">距时间段倒计时</th>
</tr>
<tr>
<td class="colspan-a">
<span id="dataInfoShow_1"></span>
<div class="data-show-box" id="dateShow2">
<span class="date-tiem-span d">00</span>天
<span class="date-tiem-span h">00</span>时
<span class="date-tiem-span m">00</span>分
<span class="date-s-span s">00</span>秒
</div>
</td>
<td class="colspan-b">
<div class="">
当前系统时间：<select class="date-select-c" id="getTimeSct_1">
<option value="0">正常</option>
<option value="1">快1分钟</option>
<option value="5">快5分钟</option>
<option value="-5">慢5分钟</option>
</select><br />
今日开始时间：<select class="date-select-a" id="getTimeSct_2"></select>时<select class="date-select-b" id="getTimeSct_3"></select>分<br />
结束时间：<select class="date-select-a" id="getTimeSct_4"></select>时<select class="date-select-b" id="getTimeSct_5"></select>分<br />
选择天数：<select class="date-select-c" id="getTimeSct_6">
<option value="0">今天</option>
<option value="1" selected="selected">明天</option>
<option value="2">后天</option>
</select><br />
是否跳过开始时间：<select class="date-select-c" id="getTimeSct_7">
<option value="false" selected="selected">否</option>
<option value="true">是</option>
</select><br />
未满10时是否加0：<select class="date-select-c" id="getTimeSct_8">
<option value="false">否</option>
<option value="true" selected="selected">是</option>
</select><br />
<button type="button" class="testBtn-a" id="dateBtn2">立即执行</button>
</div>
</td>
<td class="colspan-c">
<pre>var data={
nowdate:系统时间,
startdate:开始时间，格式为：h:m或日期格式,
enddate：结束时间，格式为：h:m或日期格式,
setday:提前天数，例如：0为当天，1为明天,
init:是否跳过开始时间，默认是false，当为true倒计时跳过开始时间
}
$.leftTime(data,function(d){
if(d.status){
//d.step 0表示普通倒计时，1表示未过开始时间，2表示已过开始时间未过结束时间，3表示已过结束时间；
}
},//未满10时是否加0，值false||true，默认值为true);
</pre>
</td>
</tr>
<script type="text/javascript">
$(function(){
//时间段
function checkIFn(i){
if(i < 10) {
i = "0" + i;
}
return i;
}
for(var i=0;i<24;i++){
$("select.date-select-a").append('<option value="'+checkIFn(i)+'" '+(i==9?'selected="selected"':"")+'>'+checkIFn(i)+'</option>');
}
for(var i=0;i<60;i++){
$("select.date-select-b").append('<option value="'+checkIFn(i)+'">'+checkIFn(i)+'&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0