Javascript點選事件獲取四位數驗證碼

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

寫一個簡單的四位數驗證碼以供大家學習

以下是HTML程式碼:

<body>
    <div id="getCode"></div>
    <button id="btn">獲取驗證碼</button>
</body>

CSS程式碼:

<style>
    #getCode {
        width: 100px;
        float: left;
        background-color: #ccc;
        text-align: center;
    }
</style>

JS程式碼:

 //點選事件觸發生成四位數字驗證碼
    document.getElementById("btn").onclick = function () {
        //初始化idCode----->idCode為四位數驗證碼
        var idCode = "";
        //顏色的首字元
        var str = "#";
        //顏色陣列 0~9 a~f
        var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
        //驗證碼數字:0~9  英文:a~z, A~Z 總共62個
        var nums = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h",
            "j", "k", "l", "z", "x", "c", "v", "b", "n", "m", "A", "W", "E", "R", "T", "Y", "U", "I",
            "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M",
            "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
        //字號
        var idFonsize = ["1", "2", "3", "4", "5", "6", "7"];
        //隨機生成四個驗證碼
        for (var i = 0; i < 4; i++) {
            //隨機生成六位十六進位制顏色值
            for (var j = 0; j < 6; j++) {
                var sum = arr[parseInt(Math.random() * 16)];
                str += sum;
            }
            //隨機生成驗證碼的數字或者字母的下標0~61
            var p = parseInt(Math.random() * 62);
            //隨機獲取字號大小的下標0~6
            var f = parseInt(Math.random() * 7);
            //拼接隨機生成顏色和字型大小的驗證碼
            idCode += "<font color='" + str + "' size = '" + idFonsize[f] + "'>" + nums[p] + "</font>";
        }
        //innerHTML用於設定或返回指定標籤之間的 HTML 內容  這裡是把idCode新增到 id="getCode"的標籤下面
        document.getElementById("getCode").innerHTML = idCode;
    };

寫得很一般,不要介意哈

Javascript點選事件獲取四位數驗證碼

寫一個簡單的四位數驗證碼以供大家學習以下是HTML程式碼: <body> <div id="getCode"></div> <button id="btn">獲取驗證碼</button>

JavaScript ----點選事件 * 點選圖片改變圖片路徑,達到開關燈效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></tit

Button設定點選事件的四種方式

Button的點選事件可以有好多種你知道麼? 第一種(匿名內部類): private Button btn1; @Override protected void onCreate(Bundle savedInstanceState) { supe

JavaScript ----點選事件 * 點選圖片改變圖片路徑,達到開關燈效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &l

在listview點選事件獲取長度出現IndexOutOfBoundsException

private List<RedRecordsBean.DataEntity.PageEntity> page; listrds.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override

Android點選事件的四種寫法

Android中獲取到按鈕後,我們一般會為其新增點選事件，而android中的點擊事件共有四種。 **一.通過匿名內部類來實現：**程式碼如下 btn_call.setOnClickListener(new OnClickListener() { @Overr

android listview系列之item的點選事件及item佈局中的點選事件（四）

很多時候listview只顯示簡略資訊，我們需要點選子項去跳轉或在顯示詳細資訊的位置，將相關的詳細資訊顯示出來，listview提供了onItemClickListener()方法，在方法中我們可以執行我們需要的內容。 listview.setOnItem

Jquery實現點選事件的四種寫法

1. $(".tab").click(function () { })2. $(".tab").on("click",function () { })3. $(document).on("click", ".tab",function () { })4. 使用<o

JavaScript點選事件-一個按鈕觸發另一個按鈕

<input type="button" value="Click" id="C" onclick="Go();"> <input type="button" value="Wait" id="W" onclick="javascript:alert('A

CSS偽類選擇器active模擬JavaScript點選事件

一、說明設定元素在被使用者啟用（在滑鼠點選與釋放之間發生的事件）時的樣式。 IE7及更早瀏覽器只支援a元素的:active，從IE8開始支援其它元素的:active。另：如果需要給超連結定義：訪問前，滑鼠懸停，當前被點選，已訪問這4種偽類效果，而又沒有按照一致的書寫順

angularjs 點選事件獲取點選物件

<div class="provinceFont" data-ng-click="go($event)" ng-mouseenter="additemcss($event)" ng-mouseleave="removeitemcss($event)">{{y}}

點選事件獲取滑鼠座標位置（x,y）值

$(document).click( function(event){ event = event || window.event;

生成四位數驗證碼

$str = "abcdefghigklmnopqrstuvwxyz0123456789" //9是整個字串的長度-1（36-1=35） //echo strlen($str);整個字串的長度 rand-產生一個隨機整數 int rand(void) //表示沒有任何的引數 int

Android studio程式碼實現打電話+點選事件四種方式

?Android系統架構（重點）第一層：應用層Application 第二層：應用框架層Application Framework 第三層：Android底層類庫層 Libraries、Dalvik虛擬機器第四層：linux核心層 linux kernel Android是執行在

字串拼接，字串裡面有點選事件，點選事件裡面有動態獲取的引數

html='<select class="placeWidth fl" id="' + data.returnData[i].children[j].pfieldname + '_ss" onchange="refreshQList_sy(\' '+data.returnData[i].childre

Android四種點選事件方法

Android四種點選事件方法 android中的按鈕點選事件，有四種： 1.內部類 2.匿名內部類 3.佈局資料夾定義Onclick屬性,並在activity中宣告方法 4.在主類中實現OncickListener介面,並在主類中實現未實現的方法 1、內部類點

微信分享，獲取分享點選事件，登入後才可以分享

1.登入微信公眾平臺 2.獲取開發者ID(AppID),開發者密碼(AppSecret) 3.配置js安全域名,下載.txt檔案放到專案跟目錄 4.控制器 <?php namespace M\Controller; use Think\Controller; class

獲取場景中的所有按鈕，並新增點選事件

void Start() {//初始化時獲取所有按鈕新增監聽 Addlisteningevent(); } public void Addlisteningevent() {//查詢所有按鈕 Button[] allObj =

（自我學習篇之高德地圖）使用與獲取marker的點選事件

獲取之後下載SDK然後倒入libs用什麼導什麼我先簡單說一個2D的實現與獲取marker的點選事件 3d的多了一步 OK就可以使用了注意許可權 <uses-permission android:name="android.permission

javaScript的點選事件的寫法

1.使用DOM的事件方法 <!DOCTYPE html> <html> <head> <title>Javascript中點選事件方法一</title> </head> <body>

Javascript點選事件獲取四位數驗證碼

相關推薦