随机例题

1.老师例题

<body>
<div id="box"></div>
<script>
//获取验证码的区域
var box = $("box");
//验证码字符个数
var num = 6;
var arr = [0,1,2,3,4,5,"a","b","c","A","B","C"];
var words_ = "";
//取每个字符
for(var i=1;i<=num;i++){
     //随机取的下标
     var index = parseInt(Math.random()*arr.length);
     var words = "<span>"  +  arr[index]  +  "</span>";
     words_ += words;
}
//把循环取出的字符赋给页面容器
box.innerHTML = words_;
//获取字符块然后给随机颜色
for(var i=1;i<=num;i++){
     document.getElementsByTagName("span")[i-1].style.color  =  randomColor();
}
//取id
function $(idName){
     return document.getElementById(idName);
}
//随机颜色值
function randomColor(){
       var color_num1 = parseInt(Math.random()*255);
       var color_num2 = parseInt(Math.random()*255);
       var color_num3 = parseInt(Math.random()*255);
       color = "rgb(" + color_num1 + ","+ color_num2 +","+ color_num3 +")";
       return color;
}
</script>
</body>

 

2.自己仿写的

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        #box{
                width:800px;
                height:500px;
                border:1px solid #000;
                margin:200px auto;
                display:flex;
                justify-content:space-between;
        }
        #box div{
                width:200px;
                height:500px;
                border-right:1px solid #000;
                line-height:500px;
                text-align:center;
                font-size:100px;
        }
        </style>
</head>
<body>
           <div id="box">
                  <div>1</div>
                  <div>2</div>
                  <div>3</div>
                  <div>4</div>
           </div>
           <script> 
                       var box = document.getElementById("box");
                       for(var i=0;i<4;i++){
                            var num = box.getElementsByTagName('div') 
                            [i];
                            num.innerHTML=randnum();
                            num.style.color=randcolor();
                        }
                        function randnum(){
                              var z  = [0,1,2,3,4,5,6,7,8,9,'q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m','Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M']    
                              var rands=parseInt(Math.random()*61);
                              return z[rands]; 
                        }
                        function randcolor(){
                              var z = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
                              var res="";
                              for(var i=1;i<=6;i++){
                                   var id=parseInt(Math.random()*15);
                                   res+=z[id];
                              }
                              return  "#"+res;                           
                         }
                         console.log(randcolor());  
</script>
</body>

 

posted @ 2019-08-15 16:51  不知名网友  阅读(139)  评论(0)    收藏  举报