随机系列(随机数、颜色、验证码、大小圆)-----前端(JavaScript)

最新推荐文章于 2022-04-19 10:51:42 发布

weixin_45971935

最新推荐文章于 2022-04-19 10:51:42 发布

阅读量342

点赞数 3

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_45971935/article/details/122225792

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

随机数

<script>
    //一个范围内的随机数
    function getNumber(min,max){
        return Math.floor(Math.random()*(max-min+1)+min)
    }
    //比如说产生10-20内的随机数
    console.log(getNumber(10,20));
</script>

随机颜色

<script>
    //随机颜色方法1
    function getColor(){
        var str='0123456789abcdef'
        var newstr=''
        for(let i=0;i<6;i++){
            //产生一个随机下标
            var n=getNumber(0,str.length-1)
            newstr+=str.charAt(n)
        }
        return '#'+newstr
    }
    //随机颜色方法2
    function getColor1(){
        return '#'+parseInt(getNumber(0x000000,0xffffff)).toString(16)
    }
    //比如刷新页面产生随机背景色
    document.body.style.backgroundColor=getColor1()
</script>

随机验证码

<style>
    button{
        background-color: fuchsia;
        margin-bottom: 5px;
    }
    div{
        width: 300px;
        height: 150px;
        border: fuchsia 1px solid;
        text-align: center;
        line-height: 150px;
        font-size: 60px;
    }
</style>
</head>
<body>
    <button>按钮</button>
    <div></div>
</body>
</html>
<script>
    //获取按钮
    let oBtn=document.querySelector('button')
    let oDiv=document.querySelector('div')
    //随机验证码
    function getYanZhenMa(){
        let str='QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789'
        let newstr=''
        for(var m=0;m<4;m++){
            let n=getNumber(0,str.length-1)
            newstr+=str.charAt(n)
        }
        return newstr;
    }
    //随机验证码(此方法去除了重复的)
    function getYzm(){
        let str='QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789'
        let newarr=[]
        var n=0;
        while (true) {
            var s=str.charAt(getNumber(0,str.length-1))
            if(newarr.indexOf(s)==-1){
                n++;
                newarr.push(s)
            }if(n==4){
                break;
            }
        }
        return newarr.join('')
    }

    oBtn.onclick=function(){
        // oDiv.innerHTML=getYanZhenMa()
        oDiv.innerHTML=getYzm()
        oDiv.style.backgroundColor=getColor()
        oDiv.style.color=getColor1()
        //设置验证码的随机字体大小
        oDiv.style.fontSize=getNumber(30,100)+'px'
    }
</script>

点击按钮，产生100个随机大小，随机颜色，随机位置的圆

<script>
    function getNumber(min,max){
        return Math.floor(Math.random()*(max-min+1)+min)
    }
    function getColor1(){
        return '#'+parseInt(getNumber(0x000000,0xffffff)).toString(16)
    }
    function getSjy(){
        var str=''
        for(var i=1;i<=100;i++){
            var oDiv=document.createElement('div')
            var n=getNumber(100,200)
            oDiv.style.width=n+'px'
            oDiv.style.height=n+'px'
            oDiv.style.borderRadius='50%'
            oDiv.style.position="absolute"
            oDiv.style.left=getNumber(0,window.innerWidth-n)+'px'
            oDiv.style.top=getNumber(0,window.innerHeight-n)+'px'
            oDiv.style.background=getColor1()
            str+=oDiv.outerHTML
        }
        return str;
    }
    // document.querySelector("button").onclick=function(){
    //     // console.log(document.querySelector('button'));
    //     document.body.innerHTML=getSjy()
    // }
    //点击按钮换成定时器
    setInterval(function(){
        document.body.innerHTML=getSjy()
    },1000)
</script>

weixin_45971935

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
随机系列(随机数、颜色、验证码、大小圆)-----前端(JavaScript)

随机数 <script> //一个范围内的随机数 function getNumber(min,max){ return Math.floor(Math.random()*(max-min+1)+min) } //比如说产生10-20内的随机数 console.log(getNumber(10,20));</script> 随机颜色 <script> //随机颜色方法1 fun..
复制链接

扫一扫