随机验证码代码/JS五

知识点

产生随机数:Math.random()生成0到1之间 的小数。

效果如下:

点击时

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .test {
            width: 180px;
            height: 40px;
            line-height: 40px;
            background-color: #808080;
            font-weight: 800;
            margin: 100px auto;
            font-size: 30px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<script src="获取元素.js"></script>
<div class="test">
    <span>G</span>
    <span>h</span>
    <span>j</span>
    <span>k</span>
</div>

<script>

window.onload = function () {
    var spans = my$All('.test span')
    var code = ['a','b','c','d','e','A','J','H','O','P','U'] // 11
    //产生0-11的随机数 Math.random() 0-1小数 [) [0-11) 10.3-->向下取整
    var RanColor = ['red','purple','brown','black','#fff','#234567','#777','#222','#FFE'
    ,'yellow','pink']
    my$('.test').onclick = function () {
        //1.产生随机字母 4个 循环放到span标签里
        for(var i =0;i<4;i++){
            var num =Math.floor( Math.random()*11)  //下标 0-10
            var num1 =Math.floor( Math.random()*11)  //下标 0-10
            spans[i].innerText =  code[num] //随机字母赋值到span标签里
            spans[i].style.color = RanColor[num1]
        }
    }

}
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_39112101/article/details/88914046
今日推荐