zoukankan      html  css  js  c++  java
  • jquery 发送短信60后重新获取

    先需要form表单,获取短信的按钮做成两个相同的,一个显示,一个隐藏。

                  <div class="item">
                        <p class="item_p">
                            <label>手机号:</label>
                            <input class="text js_name"  type="text" name="moblie" value=""/>
                            <span class="prompt_msg prompt">用于登录和找回密码,不会公开</span>
                        </p>
                        <a id="old_display" class="L_get_code" href="javascript:;">免费获取短信验证码</a>
                         <a  class="L_get_code" id="display_none" style="display:none;" href="javascript:;">免费获取短信验证码</a>
                    </div>

    js文件:

        $('#old_display').bind('click',function(){
            var js_name=$(".js_name").val();        
             if(js_name){        var that=$(this);
                var tick=null;
                var time=60;
                if(tick==null){
                    tick=setInterval(function(){ 
                        if(time>0){
                            $("#display_none").show();   //如果在时间大于0,第二个隐藏的显示出来,并更改文字,则第一个隐藏
                            $("#old_display").hide();
                            $("#display_none").text('重新获取('+time+')');
                            time--;
                        }else{
                            $("#old_display").show();   //如果时于小于0了,但恢复原来的样子,清除时间
                            $("#display_none").hide();
                            clearInterval(tick);
                        }                                     
                    },1000);

    $.ajax({ type:"POST", url:getRootPath()+'/register_login/send_mobile_code', dataType:"json", data:"mobile="+js_name, success:function(msg){ if(msg){ $(this).parent().append("<span>已发送,1分钟后可重新获取</span>"); } } }) }else{ alert('不可为空'); } }else{ return false; } })
  • 相关阅读:
    【lwip】04内存管理
    微信小程序之获取当前位置经纬度以及地图显示
    Apache与Tomcat的区别和联系
    Jfinal中Db类的的使用
    利用GROUP_CONCAT和GROUP BY实现字段拼接
    实现easyui combobox中textField字段的拼接
    Jfinal数据库操作语句中占位符的使用
    Django项目部署到Apache服务器
    函数编程概念
    腾讯官网 样式初始化
  • 原文地址:https://www.cnblogs.com/houweijian/p/3269902.html
Copyright © 2011-2022 走看看