vue簡單實現傳送驗證碼倒計時
<
span
v-show
=
"show"
@
click
=
"getCode"
>獲取驗證碼</
span
>
<
span
v-show
=
"!show"
class
=
"count"
>{{count}} s</
span
>
data(){
return
{
show:
true
,
count:
''
,
timer:
null
,
}
},
methods:{
getCode(){
const TIME_COUNT = 60;
if
(!
this
.timer) {
this
.count = TIME_COUNT;
this
.show =
false
;
this
.timer = setInterval(() => {
if
(
this
.count > 0 &&
this
.count <= TIME_COUNT) {
this
.count--;
}
else
{
this
.show =
true
;
clearInterval(
this
.timer);
this
.timer =
null
;
}
}, 1000)
}
}
}
相關推薦
vue簡單實現傳送驗證碼倒計時
<span v-show="show" @click="getCode">獲取驗證碼</span><span v-show="!show" class="count">
原生 JS 實現手機驗證碼倒計時
可以使用 pointer-events 來阻止元素成為滑鼠事件的 target。html5 新增操作元素 class 類名的方式 classList。 classList 方法 add(value):在元素中新增一個或多個類名。如果值已經存在,就不添加了。 contains(value): 返回
利用PHP 簡單實現加減法驗證碼
<?php header('Content-Type: image/png'); $im = imagecreatetruecolor( 200 , 50 );//生成圖片長寬 // Create some colors $white = imagecolorallocate(
藉助CountDownTimer類實現獲取驗證碼倒計時按鈕
咱們中國人做事情講究吉利,我也不例外,所以就選今天這個良辰吉日來寫出自己的第一篇部落格文章吧! 一、引言 我們經常在電視中看到發生衛星的場景,大家都知道會有人在喊倒計時“5,4,3,2,1,發射!”,這個時候衛星就點火發射了。其實這些都是已經在程式當中寫好
mpvue傳送驗證碼倒計時不給點選
頁面上 <div class="teleBox"> <input type="text" class="teleCode" maxlength="4" v-model="teleCode"> <span class="codeClick
Java 實現傳送驗證碼並呼叫介面驗證 (網易雲信)
大概流程: 使用者輸入賬號點選獲取驗證碼,驗證是否繫結手機號碼,繫結則傳送驗證碼 使用者輸入驗證碼,呼叫介面驗證是否正確返回響應 首先我們需要在網易雲信註冊賬號,獲取得到App Key和App Secret 需要注意的幾個引數: &nb
js實現手機驗證碼傳送倒計時60秒無視頁面重新整理
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@ page isELIgnored="false"%> <!doc
Vue 獲取驗證碼倒計時組件
手機 export all .sh set gpo rto get label 子組件 <template> <a class="getvalidate":class="{gray: (!stop)}"@click=‘clickHandler‘&
傳送驗證碼按鈕倒計時
<input type="text" id="telephone" value="" name="telephone" class="fn-tinput" placeholder="手機號" required data-rule-mobile="true" data-msg-requi
微信小程式實現驗證碼倒計時效果
效果圖 wxml <input class='input-pwd' placeholder="新密碼" placeholder-style='color: #000' password focus bindconfirm='getPwd'/> <input class='i
微信小程序實現驗證碼倒計時效果
cti fff img onf hold tel 頁面加載 conf 技術分享 效果圖 wxml <input class=‘input-pwd‘ placeholder="新密碼" placeholder-style=‘color: #000‘ passwor
獲取郵箱驗證碼倒計時+PHP傳送QQ郵件(未全)
程式碼: <?php/*傳送郵件方法*@param $to:接收者 $title:標題 $content:郵件內容*@return bool true:傳送成功 false:傳送失敗*/function sendMail($to,$title,$content) { // 這個PHPMailer
android 閃屏頁的倒計時和傳送驗證碼的倒計時控制元件
TimeCount。直接上程式碼。 import android.os.CountDownTimer; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.
傳送簡訊驗證碼 倒計時
1、頁面樣式:基於bootstrap 1 <div class="form-group"> 2 <label class="col-md-4 control-label">手機號碼</
Rxjava 優雅的實現簡訊驗證碼傳送
廢話不多說直接上程式碼 private fun countDown() { btn_send_code_activity_login.isEnabled = false
【js例項】js傳送驗證碼後倒計時60秒
首先寫一個按鈕: <input type="button" id="btn" value="免費獲取驗證碼" onclick="settime(this)" /> 然後寫js程式碼: //定義一個60秒計時器變數 var countdo
vue中手機號,郵箱正則驗證以及60s傳送驗證碼
今天寫了一個簡單的驗證,本來前面用的元件,但是感覺寫的元件在此專案不是很好用,由於用到的地方比較少,所以直接寫在了頁面中。頁面展示如圖 <div> <p class="fl"> <input name="phone" type="number" pl
laravel中實現簡訊傳送驗證碼
前段時間想實現一個簡訊驗證碼的功能,但是卡了很長時間。 首先我用的是阿里雲的簡訊服務業務,其首次接入流程如下: 在阿里雲上開通簡訊服務後需要做的: 1,申請簽名 2,申請模板 3,建立Accesskey ,值得說的是,可以通過阿里雲提供的子使用者進行Acc
vue 驗證碼倒計時60s
//html <div class="input-div" v-show="formData.phone"> <input type="text" class="input
vue 獲取驗證碼倒計時元件
之前寫過一個計時函式,有計算誤差,但是驗證碼的60秒倒計時可以忽略這一點點誤差。直接上程式碼。 <template> <div class="captcha-row"> <input class="captcha-input" place