js實現手機驗證碼傳送

阿新 • • 發佈：2019-01-14

1.通過ajax手機驗證碼傳送例項

2.為了方便用了jquery需要測試時請先匯入jquery包

html部分程式碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
	
手機號碼：<input type="text" name="phone" id="phone">
<input id="btnSendCode" type="button" value="傳送驗證碼" onclick="sendMessage()" />
<p id='timeshort'></p>

</body>

<script type="text/javascript">
	/*-------------------------------------------*/
	var after ='';
	var InterValObj; //timer變數，控制時間
	var count = 60; //間隔函式，1秒執行
	var curCount = 60;//當前剩餘秒數	
	var exp =new Date();
	var time;
	time = exp.getTime();
	
	
		
		//獲取cookie值
		function getCookie(name){
			var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
			if(arr=document.cookie.match(reg))
			return unescape(arr[2]);
			else
			return null;
		}

		//這是有設定過期時間的使用示例： 
			//s20是代表20秒 
			//h是指小時，如12小時則是：h12 
			//d是天數，30天則：d30 	
		//設定cookie
		function setCookie(name,value,time){ 
			    var strsec = getsec(time); 
			    var exp = new Date(); 
			    exp.setTime(exp.getTime() + strsec*1); 
			    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
			} 
			function getsec(str){ 
			   // alert(str); 
			   var str1=str.substring(1,str.length)*1; 
			   var str2=str.substring(0,1); 
			   if (str2=="s")
			   { 
			        return str1*1000; 
			   }
			   else if (str2=="h")
			   { 
			       return str1*60*60*1000; 
			   }
			   else if (str2=="d")
			   { 
			       return str1*24*60*60*1000; 
			   } 
			} 
					
			function sendMessage() {
				if(getCookie('after')>time &&  document.cookie.indexOf('after=') != -1){
					$('#timeshort').html('請不要在60秒內重複獲取驗證碼');	
				}else{
					$('#timeshort').html('');
				}
				trySend();//呼叫一次		
			 }
			function trySend() {
			 if(getCookie('after')<time || document.cookie.indexOf('after=') == -1 || getCookie('after')==null){
			 	//測試時先註釋掉ajax請求程式碼，否則會不成
			 	 $.ajax({
                        url: "你要請求的路徑",
                        type: "get",
                        dataType: "json",
                        data: {'需要傳的引數'},
                        success: function (data) {
                            if (data.code == 0) {
                                alert('傳送成功');
                            } else {
                                alert(data.msg);
                            }
                        },
                        error: function () {

                        }
                    });

				setCookie("after",time+60*1000,"s60");
				setCookie("phone",$('#phone').val(),"s60");
				curCount = count;
				//設定button效果，開始計時
				$("#btnSendCode").attr("disabled", "true");
				$("#btnSendCode").val(curCount + "秒後重新獲取");
				InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器，1秒執行一次
			}
		}	
	//timer處理函式
	function SetRemainTime() {		
		if (curCount == 0) {               
		window.clearInterval(InterValObj);//停止計時器
		$("#btnSendCode").removeAttr("disabled");//啟用按鈕
		$("#btnSendCode").val("重新發送驗證碼");
		// code = ""; //清除驗證碼。如果不清除，過時間後，輸入收到的驗證碼依然有效   
	} else {
		curCount--;
		$("#btnSendCode").val(curCount + "秒後重新獲取");
		}
	}
	</script>

</body>
</html>

js實現手機驗證碼傳送

1.通過ajax手機驗證碼傳送例項 2.為了方便用了jquery需要測試時請先匯入jquery包 html部分程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

js實現手機驗證碼傳送倒計時60秒無視頁面重新整理

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@ page isELIgnored="false"%> <!doc

原生 JS 實現手機驗證碼倒計時

可以使用 pointer-events 來阻止元素成為滑鼠事件的 target。html5 新增操作元素 class 類名的方式 classList。 classList 方法 add(value)：在元素中新增一個或多個類名。如果值已經存在，就不添加了。 contains(value): 返回

js獲取手機驗證碼倒計時的實現

<div class="div user-input"> <input type="number" class="code" name="verify" placeholder="請輸入手機驗證碼" required maxlength="6"> <input t

使用js實現網頁驗證碼

btn post back html pan put mat control log 簡單易用，無需後臺程序。 HTML <div class="login-box-body"> <p class="login-bo

java實現手機驗證碼功能

java實現給手機發送驗證碼，是需要平臺的支援的這裡我使用的是http://user.ihuyi.com/互億的簡訊服務大家可以註冊一個賬號http://user.ihuyi.com/register.htmls這裡是比較簡單的實現大家可以根據自己的需求自行編寫 import org.a

Rxjava 優雅的實現簡訊驗證碼傳送

廢話不多說直接上程式碼 private fun countDown() { btn_send_code_activity_login.isEnabled = false

JS實現隨機驗證碼

驗證碼驗證碼有很多種類，有圖片，字串，簡訊…首先，我們一般不能使用JS來實現驗證，一般都是後臺返回的，要不使用者可以直接禁用JS，跳過驗證，而且客戶端實現的都是不安全的。這裡我們使用JS來模擬驗證碼。生成一個隨機四位數的驗證碼需求：隨機生成一個包含字母或數字的四位數驗證碼

通過js 實現簡單驗證碼的重新整理看不清換一張

【原理】當一個<img>的src改變時，頁面會自動重新整理這個<img>原始碼如下： <script type="text/javascript"> function reImg(){ var

ajax + 簡訊寶實現手機驗證碼

最近在開發一個登入模組，需要用到簡訊驗證碼功能，由於技術有限，簡單做了一個比較粗糙的，寫下來備忘。需要用到：Jq-ajax、php、簡訊寶 HTML部分： <div class="login"> <div class="logi

《在網頁中實現手機驗證碼登陸程式碼》

JavaScript程式碼如下： // 0 入口函式 $(function(){ // 1、點選獲取驗證碼，請求介面，發給使用者驗證碼 $('#getNum').on('click',function(){ // 2、獲取使用者的手機號 var phoneNu

JS實現偽驗證碼的幾種方式

提示：不推薦使用以下方式來實現web開發中的驗證碼功能，因為這幾種方式使用的是前臺驗證，沒有在後臺執行操作時進行比對，因此無法保證網站入口的強制破解操作。不能很好的保證網站的安全性！ 1： ? + ? = ? 的方式效果如圖： HTML Code： <

手機驗證碼傳送（ThinkPHP）

c#實現傳送手機驗證碼

【.aspx.cs】 string shouji = ""; string templateid = "181ed0353b8341808620a1ed871793b5"; shouji = gelian.Value.Trim(); string yzm = IdentifyingCode.GenCod

【MarketAnalysis總結】6.0利用SMS的API實現傳送手機驗證碼

本專案的需求之一是對每一個下載的檔案，都進行了加密處理，故而產生另一個需求是要將使用者下載的檔案的密碼傳送到使用者的手機上。這裡的實現我採用了中國網建網SMS的一個API介面，下面來說明如何實現，其實很簡單~。傳送簡訊的流程圖如圖6.1，圖6.1 傳送簡訊的實現流程圖主要過程

java調介面實現傳送手機簡訊驗證碼功能,手機驗證碼，介面呼叫

近來由於專案需要，需要用到手機簡訊驗證碼的功能，其中最主要的是用到了第三方提供的簡訊平臺介面WebService客戶端介面，下面我把我在專案中用到的記錄一下，以便給大家提供個思路，由於本人的文采有限，還請大家見諒！一：首先上幾張案例截圖，以便大家可以瞭

註冊/找回密碼等功能中傳送手機驗證碼後倒計時效果的實現（基於vue）

註冊/找回密碼等功能中傳送手機驗證碼後倒計時效果的實現，基於vue、element-ui<template> <el-button size="small" type="prima

thinkphp實現傳送手機驗證碼功能！

php實現傳送手機驗證碼功能如下： //傳送手機驗證碼 public function sendPhoneCodeMessage(){ vendor('SendPhoneCode.SendCode','','.php

java實現傳送手機驗證碼功能

2. 註冊好之後，點選使用者中心 -> 賬戶管理，就會進入如下介面（順便提一下，新註冊的使用者，平臺會免費贈送你10元，足夠大家學習和使用了，所以不用擔心需要充錢）你需要做的就是獲取你自己的 ACCOUNT SID 和 AUTH TOKEN 3. 需要

使用者登入，實現傳送手機驗證碼。

傳送手機驗證碼，要求具有如下功能需求、業務邏輯：（1）、使用者輸入手機號，當輸入的手機號碼為空時，提示，並且要求使用者輸入手機號；（2）、傳送手機號碼後，button按鈕，自動變為不可點選，然後60秒倒計時；（3）、後臺成功傳送驗證碼給手機; (4)、使用者輸入

js實現手機驗證碼傳送

相關推薦