随机验证码以及随机色的实现

首先先添加结构 <div id="box"></div>

接下来给div添加css样式层

    <style>
    #box{
    width: 800px;
    height: 600px;
    font-size: 100px;
    line-height: 600px;
    color: aquamarine;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 20px;
    border-radius: 50% ;
    box-shadow:10px 20px 30px gray
}
</style>

然后用js代码实现随机字符串 在字符串str中随机获取6个不同的字符串

var str = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM01456789";

function getWord() {
    var str1 = ''
    while (str1.length < 6) {
        var n = Math.round(Math.random() * 61)
        if (str1.indexOf(str[n]) === -1) {
            str1 += str[n]
        }
    }
    return str1 }

js给box动态添加随机背景色代码：

 box.style.background = 'rgb(' + Math.round(Math.random() * 255)  + ','
  + Math.round(Math.random() * 255) + ',' + Math.round(Math.random()
  * 10) + '';
 }, 1000)

让验证码和背景色在页面上按照一定时间间隔随机展示

 setInterval(() => {
  box.innerHTML = getWorld();   
  box.style.background = 'rgb(' + Math.round(Math.random() * 255)  + ','
  + Math.round(Math.random() * 255) + ',' + Math.round(Math.random()
  * 10) + '';
 }, 1000)