方法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>
标签：颜色,random,number,生成,随机,str,var,div,Math From： https://www.cnblogs.com/hofenglang/p/16922584.html