Jquery插件完成点击获取验证码后60秒内不准重新获得,发送短信验证码后60秒倒计时

通过jquery.cookie.js插件能够神速完结“点击获取验证码后60秒内不准重新赢得(防刷新)”的效果与利益

jQuery小例子

应用前,请先援用jquery

 

1,map遍历数组

 

澳门葡京 , 

复制代码

//=========for循环遍历==========

var arr[1,2,3,4,5];

for(var i=0;i<=arr.length;i++)

{

 arr[i]=arr+1;

}

//对数组中的各种成分加1

var scores = [10, 20, 30, 40, 50];

var newScore = [];

for (var i = 0; i < scores.length; i++) {

    newScore[newScore.length] = scores[i] + 1;

}

//=========map遍历============

$.map(arr,function(ele,index))

{//ele代表成分,index代表索引

 alert(ele+’=====’+index);

});

//对数组中索引大于3的元素翻倍

var arr = [1, 2, 4,2,3,4,5,6,5];

arr = $.map(arr, function (ele, index) {

    return index > 3 ? ele * 2 : ele;

});

复制代码

2,jQuery对象与DOM对象才做元素和互转

 

 

复制代码

//dom 操作

var dvObj = document.getElementById(‘dv’);

dvObj.style.border = ‘1px solid red’;

dvObj.style.width = ‘300px’;

dvObj.style.height = ‘200px’;

//dom转jQuery

var dvj=$(dvObj);

dvj.css(‘backgroundColor’, ‘yellow’).css(‘width’, ‘500px’).css(‘height’,
‘300px’).css(‘border’, ‘1px solid blue’);

//jquery转dom

var dvooo=dvj[0]//.get(0);

复制代码

3,prevall与nextall

 

 

复制代码

//页面上有叁个ul球队列表当鼠标移动到某些li上的时候改行背景颜色变红,当点击有些li的时候,让该li从前的保有li背景象变黄,之后的全部li背景象变蓝。本身不变色。

       $(function () {

 

            $(‘#u1 li’).mouseover(function () {

 

                $(this).css(‘backgroundColor’, ‘red’);

            }).click(function () {

                //  $(this).prevAll().css(‘backgroundColor’, ‘yellow’);

                //$(this).nextAll().css(‘backgroundColor’, ‘blue’);

                //断链–end()修复断链

                $(this).prevAll().css(‘backgroundColor’,
‘yellow’).end().nextAll().css(‘backgroundColor’, ‘blue’);

            }).mouseout(function () {

                $(this).css(‘backgroundColor’, ”);

            });

 

        });

复制代码

4,jquery版的一定量评分控件

 

 

复制代码

  <script type=”text/javascript”>

 

        $(function () {

            $(‘#tb td’).mouseover(function () {

 

                $(this).text(‘★’).prevAll().text(‘★’);
//.end().nextAll().text(‘☆’);

            }).mouseout(function () {

                $(‘#tb td’).text(‘☆’);

            });

 

        });

    

    </script>

复制代码

5,jquery为成分加多样式,去除样式,切换样式

 

 

复制代码

 //为某成分加多三个类样式

// $(‘div’).addClass(‘cls cls1’);

 //移除一个类样式

// $(‘div’).removeClass(‘cls’);

//判别这么些因素是不是利用了那几个类样式

//$(‘div’).hasClass(‘cls’);

// $(‘body’).toggleClass(‘cls’);//切换该类样式

复制代码

6,jquery索引选拔器

 

 

//索引为2的特别变了

//$(‘p:eq(2)’).css(‘backgroundColor’,’red’);

//索引小于2的成分

// $(‘p:lt(2)’).css(‘backgroundColor’, ‘red’);

//索引大于2的

//$(‘p:gt(2)’).css(‘backgroundColor’, ‘red’);

7,siblings与even与odd

 

 

复制代码

$(function () {

 

            $(‘table tr’).click(function () {

//除却,其余的享有td

                $(‘td’, $(this).siblings()).css(‘backgroundColor’,”);

//偶数行的td

                $(‘td:even’, $(this)).css(‘backgroundColor’, ‘red’);

//奇数行的td

                $(‘td:odd’, $(this)).css(‘backgroundColor’, ‘blue’);

            });

        });

复制代码

8,属性过滤器

 

 

复制代码

//获取层中全数有name属性的input标签成分

//$(‘#dv input[name]’).css(‘backgroundColor’,’blue’);

//获取层中全体有name属性别且属性值为name的input标签

//$(‘#dv input[name=name]’).css(‘backgroundColor’, ‘blue’);

//获取层中全体有name属性不过值不是name的input标签

//$(‘#dv input[name!=name]’).css(‘backgroundColor’, ‘blue’);

//也便是以name起初的name属性值

//$(‘#dv input[name^=name]’).css(‘backgroundColor’, ‘blue’);

//以name结尾的

//$(‘#dv input[name$=name]’).css(‘backgroundColor’, ‘blue’);

//name属性值中一旦有name就足以

//$(‘#dv input[name*=name]’).css(‘backgroundColor’, ‘blue’);

复制代码

9,动态创设成分

 

 

复制代码

       $(function () {

 

            $(‘#btn’).click(function () {

                // var dvObj = $(‘<div></div>’);

               
//dvObj.css({“backgroundColor”:”red”,”width”:”300px”,”height”:”200px”});

                // $(‘body’).append(dvObj);

 

                $(‘<div></div>’).css({ “backgroundColor”:
“red”, “width”: “300px”, “height”: “200px” }).appendTo($(‘body’));

            });

        });

复制代码

10,动态创制表格

 

 

复制代码

   <script type=”text/javascript”>

 

        $(function () {

 

            var dic = { “百度”: “”,   “谷歌”:
“” };

            //创立二个报表

            var tb = $(‘<table border=”1″></table>’);

            for (var key in dic) {

 

                var trObj = $(‘<tr><td>’ + key +
‘</td><td><a href=”‘ + dic[key] + ‘”>’ + key +
‘</a></td></tr>’); //.appendTo(tb);

                tb.append(trObj);

            }

            $(‘body’).append(tb);

 

 

        });

    </script>

复制代码

11,成立层,层中添港成分

 

 

复制代码

   <script type=”text/javascript”>

 

        $(function () {

            //创制层开关

            $(‘#btn’).click(function () {

 

                $(‘<div id=”dv”></div>’).css({ “width”:
“300px”, “height”: “200px”, “backgroundColor”: “red”, “cursor”:
“pointer” }).appendTo($(‘body’));

            });

            //成立层瓜时素,开关

            $(‘#btnadd’).click(function () {

 

                $(‘<input type=”button” name=”name” value=”按钮”
/>’).appendTo($(‘#dv’));

            });

            //清除成分

            $(‘#btnemp’).click(function () {

 

                //清空层中装有子元素

                 $(‘#dv’).empty();

                //层没了

                //$(‘#dv’).remove();

            });

        });

    </script>

复制代码

 12,jquery权限管理,左右运动

 

 

复制代码

 <script type=”text/javascript”>

 

        $(function () {

 

            $(‘#toAllLeft’).click(function () {

                $(‘#se1 option’).appendTo($(‘#se2’));

            });

            $(‘#toAllRight’).click(function () {

                $(‘#se2 option’).appendTo($(‘#se1’));

            });

            $(‘#Jquery插件完成点击获取验证码后60秒内不准重新获得,发送短信验证码后60秒倒计时。toRight’).click(function () {

 

                $(‘#se1 option:selected’).appendTo($(‘#se2’));

            });

 

            $(‘#toLeft’).click(function () {

 

                $(‘#se2 option:selected’).appendTo($(‘#se1’));

            });

        });

    

    </script>

复制代码

13,jquery版阅读协议倒计时

 

 

复制代码

  <script type=”text/javascript”>

 

       
//十分钟后切磋文件框下的注册按键手艺点击,石英钟倒数。设置可用性等jQuery未封装方法:attr(“”)setInterval()

 

        $(function () {

            var sec = 5;

            var setId = setInterval(function () {

                sec–;

                if (sec <= 0) {

 

                    $(‘#btn’).attr(‘disabled’, false).val(‘同意’);

                    //清除定时器

                    clearInterval(setId);

                } else {

                    $(‘#btn’).val(‘请留心翻阅协议(‘+sec+’)’);

                }

            }, 1000);

        });

 

    </script>

复制代码

14,removeAttr与unbind

 

 

复制代码

 <script type=”text/javascript”>

       
//选取球队,多个ul。被悬浮行高亮显示(背景是暗褐),点击球队将它放到另二个的球队列表。//清除全数事件。.unbind();

 

        $(function () {

 

            $(‘#uu1 li’).mouseover(function () {

                $(this).css(‘backgroundColor’,
‘red’).siblings().css(‘backgroundColor’, ”);

            }).click(function () {

                //removeAttr移除了什么样性质

            //unbind移除事件

               
$(this).removeAttr(‘style’).unbind().appendTo($(‘#uu2’));

 

            });

        });

    </script>

复制代码

15,节点替换replaceWith与replaceAll

 

 

复制代码

 <script type=”text/javascript”>

 

        $(function () {

 

            $(‘#btn1’).click(function () {

            //把br标签替换到hr标签

                $(‘br’).replaceWith(‘<hr color=”yellow” />’);

            });

 

            $(‘#btn2’).click(function () {

                //把hr标签替换来br标签

                $(‘<br />’).replaceAll(‘hr’);

            });

        });

    </script>

复制代码

16,包裹节点

 

 

复制代码

  <script type=”text/javascript”>

 

 

        $(function () {

 

            $(‘#btn’).click(function myfunction() {

            //各种p标签外面有一对font标签

                // $(‘p’).wrap(‘<font color=”red” size=”7″
face=”斩新硬笔行草简”></font>’);

                //全部的p标签外面独有一对font标签

                 $(‘p’).wrapAll(‘<font color=”red” size=”7″
face=”斩新硬笔大篆简”></font>’);

                //每一对p标签中都有一对font标签

                //$(‘p’).wrapInner(‘<font color=”red” size=”7″
face=”全新硬笔金鼎文简”></font>’);

            });

          

        });

    </script>

复制代码

17,jquery版全选,反选,全不选

 

 

复制代码

   <script type=”text/javascript”>

 

        $(function () {

 

            $(‘#btnAll’).click(function () {

                $(‘:checkbox’).attr(‘checked’, true);

            });

            $(‘#btnNo’).click(function () {

                $(‘:checkbox’).attr(‘checked’, false);

            });

            $(‘#btnFan’).click(function () {

                $(‘:checkbox’).each(function (k, v) {

                    $(this).attr(‘checked’, !$(this).attr(‘checked’));

                });

            });

        });

    </script>

复制代码

18,jquery绑定与解除事件

 

 

复制代码

    <script type=”text/javascript”>

        $(function () {

            //注册二个点击事件

            $(‘#btn’).bind(‘click’, function () {

                alert(‘哈哈’);

            }).bind(‘mouseover’, function () {

                $(this).css(‘backgroundColor’, ‘red’);

            });

 

            $(‘#btnClear’).click(function () {

               
$(‘#btn’).unbind(‘click’);//写什么就排除什么风云,什么都不写则全体清除

            });

        });

    </script>

复制代码

19,合成事件hover与toggle

 

 

复制代码

    <script type=”text/javascript”>

        $(function () {

            //合成事件

            $(‘#btn’).hover(function () {

                //也正是鼠标进来和离开

                $(this).css(‘backgroundColor’, ‘red’);

            }, function () {

                $(this).css(‘backgroundColor’, ‘blue’);

            });

            //事件的切换

            //那几个事件截止,继续下叁个事件,全数事件推行后再从头开端

            $(‘#btn’).toggle(function () {

                alert(‘1’);

            }, function () {

                alert(‘2’);

            }, function () {

                alert(‘3’);

            }, function () {

                alert(‘4’);

            });

        });

 

    </script>

复制代码

20,jquery版事件冒泡阻止

 

 

复制代码

   <script type=”text/javascript”>

        $(function () {

 

            $(‘#dv’).click(function () {

                alert($(this).attr(‘id’));

            });

            $(‘#p1’).click(function () {

                alert($(this).attr(‘id’));

            });

            $(‘#sp’).click(function (e) {

                alert($(this).attr(‘id’));

                e.stopPropagation(); //阻止事件冒泡

            });

        });

    

    </script>

复制代码

21,jquery版时间冒泡阻止默许事件

 

 

复制代码

    <script type=”text/javascript”>

        $(function () {

            $(‘#btn’).click({ “老牛”: “公的” }, function (e) {

                alert(e.data.老牛);

            });

 

 

            $(‘a’).click(function (e) {

                //alert(‘不去’);

                //e.preventDefault();

                if (!confirm(‘去不’)) {

                    e.preventDefault(); //阻止默许事件

                   // e.stopPropagation(); //阻止事件冒泡

                }

            });

        });

 

      

    </script>

复制代码

22,jquery获取键盘键的值和one

 

 

复制代码

   <script type=”text/javascript”>

 

        $(function () {

 

            $(‘#txt’).keydown(function (e) {

 

                alert(e.which); //获取键盘键的值

            });

            //            $(‘#txt’).mousedown(function (e) {

 

            //                alert(e.which);//获取鼠标的左右键的值

            //            });

            //只进行一回

            $(‘#btn’).one(‘click’,function () {

                alert(‘哈哈’);

            });

        });

    </script>

复制代码

23,jquery图片跟随鼠标移动

 

 

复制代码

    <script type=”text/javascript”>

        $(function () {

 

            $(document).mousemove(function (e) {

                $(‘img’).css({ “position”: “absolute”, “left”:
e.pageX,”top”:e.pageY });

            });

           

        });

    

    </script>

复制代码

24,juqery动画animate

 

 

复制代码

 <script type=”text/javascript”>

 

        $(function () {

            $(‘img’).animate({ “left”: “50px”, “top”: “500px” },
2000).animate({ “width”: “80px”, “height”: “80px”, “top”: “-=400px”,
“left”: “500px” }, 2000).animate({ “top”: “+=450px”, “left”: “+=450px”
}, 3000);

 

           // $(‘img’).animate({ “left”: “50px”, “top”: “500px” },
2000).animate({“left”:”800px”,”top”:”-50px”,”width”:”200px”,”height”:”200px”},
3000);

        });

    </script>

复制代码

25,juqery动画版显示隐蔽层

 

 

复制代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;

<html xmlns=”;

<head>

    <title></title>

    <script src=”jquery-1.8.3.js”
type=”text/javascript”></script>

    <script type=”text/javascript”>

        $(function () {

            $(‘#btn1’).click(function () {

                $(‘div’).slideDown(2000);

            });

            $(‘#btn2’).click(function () {

                $(‘div’).slideUp(2000);

            });

            $(‘#btn3’).click(function () {

                $(‘div’).slideToggle(2000);

            });

            $(‘#btn4’).click(function () {

                $(‘div’).fadeIn(2000);

            });

            $(‘#btn5’).click(function () {

                $(‘div’).fadeOut(2000);

            });

            $(‘#btn6’).click(function () {

                $(‘div’).fadeToggle(2000);

            });

        });

    

    </script>

</head>

<body>

    <input type=”button” name=”name” value=”slideDown” id=”btn1″
/>

    <input type=”button” name=”name” value=”slideUp” id=”btn2″ />

    <input type=”button” name=”name” value=”slideToggle” id=”btn3″
/>

    <input type=”button” name=”name” value=”fadeIn” id=”btn4″ />

    <input type=”button” name=”name” value=”fadeOut” id=”btn5″ />

    <input type=”button” name=”name” value=”fadeToggle” id=”btn6″
/>

    <div style=”background-color: Green; width: 300px; height:
200px”>

    </div>

</body>

</html>

复制代码

26,jquery账户记录cookie

 

 

复制代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;

 

<html xmlns=”;

<head>

    <title></title>

    <script src=”jquery-1.8.3.js”
type=”text/javascript”></script>

    <script src=”jquery.cookie.js”
type=”text/javascript”></script>

 

    <script type=”text/javascript”>

 

        $(function () {

 

            var t = $.cookie(“name”);

            if (t!=”) {

                $(‘p’).text(‘欢迎’+t+’登录’);

            }

            $(‘#btn’).click(function () {

                $.cookie(“name”, $(‘#txt’).val());

                alert(‘已经记录了’);

                //帐号

            });

        });

    

    </script>

</head>

<body>

<p>招待旅客登陆</p>

    <input type=”text” name=”name” value=”” id=”txt” />

    <input type=”button” name=”name” value=”记录” id=”btn” />

</body>

</html>

使用前,请先引用jquery 1,map遍历数组
复制代码 //=========for循环遍历========== var arr[1,2,3,4,5]; for(var
i=0;i=arr.length;i++) { arr[i]=arr+1; }…

三种艺术应用jquery获取验证码倒计时,并设置防重复点击
<div class=”root”>

格局一:jquery实现出殡和埋葬短信验证码后60秒倒计时

<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <script src=”js/jquery-3.2.1.min.js”></script>
  <title>666</title>
</head>
<body>
     <input type=”button” id=”btn” value=”获取验证码”/>

     <script>
     $(function () {
         $(‘#btn’).click(function () {
             var count = 60;
             var countdown = setInterval(CountDown, 1000);
             function CountDown() {
             $(“#btn”).attr(“disabled”, true);
             $(“#btn”).val(“重新发送(“+count +”)”);
             if (count == 0) {
                 $(“#btn”).val(“获取验证码”).removeAttr(“disabled”);
                 clearInterval(countdown);
             }
           count–;
         }
      })
   });
   </script>
</body>
</html>

效果图:

<button class=”btn”>获取验证码1</button>

澳门葡京 1

<button class=”btn1″>获取验证码2</button>

先到官方网址()下载cookie插件,放到相应文件夹,代码如下:

<button class=”btn3″>获取验证码3</button>
</div>
<script type=”text/javascript”>
// 一 利用绑定和平解决绑点击事件
let time1 = 10;
var count = time1;
var countinterval;
var button = $(‘.btn’);
button.click(showTitle);
function showTitle(){
console.log(00000);
countinterval = setInterval(timecount, 1000);
button.off(‘click’,showTitle);//解绑点击事件
}
function timecount(){
button.text(count+’s’);
if (count<=0) {
count = time1;
clearInterval(countinterval);
button.text(‘重新获得验证码’);
button.on(‘click’,showTitle);
}
else
count–;
}
//二 设置disabled属性
let time2 = 15;//15s
var count1 = time2;
var countinterval2;
var button2 = $(‘.btn1’);
button2.click(showtitle2);
function showtitle2(){
console.log(11111);
// button2.off();
countintervalt = setInterval(timecount1,1000);
button2.attr(‘disabled’,true);
}
function timecount1(){
button2.text(count1+’s’);
if (count1<=0) {
count1 = time2;
clearInterval(countintervalt);
button2.text(‘重新得到验证码’);
button2.attr(‘disabled’,false);
}
else
count1–;
}
//三 加标识
let time3 = 20;//15s
var canclick=true;
var count2 = time3;
var countinterval3;
var button3 = $(‘.btn3’);
button3.click(showtitle3);
function showtitle3(){
if (canclick) {
console.log(11111);
countinterval3 = setInterval(timecount2,1000);
canclick = false;
}
}
function timecount2(){
button3.text(count2+’s’);
if (count2<=0) {
count2 = time3;
clearInterval(countinterval3);
button3.text(‘重新赢得验证码’);
canclick = true;
}
else
count2–;
</script>

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>Examples</title>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<script
src=””
></script>
<script src=”jquery.cookie.js” ></script>
<style type=”text/css”>
    * {margin: 0; padding: 0; font-family: “Microsoft Yahei”;}
    .captcha-box {width: 360px; height: 34px; margin: 30px; padding:
30px; border: #956E6F 1px dashed; border-radius: 5px; background-color:
#FAF2F2;}
    #mobile { float: left; width: 180px; height: 32px; border: #e5e5e5
1px solid; line-height: 32px; text-indent: 8px; outline: none;}
    #getting {float: left; height: 34px; margin-left: -1px; padding: 0
18px; text-align: center;  line-height: 34px; border: #e5e5e5 1px
solid; background: linear-gradient(0deg, #f4f2f2 0%,#fbf9f9 100%);
cursor: pointer; outline: none;}
</style>
<script>
    $(function(){
        /*仿刷新:检查测验是不是留存cookie*/
        if($.cookie(“captcha”)){
            var count = $.cookie(“captcha”);
            var btn = $(‘#getting’);
           
btn.val(count+’秒后可重新获得’).attr(‘disabled’,true).css(‘cursor’,’not-allowed’);
            var resend = setInterval(function(){
                count–;
                if (count > 0){
                   
btn.val(count+’秒后可另行赢得’).attr(‘disabled’,true).css(‘cursor’,’not-allowed’);
                    $.cookie(“captcha”, count, {path: ‘/’, expires:
(1/86400)*count});
                }else {
                    clearInterval(resend);
                   
btn.val(“获取验证码”).removeClass(‘disabled’).removeAttr(‘disabled
style’);
                }
            }, 1000);
        }
        /*点击退换开关状态,已经简略掉ajax发送短信验证的代码*/
        $(‘#getting’).click(function(){
            var btn = $(this);
            var count = 60;
            var resend = setInterval(function(){
                count–;
                if (count > 0){
                    btn.val(count+”秒后可再度获得”);
                    $.cookie(“captcha”, count, {path: ‘/’, expires:
(1/86400)*count});
                }else {
                    clearInterval(resend);
                    btn.val(“获取验证码”).removeAttr(‘disabled
style’);
                }
            }, 1000);
            btn.attr(‘disabled’,true).css(‘cursor’,’not-allowed’);
        });
    });
</script>
</head>
<body>
    <div class=”captcha-box”>
        <input type=”text” id=”mobile” maxlength=”11″
placeholder=”请输出手提式有线电话机号码”>
        <input type=”button” id=”getting” value=”获取验证码”>
    </div>
</body>
</html>

上述正是本文的全部内容了,希望大家能够欣赏。

您只怕感兴趣的作品:

  • jQuery点击输入框展现验证码图片
  • jQuery插件达成静态HTML验证码校验
  • PHP+jQuery
    注册模块的改革(一):验证码存入SESSION
  • jquery禁止输入数字以外的字符的演示(纯数字验证码)
  • jquery完毕手机发送验证码的倒计时代码
  • JQuery完结轻巧验证码提示消除方案
  • jQuery达成三个简便的验证码功效

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website