Java教程

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

本文主要是介绍随机系列(随机数、颜色、验证码、大小圆)-----前端(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
    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>

 

 

这篇关于随机系列(随机数、颜色、验证码、大小圆)-----前端(JavaScript)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航