JavaScript點選按鈕生成4位隨機驗證碼
阿新 • • 發佈：2021-01-29
本文例項為大家分享了js實現點選按鈕生成4位隨機驗證碼的具體程式碼，供大家參考，具體內容如下
效果圖：
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 50px;
background: red;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="yzm"></div>
<button id="btn">點選生成驗證碼</button>
<script>
// var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
//陣列轉換為字串
// var arr = str.split("");
var arr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","0","1","2","3","4","5","6","7","8","9"];
// console.log(arr);
//頁面剛載入時候呼叫它
sjs(arr);
btn.onclick = function() {
sjs(arr);
}
function sjs(arr) {
var code = Math.floor(Math.random() * arr.length);
var code1 = Math.floor(Math.random() * arr.length);
var code2 = Math.floor(Math.random() * arr.length);
var code3 = Math.floor(Math.random() * arr.length);
var n = arr[code] + arr[code1] + arr[code2] + arr[code3];
yzm.innerHTML = n
}
</script>
</body>
</html>小編再為大家分享一段程式碼：點選產生四位隨機數字母與數字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>點選產生隨機數</title>
<style>
span{
display: block;
width: 110px;
height: 50px;
border: 1px solid red;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<span id="demo" onclick="init();"></span>
<script>
init();
function init(){
var arr=[];
for(var i=48;i<123;i++){
if(i>57 && i<65) continue;
if(i>90 && i<97) continue;
arr.push(String.fromCharCode(i));
}
arr.sort(function () {
return Math.random()-0.5;
});
arr.length=4;
var span= document.getElementById('demo');
span.textContent=(arr.join(""));
}
</script>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。