【JavaScript隨機生成驗證碼及其顏色】

時間 2019-12-09

標籤 javascript 隨機生成驗證碼及其顏色欄目 JavaScript 简体版

原文原文鏈接

css樣式：


<style type="text/css">
            /*給驗證碼設一個盒子*/
            #yzm{
                width: 120px;
                height: 50px;
                text-align: center;
                background: #ccc;
                float: left;
            }
            span{
                font-size: 20px;
                line-height: 50px;
            }
            /*按鈕*/
            button{
                width: 100px;
                height: 50px;
            }
</style>

html代碼：


<body onload='yanzhengma()'>
    <!--在頁面加載時就執行這個函數-->
    <div id="yzm">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
    </div>
    <!--點擊事件-->
    <button onclick="yanzhengma()">刷新</button>
</body>

js代碼：

<script type="text/javascript"> 
             //先寫出一些須要隨機的數字及字母
            var shu = ('1234567890qwertyuioplkjhgfdsazxcvbnmQAZWSXEDCRFVTGBYHNUJMIKOLP');
            //獲取span
            var span = document.getElementsByTagName("span");
            //定義一個函數爲yanzhengma()
            function yanzhengma(){
                var yzm=" ";
                //想要幾個循環幾個數值
                for(i=0;i<4;i++){
                    //隨機Math.random()出的值乘以數組的長度，取出的值爲數組的下標
                    var num = parseInt(Math.random() * shu.length);
                    //取出shu中的值,利用上面取出的下標num,此時取出的是數組中的值
                    yzm = shu[num];
                    //把隨機取到的值經過innerHTML在頁面上
                    span[i].innerHTML=yzm;
                    //把隨機出的值經過style.color賦予顏色 ，Color()是本身封裝的一個隨機顏色函數   
                    span[i].style.color=color();
                }
            }
    </script>

顏色封裝的代碼：


/*封裝Color*/
    function color(){
        var color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
        return color;
    }

注意：封裝在寫完的時候千萬千萬記住要把它引入HTML中！！

效果：javascript