js之十六进制的随机颜色的字符串和rgb的随机颜色
取整数的方法很多:
如
parseInt() 转为整数,多的不要,
Math.round() 取最近整数,
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机颜色</title>
<style>
#box1,#box2{
width: 200px;
height: 200px;
margin: 0 auto;
border: solid black 1px;
}
</style>
</head>
<body>
<pre>
编写一个函数,获得一个十六进制的随机颜色的字符串(如#20CD4F)
编写一个函数,获得一个rgb的随机颜色的字符串(如rgb(123,216,45))
</pre>
<dir id="box1"></dir>
<dir id="box2"></dir>
<script>
(function(){
"use strict"
var box1= document.getElementById("box1");
var box2= document.getElementById("box2");
setInterval(function randomColor(){
var rgbRandom=Math.round(Math.random()*255);
var rgbRandom1=Math.round(Math.random()*255);
var rgbRandom2=Math.round(Math.random()*255);
var color2="0123456789ABCDEF";
var colorText="";
var color="";
color='rgb('+rgbRandom+','+rgbRandom1+','+rgbRandom2+')';
// console.log(color);
box1.style.background=color;
for(var i=0;i<6;i++){
var hexRandom1 =parseInt(Math.random()*color2.length);
colorText+=color2[hexRandom1];
}
var herColor="";
// console.log(colorText);
herColor="#"+colorText;
// console.log(herColor);
box2.style.background=herColor;
},1000)
})()
</script>
</body>
</html>