jQuery插件实现“点击获取验证码后60秒内禁止重新获取（防刷新）”

来源：互联网发布：数据库购买编辑：程序博客网时间：2024/05/22 01:35
转自：jQuery插件实现“点击获取验证码后60秒内禁止重新获取（防刷新）”
效果图
这里写图片描述
先到官网（http://plugins.jquery.com/）下载jquery.cookie.js插件，放到相应文件夹，代码如下：
<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE html></span><span class="hljs-tag"><<span class="hljs-title">html</span>></span><span class="hljs-tag"><<span class="hljs-title">head</span>></span>    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"X-UA-Compatible"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"IE=edge,chrome=1"</span>></span>    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>Examples<span class="hljs-tag"></<span class="hljs-title">title</span>></span>    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"description"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">""</span>></span>    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"keywords"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">""</span>></span>    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery.min.js"</span> ></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/jquery.cookie.js"</span> ></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">        * <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value"> <span class="hljs-string">"Microsoft Yahei"</span></span></span>;<span class="hljs-rule">}</span></span>        <span class="hljs-class">.captcha-box</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">360</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">34</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">30</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">30</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#956E6F</span> <span class="hljs-number">1</span>px dashed</span></span>; <span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">5</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#FAF2F2</span></span></span>;<span class="hljs-rule">}</span></span>        <span class="hljs-id">#mobile</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>; <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">180</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#e5e5e5</span> <span class="hljs-number">1</span>px solid</span></span>; <span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">text-indent</span>:<span class="hljs-value"> <span class="hljs-number">8</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">outline</span>:<span class="hljs-value"> none</span></span>;<span class="hljs-rule">}</span></span>        <span class="hljs-id">#getting</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">34</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> -<span class="hljs-number">1</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span> <span class="hljs-number">18</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;  <span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">34</span>px</span></span>; <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#e5e5e5</span> <span class="hljs-number">1</span>px solid</span></span>; <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-function">linear-gradient(<span class="hljs-number">0</span>deg, #f4f2f2 <span class="hljs-number">0</span>%,#fbf9f9 <span class="hljs-number">100</span>%)</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">cursor</span>:<span class="hljs-value"> pointer</span></span>; <span class="hljs-rule"><span class="hljs-attribute">outline</span>:<span class="hljs-value"> none</span></span>;<span class="hljs-rule">}</span></span>    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>    <span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">        $(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>            <span class="hljs-comment">/*防刷新：检测是否存在cookie*/</span>            <span class="hljs-keyword">if</span>($.cookie(<span class="hljs-string">"captcha"</span>)){                <span class="hljs-keyword">var</span> count = $.cookie(<span class="hljs-string">"captcha"</span>);                <span class="hljs-keyword">var</span> btn = $(<span class="hljs-string">'#getting'</span>);                btn.val(count+<span class="hljs-string">'秒后可重新获取'</span>).attr(<span class="hljs-string">'disabled'</span>,<span class="hljs-literal">true</span>).css(<span class="hljs-string">'cursor'</span>,<span class="hljs-string">'not-allowed'</span>);                <span class="hljs-keyword">var</span> resend = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>                    count--;                    <span class="hljs-keyword">if</span> (count > <span class="hljs-number">0</span>){                        btn.val(count+<span class="hljs-string">'秒后可重新获取'</span>).attr(<span class="hljs-string">'disabled'</span>,<span class="hljs-literal">true</span>).css(<span class="hljs-string">'cursor'</span>,<span class="hljs-string">'not-allowed'</span>);                        $.cookie(<span class="hljs-string">"captcha"</span>, count, {path: <span class="hljs-string">'/'</span>, expires: (<span class="hljs-number">1</span>/<span class="hljs-number">86400</span>)*count});                    }<span class="hljs-keyword">else</span> {                        clearInterval(resend);                        btn.val(<span class="hljs-string">"获取验证码"</span>).removeClass(<span class="hljs-string">'disabled'</span>).removeAttr(<span class="hljs-string">'disabled style'</span>);                    }                }, <span class="hljs-number">1000</span>);            }            <span class="hljs-comment">/*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/</span>            $(<span class="hljs-string">'#getting'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>                <span class="hljs-keyword">var</span> btn = $(<span class="hljs-keyword">this</span>);                <span class="hljs-keyword">var</span> count = <span class="hljs-number">60</span>;                <span class="hljs-keyword">var</span> resend = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>                    count--;                    <span class="hljs-keyword">if</span> (count > <span class="hljs-number">0</span>){                        btn.val(count+<span class="hljs-string">"秒后可重新获取"</span>);                        $.cookie(<span class="hljs-string">"captcha"</span>, count, {path: <span class="hljs-string">'/'</span>, expires: (<span class="hljs-number">1</span>/<span class="hljs-number">86400</span>)*count});                    }<span class="hljs-keyword">else</span> {                        clearInterval(resend);                        btn.val(<span class="hljs-string">"获取验证码"</span>).removeAttr(<span class="hljs-string">'disabled style'</span>);                    }                }, <span class="hljs-number">1000</span>);                btn.attr(<span class="hljs-string">'disabled'</span>,<span class="hljs-literal">true</span>).css(<span class="hljs-string">'cursor'</span>,<span class="hljs-string">'not-allowed'</span>);            });        });</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"></<span class="hljs-title">head</span>></span><span class="hljs-tag"><<span class="hljs-title">body</span>></span>    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"captcha-box"</span>></span>        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"mobile"</span> <span class="hljs-attribute">maxlength</span>=<span class="hljs-value">"11"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"请输入手机号码"</span>></span>        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"getting"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"获取验证码"</span>></span>    <span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">body</span>></span><span class="hljs-tag"></<span class="hljs-title">html</span>></span></code>
0 0