生成随机颜色()

方法1 

function randdomColor1() {
            var str = '#'
            for (var i = 0; i < 6; i++) {
                str += parseInt(Math.random() * 16).toString(16);//转换成16进制
            }
            return str
        }

方法2

function randdomColor2() {
            var str = 'rgb(';
            for (var i = 0; i < 3; i++) {
                str += parseInt(Math.random() * 256) + ','
            }
            str = str.slice(0, str.length - 1);
            return str + ')';
        }

方法3

//随机颜色的方法
        function randomColor(){
            var r = Math.random() * 255
            var g = Math.random() * 255
            var b = Math.random() * 255
            return `rgb(${r},${g},${b})`      }

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: red;
            font-size: 16px;
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>
        看我七十二变
    </div>
    <script>
        // 2,  写一个定时器, 每隔0.1秒修改一次div内文字颜色和文字大小. 
        //  最开始这个文字是默认大小, 开启定时器后文字大小开始增大, 当增大了6次以后, 
        //  文字大小开始缩小, 缩小6次, 文字再开始增大…效果如下图:
        //第一种写法
        // var div = document.querySelector('div')
        // //保存对应的颜色及相关的字体大小
        // var fontStyleArr = [['greenyellow','16px'],['yellow','24px'],['green','32px'],['pink','40px'],['black','48px'],,['blue','56px']]
        // var number = 0 //增大和减小的判断
        // setInterval(function(){
        //     //1-6 增大 7-12 减小 13 - 18 增大 19 - 24 减小
        //     number++ //增大
        //     if(Math.ceil(number/6)%2 !=0){
        //         // 0-5
        //         var index = (number-1)%6
        //         //增大 奇数
        //     }else{
        //         //减小 偶数 7-12  5-0  19-24  5-0  偶数*6 - 当前数
        //         var index = Math.ceil(number/6)*6 - number 
        //     }
        //     //设置
        //     div.style.color = fontStyleArr[index][0]
        //     div.style.fontSize = fontStyleArr[index][1]
        // },100)
        //第二种写法
        var div = document.querySelector('div')
        //保存初始的大小
        var size = 16
        var number = 0
        setInterval(function(){
            number++
            if(Math.ceil(number/6)%2){
                //奇数
                size += 8
            }else{
                //偶数
                size -= 8
            }
            div.style.color = randomColor()
            div.style.fontSize = size + 'px'
        },100)
        //随机颜色的方法
        function randomColor(){
            var r = Math.random() * 255
            var g = Math.random() * 255
            var b = Math.random() * 255
            return `rgb(${r},${g},${b})`
        }
    </script>
</body>
</html>
————————

方法1 

function randdomColor1() {
            var str = '#'
            for (var i = 0; i < 6; i++) {
                str += parseInt(Math.random() * 16).toString(16);//转换成16进制
            }
            return str
        }

方法2

function randdomColor2() {
            var str = 'rgb(';
            for (var i = 0; i < 3; i++) {
                str += parseInt(Math.random() * 256) + ','
            }
            str = str.slice(0, str.length - 1);
            return str + ')';
        }

方法3

//随机颜色的方法
        function randomColor(){
            var r = Math.random() * 255
            var g = Math.random() * 255
            var b = Math.random() * 255
            return `rgb(${r},${g},${b})`      }

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: red;
            font-size: 16px;
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>
        看我七十二变
    </div>
    <script>
        // 2,  写一个定时器, 每隔0.1秒修改一次div内文字颜色和文字大小. 
        //  最开始这个文字是默认大小, 开启定时器后文字大小开始增大, 当增大了6次以后, 
        //  文字大小开始缩小, 缩小6次, 文字再开始增大…效果如下图:
        //第一种写法
        // var div = document.querySelector('div')
        // //保存对应的颜色及相关的字体大小
        // var fontStyleArr = [['greenyellow','16px'],['yellow','24px'],['green','32px'],['pink','40px'],['black','48px'],,['blue','56px']]
        // var number = 0 //增大和减小的判断
        // setInterval(function(){
        //     //1-6 增大 7-12 减小 13 - 18 增大 19 - 24 减小
        //     number++ //增大
        //     if(Math.ceil(number/6)%2 !=0){
        //         // 0-5
        //         var index = (number-1)%6
        //         //增大 奇数
        //     }else{
        //         //减小 偶数 7-12  5-0  19-24  5-0  偶数*6 - 当前数
        //         var index = Math.ceil(number/6)*6 - number 
        //     }
        //     //设置
        //     div.style.color = fontStyleArr[index][0]
        //     div.style.fontSize = fontStyleArr[index][1]
        // },100)
        //第二种写法
        var div = document.querySelector('div')
        //保存初始的大小
        var size = 16
        var number = 0
        setInterval(function(){
            number++
            if(Math.ceil(number/6)%2){
                //奇数
                size += 8
            }else{
                //偶数
                size -= 8
            }
            div.style.color = randomColor()
            div.style.fontSize = size + 'px'
        },100)
        //随机颜色的方法
        function randomColor(){
            var r = Math.random() * 255
            var g = Math.random() * 255
            var b = Math.random() * 255
            return `rgb(${r},${g},${b})`
        }
    </script>
</body>
</html>