登陆功能点击获取动态倒计时 jq插件

最新推荐文章于 2023-08-15 14:32:00 发布

前端小白鲨

最新推荐文章于 2023-08-15 14:32:00 发布

阅读量246

点赞数

分类专栏： web前端技术 javascript 移动开发

本文链接：https://blog.csdn.net/m0_37909187/article/details/79287565

版权

web前端技术同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

移动开发

12 篇文章 1 订阅

订阅专栏

在需求中有这种功能，例如登陆功能，输入账号，然后获取验证码，验证码马上变成倒计时功能都是一分钟

今天就写一个插件直接调用可以；

新建一个页面，

1、首先引入jq，在引入插件js ，取名就叫做 tab.js 里面的内容就是看下面js代码很简单

第一个插件的方法就是倒计时，如果还要实现别功能的话就可以在第二个插件里面实现

/* zdl 2017-12-23
 * 获取验证码倒计时插件
 * 
 */
(function($){
//	第一个插件方法 倒计时
     $.fn.changeStyle = function(t){
     	 var count = 60;
         var countdown = setInterval(function(){CountDown(t)} , 1000);
     	function CountDown(t) {
			t.attr("disabled", true);
			t.val("" + count + "s");
			if(count == 0) {
				t.val("重新获取").removeAttr("disabled");
				clearInterval(countdown);
			}
			count--;
		} 
		
     };
     
     
    //第二个插件方法，需要实现的功能呢 
     $.fn.changeUpload = function(){
     	console.log('第二个插件名称');
     	console.log(this)
     };

}(jQuery));

2、页面内容如下：就一个普通的 input按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery1.8.3.min.js"></script>
		<script src="js/tab.js"></script>
		<title></title>
		<style>
		 .axc_yzm {
		 	width: 33.3%;
		    border-radius: 3px;
		    border: none;
		    height: 35px;
		    outline: none;
		    cursor: pointer;
		    line-height: 35px;
		    display: block;
		    width: 30%;
		    text-align: center;
		    background-color: rgb(18,171,62);
		    color: #FFFFFF;
		    margin: 0 5% 0 0;
		}
		
		</style>
	</head>
	<body>
		<input type="button" value="点击获取" id="btn_yzm" class="axc_yzm" />
	</body>

</html>

在页面调用方法

	
	<script>
		$(function(){
			//此处调用插件 获取按钮id，添加事件
			$('#btn_yzm').on('click', function(){
                        //用当前的按钮也就是this调用插件方法 changeStyle（）然后在传入参数就可以了
				$(this).changeStyle($(this));
			})
			
			$('#btn').on('click', function(){
//				$(this).changeStyle($(this));
				$(this).changeUpload();
			});
			
		})
	</script>

教程很短,不是太多，直接拿去用就可以，有什么好的插件功能，一起共分享

前端小白鲨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登陆功能点击获取动态倒计时 jq插件

在需求中有这种功能，例如登陆功能，输入账号，然后获取验证码，验证码马上变成倒计时功能都是一分钟今天就写一个插件直接调用可以；新建一个页面，1、首先引入jq，在引入插件js ，取名就叫做 tab.js 里面的内容就是看下面js代码很简单第一个插件的方法就是倒计时，如果还要实现别功能的话就可以在第二个插件里面实现/* zdl 2017-12-23 * 获取验证码倒计时插件 * ...
复制链接

扫一扫