js隨機生成驗證碼以及隨機顏色


Javascript通過Math.random()隨機生成驗證碼。

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隨機驗證碼</title>
<style>
.p1{
width:100px;
height:30px;
border:1px solid black;
}
</style>
</head>

//onload頁面加載完成后立即觸發函數
<body onload="sj()">
<input class="p1">
<p style="font-size:30px;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</input>

//通過onlick(點擊事件)觸發函數
<button style="width:80px;height:30px;" onclick="sj()">換一波</button>

//引入js外部文件(封裝函數)
<script type="text/javascript" src="../js/sj_fzhs.js"></script>
<script type="text/javascript">
//定義隨機字符串
var array="1234567890ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwsyz";

//獲取到span標簽
var span=document.getElementsByTagName('span');

//定義一個函數
function sj(){
var code="";

//進行for循環
for(var i=0;i<=6;i++){

//首先隨機數組的長度
var zm=parseInt(Math.random()*array.length);

//然后取出隨機數組中的真正的值

code=array[zm];

//將上面取到的<span>元素通過innerHTML賦值給code
span[i].innerHTML=code;

//最后隨機出的值通過style.color賦予隨機顏色,這里我用到了一個封裝函數randomColor()

span[i].style.color=randomColor();
}
}
</script>

</body>
</html>

//封裝函數(隨機顏色)

function randomColor(){
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
var rgb="rgb("+r+","+g+","+b+")";
return rgb;
}

//效果圖如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM