2020-08-03

作者: 5d169b30b744 | 来源:发表于2020-08-06 09:32 被阅读0次

眼睛
【D219】构建人生的基础：接纳+感恩——写作营共读打卡第186
独立开发者记录的第五周
世界麻烦不断，我们怎么保持好自己的生产力？
不同格式U盘复制含特殊字符名称的文件结果不一样
阅读打卡之《我们仨》04-06
2020-08-03
2020-08-03
2020-08-03
2020-08-03

前端小白，初来乍到。封装了几个基础方法。希望大佬们指点！

随机区间数方法

function randomNum(min,max){
    return Math.round(Math.random()*(max-min)+min);
}

随机颜色方法

function randomColor(){
    let str="0123456789abcdef";
    let a="#";
    for(let i=0;i<6;i++){
        let random=randomNum(0,15);
        a+=str.charAt(random);
    }
    return a;
}

num位随机混合验证码方法


function randomCode(num){//随机生成num位数字字母混合验证码
    let code="";
    for(let i=0;i<num;i++){
        let str=String.fromCharCode(randomNum(48,122));//asc码随机
        if((str>='a'&&str<='z')||('0'<=str&&str<='9')||('A'<=str&&str<='Z')){
            code+=str;
        }else{
            i--;
        }
    }
    return code;
}

基于上面的方法做一个小demo，随机生成大小的小圆圈，碰壁运动，每次碰壁变色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            body{
                background-color:black;
            }
            div{
                position:absolute;
                border-radius: 50%;
                box-shadow: 1px 1px 5px 5px rgba(211,211,211,.5);
                text-align: center;
                color: #F6F9FC;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
    </body>
</html>
<script src="hubble.js"></script>
<script type="text/javascript">
        let time=null;
        let count=1;
        time=setInterval(function(){
            clearInterval("time");
            var obox=document.createElement("div");
            document.body.appendChild(obox);
            obox.style.backgroundColor=randomColor();
            obox.style.width=randomNum(60,150)+"px";
            obox.style.height=obox.offsetWidth+"px";
            obox.style.lineHeight=obox.offsetHeight+"px";
            obox.innerText=count;
            // if(count==30){//停止个数
            //  clearInterval(time);
            // }
            touch(obox);
            count++;
        },1000);
</script>

/* hubble.js文件代码*/
function randomColor(){//随机颜色
    let str="0123456789abcdef";
    let a="#";
    for(let i=0;i<6;i++){
        let random=randomNum(0,15);
        a+=str.charAt(random);
    }
    return a;
}

function randomNum(min,max){//随机区间数
    return Math.round(Math.random()*(max-min)+min);
}

function randomCode(num){//随机生成num位数字字母混合验证码
    let code="";
    for(let i=0;i<num;i++){
        let str=String.fromCharCode(randomNum(48,122));//asc码随机
        if((str>='a'&&str<='z')||('0'<=str&&str<='9')||('A'<=str&&str<='Z')){
            code+=str;
        }else{
            i--;
        }
    }
    return code;
}

function touch(obj){//碰壁回弹
    let speedX=randomNum(2,12);
    let speedY=randomNum(5,15);
    let time=null;
    time=setInterval(function(){
        obj.style.top=obj.offsetTop+speedY+"px";
        obj.style.left=obj.offsetLeft+speedX+"px";
        if(obj.offsetTop<0){
            speedY*=-1;//碰到上边框换Y的方向
            obj.style.backgroundColor=randomColor();
        }
        if(obj.offsetLeft<0){
            speedX*=-1;//碰到左边框换X的方向
            obj.style.backgroundColor=randomColor();
        }
        let maxLeft=window.innerWidth-obj.offsetWidth-15;
        if(obj.offsetLeft>maxLeft){
            speedX*=-1;//碰到右边框换X的方向
            obj.style.backgroundColor=randomColor();
        }
        let maxBottom=window.innerHeight-obj.offsetHeight-15;
        if(obj.offsetTop>maxBottom){
            speedY*=-1;//碰到下边框换Y的方向
            obj.style.backgroundColor=randomColor();
        }
    },30)
}