zoukankan      html  css  js  c++  java
  • js随机生成验证码以及随机颜色

    Javascript通过Math.random()随机生成验证码。

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>随机验证码</title>
    <style>
    .p1{
    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="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;
    }

    //效果图如下:

  • 相关阅读:
    第九次作业
    第八次作业
    第七次作业
    第六次作业
    第五次作业
    第四次作业
    第三次作业
    第二次作业
    第一次作业
    《Java技术》第三次作业--面向对象——继承、抽象类、接口
  • 原文地址:https://www.cnblogs.com/cyjfighting/p/8196718.html
Copyright © 2011-2022 走看看