# uniapp制作驗證碼倒計時定時器 效果圖：  ``` <pre class="calibre14">``` <span class="token"><</span>template<span class="token">></span> <span class="token"><</span>view<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"form"</span><span class="token">></span> <span class="token"><</span><span class="token">!</span><span class="token">--</span> 輸入框 <span class="token">--</span><span class="token">></span> <span class="token"><</span>br<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"cu-form-group"</span> style<span class="token">=</span><span class="token4">"border-radius: 20rpx;"</span><span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"title"</span><span class="token">></span>手機號碼<span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>input placeholder<span class="token">=</span><span class="token4">"輸入框帶標簽"</span> name<span class="token">=</span><span class="token4">"input"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>input<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"cu-capsule radius"</span><span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">'cu-tag bg-blue '</span><span class="token">></span> <span class="token">+</span><span class="token5">86</span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"cu-tag line-blue"</span><span class="token">></span> 中國大陸 <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>br<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"cu-form-group"</span> style<span class="token">=</span><span class="token4">"border-radius: 20rpx;"</span><span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"title"</span><span class="token">></span>驗證碼<span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>input placeholder<span class="token">=</span><span class="token4">"驗證碼"</span> name<span class="token">=</span><span class="token4">"input"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>input<span class="token">></span> <span class="token"><</span>button <span class="token2">class</span><span class="token">=</span><span class="token4">'cu-btn bg-green shadow'</span> @click<span class="token">=</span><span class="token4">"code"</span><span class="token">></span><span class="token1">{</span><span class="token1">{</span>msgcode<span class="token1">}</span><span class="token1">}</span><span class="token"><</span><span class="token">/</span>button<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>template<span class="token">></span> <span class="token"><</span>script<span class="token">></span> <span class="token2">export</span> <span class="token2">default</span> <span class="token1">{</span> <span class="token3">data</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">return</span> <span class="token1">{</span> msgcode<span class="token1">:</span><span class="token4">"驗證碼"</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">,</span> <span class="token3">onLoad</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token1">}</span><span class="token1">,</span> onUnload<span class="token1">:</span> <span class="token2">function</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>timer <span class="token">&&</span> <span class="token2">this</span><span class="token1">.</span><span class="token3">clearTimer</span><span class="token1">(</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span><span class="token1">,</span> methods<span class="token1">:</span> <span class="token1">{</span> code<span class="token1">:</span><span class="token2">function</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>countDown<span class="token">=</span><span class="token5">60</span><span class="token1">;</span> <span class="token2">this</span><span class="token1">.</span>timer <span class="token">=</span> <span class="token3">setInterval</span><span class="token1">(</span><span class="token1">(</span><span class="token1">)</span><span class="token">=></span><span class="token1">{</span> <span class="token2">if</span> <span class="token1">(</span><span class="token2">this</span><span class="token1">.</span>countDown <span class="token">===</span> <span class="token5">0</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span><span class="token3">reset</span><span class="token1">(</span><span class="token1">)</span><span class="token1">;</span> <span class="token2">this</span><span class="token1">.</span>timer <span class="token">&&</span> <span class="token2">this</span><span class="token1">.</span><span class="token3">clearTimer</span><span class="token1">(</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span> <span class="token2">else</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span><span class="token3">loading</span><span class="token1">(</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">,</span><span class="token5">1000</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span><span class="token1">,</span> <span class="token3">loading</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>countDown <span class="token">-=</span> <span class="token5">1</span><span class="token1">;</span> <span class="token2">this</span><span class="token1">.</span>msgcode <span class="token">=</span> <span class="token2">this</span><span class="token1">.</span>countDown <span class="token">+</span> <span class="token4">'秒后重發'</span><span class="token1">;</span> <span class="token1">}</span><span class="token1">,</span> <span class="token3">reset</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>countDown<span class="token">=</span><span class="token5">60</span><span class="token1">;</span> <span class="token2">this</span><span class="token1">.</span>msgcode <span class="token">=</span> <span class="token4">"驗證碼"</span><span class="token1">;</span> <span class="token1">}</span><span class="token1">,</span> <span class="token3">clearTimer</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> <span class="token3">clearInterval</span><span class="token1">(</span><span class="token2">this</span><span class="token1">.</span>timer<span class="token1">)</span><span class="token1">;</span> <span class="token2">this</span><span class="token1">.</span>timer<span class="token">=</span><span class="token2">null</span><span class="token1">;</span> <span class="token1">}</span> <span class="token1">}</span> <span class="token1">}</span> <span class="token"><</span><span class="token">/</span>script<span class="token">></span> <span class="token"><</span>style<span class="token">></span> <span class="token1">.</span>form<span class="token1">{</span> <span class="token6">/* border: 1rpx solid #a008ff; */</span> <span class="token6">/* height: 800rpx; width: 600rpx; */</span> margin<span class="token">-</span>top<span class="token1">:</span> <span class="token5">200</span>rpx<span class="token1">;</span> border<span class="token">-</span>radius<span class="token1">:</span> <span class="token5">50</span>rpx<span class="token1">;</span> <span class="token6">/* margin-left: 100rpx; */</span> <span class="token6">/* background-color: #ebebeb; */</span> <span class="token1">}</span> <span class="token"><</span><span class="token">/</span>style<span class="token">></span> ``` ```