随机颜色

一、随机颜色

js操作html 需要2步：

1.通过js获取到html里的标签(getElementByid) 2.再操作这个标签

正规的做法用getElementByid

//1.获取标签
<div id="box">111</div>
```js
var ele=document.getElementByid("box");
// console.log(box)  // 直接通过 id得到的标签   不主流的做法
// console.log(ele);  // 通过 getElementById来获取到的标签  正规的做法

// 2.操作这个标签 
ele.style.color = "blue";

二、获取到body这个标签

console.log( document.body )   //就是body的标签  document就是文档 就是我们写的html

二、设置body的背景颜色

//方法1
//document.body.style.backgroundColor="yellow";
//方法2
var newbody=document.body;
newbody.style.backgroundColor="yellow";

三、随机设置body的背景颜色

newbody.style.backgroundColor=rgb(211,232,112);//这三个数能不能随机生成

// 把num1  和 num2  和num3 随机生成
function randomNum(min, max) {
            return parseInt(Math.random() * (max + 1 - min) + min);
}
setInterval(() => {
            var num1 = randomNum(0, 255);
            var num2 = randomNum(0, 255);
            var num3 = randomNum(0, 255);
            mybody.style.backgroundColor = "rgb(" + num1 + "," + num2 + "," + num3 + ")";
        }, 100);//
        //注意：三行var的num放在定时器内外的效果是不一样的，放在外面只会执行一次；放在里面他会循环调用num函数，生成新的num；如果把随机生成颜色的函数放在了定时器外边的话那么 颜色只会随机一次，大家可以试试。
   

进制转换

// 1.toString(要转换的进制数) 把一个数字转成几进制
// toString如果不加参数 默认就是把一个数字转成10进制字符串 
// 0-9 a-f  就是10是a  11是b  12是c.......
        var a = 10;
        var res = a.toString(16);
        console.log(res);//a

// 2.parseInt : 把一个数当成几进制 ，返还10进制的结果(了解)
        var a = 12;
        var res =  parseInt(a,16);
        console.log(res);//18   就是把12由10进制转换成16进制的结果

十六进制的随机颜色

来一个16进制随机颜色 改变 body的背景 颜色通过16进制来表示

function randomNum(min, max) {
var num = parseInt(Math.random() * (max + 1 - min) + min).toString(16);
    if (num.length < 2) {
                num = 0 + num;
            }
            return num;
        }
 // 主流做法 
        setInterval(() => {
            var num1 = randomNum(0, 255);
            var num2 = randomNum(0, 255);
            var num3 = randomNum(0, 255);
document.body.style.backgroundColor = "#" + num1 + num2 + num3;}, 100);

// 比较死板的办法 
var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
        function  randomNum(min,max) {
            return parseInt(Math.random()*(max+1-min)+min);
        }
        var key1 = randomNum(0,arr.length-1);
        var key2 = randomNum(0,arr.length-1);
        var key3 = randomNum(0,arr.length-1);
        var key4 = randomNum(0,arr.length-1);
        var key5 = randomNum(0,arr.length-1);
        var key6 = randomNum(0,arr.length-1);
        // console.log(arr[key]);
        document.body.style.backgroundColor = "#" + arr[key1] + arr[key2] + arr[key3]+arr[key4]+arr[key5]+arr[key6];