欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)隨機(jī)8位驗(yàn)證碼

 更新時間：2020年07月24日 08:48:48   作者：fanfan_h  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)8位驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

開發(fā)思路：

1.畫出放置驗(yàn)證碼的模塊、一個寫有“看不清…”的小塊，以及輸入驗(yàn)證碼的文本框
2.獲取各個模塊
3.封裝一個函數(shù)Yan_ma（），設(shè)置驗(yàn)證碼為8位，里面含有數(shù)字，小寫字母，小寫字母和中文。每種類型出現(xiàn)的可能性為25%。
4.隨機(jī)數(shù)字在0-9，之間。對Math.ramand（）向下取整。
5.隨機(jī)大小寫字母使用fromCharCode() 方法：將 Unicode 編碼轉(zhuǎn)為一個字符，例如：

var n = String.fromCharCode(65);
cosole.log(n);
//輸出j結(jié)果為A

大寫字母（65-91） 小寫字母（97-123）

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));

6.隨機(jī)中文，聲明變量letter放置中文字符串，使用charAt()隨機(jī)在letter中獲得某個漢字。

var letter = "如若可以親愛的請?jiān)S我青燈墨下執(zhí)一筆素箋今生為你吟盡千回百轉(zhuǎn)念";
var s = letter.charAt(Math.floor(Math.random() * letter.length));

7.給每位驗(yàn)證碼設(shè)隨機(jī)的顏色，字體大小，相對文本位置，旋轉(zhuǎn)角度。給顏色封裝一個函數(shù)，使用十六進(jìn)制顏色（如：#ffffff）

//隨機(jī)顏色
 function fontcolor(){
  var s1="";
  for(var k=0;k<6;k++){
   var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
   var m=z[Math.floor(Math.random() * z.length)];
   s1 +=m;
  }
  return "#"+s1;
  }

隨機(jī)位置和隨機(jī)旋轉(zhuǎn)角度的方法相同

隨機(jī)位置可能為向上下左右偏移 8px, 隨機(jī)旋轉(zhuǎn)角度可能為繞著z軸旋轉(zhuǎn)（±45度）。

8.提前聲明一個空字符串 str 讓每位驗(yàn)證碼用字符串連接起來.

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
 arr+=s;

9.讓8位驗(yàn)證碼出現(xiàn)在第一個大模塊中的innerHTML中。

10.給寫有“看不清”的span標(biāo)簽添加點(diǎn)擊事件，點(diǎn)擊時，調(diào)用函數(shù)Yan_ma，刷新驗(yàn)證碼。

11.如果輸入的驗(yàn)證碼不正確，則彈出“驗(yàn)證成功”，否則彈出“驗(yàn)證失敗”。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>隨機(jī)驗(yàn)證碼</title>
 <script>
 var arr="";
 window.onload=function() {
  var maa = document.getElementsByClassName("block")[0];
  var looking = document.getElementById("look");
  var put = document.getElementById("text");
  var btnn = document.getElementById("btn");
  Yan_ma(maa);
  looking.onclick=function (){
  Yan_ma(maa);
  };
  btnn.onclick=function(){
  if(put.value.toLowerCase()==arr.toLowerCase()){
   alert ("驗(yàn)證成功");
  }
  else{
   alert ("驗(yàn)證失敗");
   Yan_ma(maa);
  }
  }

 };


  function Yan_ma(aim) {
  arr ="";
  var str="";
  for (var i = 0; i < 8; i++) {
   //隨機(jī)數(shù) Math.random 0-1 的隨機(jī)值
   var n = Math.random();
   //隨機(jī)顏色
   var color=fontcolor();
   //隨機(jī)大小
   var size=Math.floor (Math.random ()*12 +20);
   //隨機(jī)位置
   var g=Math.random() <0.5 ? -1: 1;
   var topset=Math.random ()*g*8;
   //隨機(jī)旋轉(zhuǎn)
   var h=Math.random() <0.5 ? -1: 1;
   var zhuan=Math.random ()*h*45;
   if (n < 0.25) {
   //隨機(jī)數(shù)字
   var s = Math.floor(Math.random() * 10);
   str+="<span style='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
   arr+=s;
   }
   //隨機(jī)大寫字母 //65-91
   else if (n >= 0.25 && n < 0.5) {
   var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
   str+="<span style='transform:rotatez("+ zhuan +"deg); left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
   arr+=s;
   }
   //隨機(jī)小寫字母 97-123
   else if (n >=0.5 && n < 0.75) {
   var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
   str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";
   arr+=s;
   }
   //隨機(jī)文字
   else {
   var letter = "如若可以親愛的請?jiān)S我青燈墨下執(zhí)一筆素箋今生為你吟盡千回百轉(zhuǎn)念";
   var s = letter.charAt(Math.floor(Math.random() * letter.length));
   str+="<span style='transform: rotatez("+ zhuan +" deg) ; left:"+topset+"px; color: " +color +";font-size:"+size+"px;top:"+topset+"px '>"+s+"</span>";
   arr+=s;
   }
  }
  aim.innerHTML =str;
  }

  function fontcolor(){
  var s1="";
  for(var k=0;k<6;k++){
   var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
   var m=z[Math.floor(Math.random() * z.length)];
   s1 +=m;
  }
  return "#"+s1;
  }

 </script>
 <style>
 .block{
  width:250px;
  height:60px;
  background:url("bg2.png") no-repeat center;
  background-size: 100%;
  text-align: center;
  line-height: 60px;
 }
 .block span{
  position: relative;
  display: inline-block;
  width:20px;
  margin:5px 3px;
 }
 #look{
  color: #9200ff;
 }
 #look:hover{
  cursor: pointer;
 }
 </style>
</head>
<body>
<div class="block">
</div>
<span id="look">看不清...</span>
<br/>
<input type="text" id="text" placeholder="請輸入驗(yàn)證碼" />
<button id="btn">驗(yàn)證</button>
</body>
</html>

出現(xiàn)的驗(yàn)證碼

當(dāng)輸入正確驗(yàn)證碼時

當(dāng)沒輸入錯誤驗(yàn)證碼時

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動效果)實(shí)例代碼

    JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動效果)實(shí)例代碼

    這篇文章主要介紹了offsetLeft實(shí)現(xiàn)圖片滾動效果實(shí)例代碼，有需要的朋友可以參考一下
    2013-11-11
  • 使用flutter創(chuàng)建可移動的stack小部件功能

    使用flutter創(chuàng)建可移動的stack小部件功能

    本文主要介紹我為桌面和 Web 設(shè)計(jì)的一個超級秘密 Flutter 項(xiàng)目使用了畫布和可拖動節(jié)點(diǎn)界面。本教程將展示我如何使用堆棧來使用小部件完成可拖動功能,需要的朋友可以參考下
    2021-10-10
  • js對url進(jìn)行編碼解碼的三種方式總結(jié)

    js對url進(jìn)行編碼解碼的三種方式總結(jié)

    為一個字符串進(jìn)行URL編碼很容易,只需要調(diào)用encodeURI,傳入要編碼的字符串即可,而且實(shí)現(xiàn)的方法不止這一個,下面這篇文章主要給大家介紹了關(guān)于js對url進(jìn)行編碼解碼的三種方式,需要的朋友可以參考下
    2023-02-02
  • Bootstrap每天必學(xué)之導(dǎo)航條(二)

    Bootstrap每天必學(xué)之導(dǎo)航條(二)

    Bootstrap每天必學(xué)之導(dǎo)航條，進(jìn)一步向大家講解了導(dǎo)航條養(yǎng)殖，以及導(dǎo)航條中元素的使用方法，感興趣的小伙伴們可以參考一下
    2016-03-03
  • Javascript 是你的高階函數(shù)(高級應(yīng)用)

    Javascript 是你的高階函數(shù)(高級應(yīng)用)

    這篇文章主要介紹了Javascript 是你的高階函數(shù) ,需要的朋友可以參考下
    2015-06-06
  • JS實(shí)現(xiàn)隨機(jī)顏色的3種方法與顏色格式的轉(zhuǎn)化

    JS實(shí)現(xiàn)隨機(jī)顏色的3種方法與顏色格式的轉(zhuǎn)化

    隨機(jī)顏色和顏色格式是我們在開發(fā)中經(jīng)常要用到的一個小功能，網(wǎng)上相關(guān)的資料也很多，想著有必要總結(jié)一下自己的經(jīng)驗(yàn)。所以這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)顏色的3種方法與顏色格式的轉(zhuǎn)化,需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-01-01
  • 一個兼容FF的智能超長文章分頁JS

    一個兼容FF的智能超長文章分頁JS

    這篇文章主要介紹了一個兼容FF的智能超長文章分頁JS的相關(guān)資料,需要的朋友可以參考下
    2007-07-07

    • 最新評論