<!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>Document</title> <style> .box{ width: 105px; height: 45px; text-align: center; line-height: 45PX; background-color: #ccc; margin: 0 auto; } </style> </head> <body> <div class="box"> <span>Y</span><span>w</span><span>2</span><span>a</span> </div> <script> // a-z A-Z 0-9 // 从以上这些符号中随机产生4个符号拼接 var str ='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; var box = document.getElementsByClassName("box")[0]; var spans = document.getElementsByTagName("span"); for(var i=0;i<4;i++){ var index =Math.round(Math.random()*61); // str [index] var r = Math.round(Math.random()*255);//生成0-255随机整数 var g = Math.round(Math.random()*255); var b = Math.round(Math.random()*255); var fontSize =Math.floor(Math.random()*21)+20; console.log(r,g,b,fontSize); spans[i].innerHTML = str[index]; spans[i].style.color = "rgb("+r+","+g+","+b+")"; spans[i].style.fontSize = fontSize +"px"; } </script> </body> </html>
效果图如下：
新学习的js，迫不及待的用来试验下午刚写的随机验证码。欢迎大家品论，指导。