javascrip中的math对象，用setInterval()和Math.random()随机改变九宫格中的三个格子背景色

javascrip中math对象的常用属性和方法

一、常用方法：

1. Math.ceil(num)：向上取整；
2. Math.floor(num):向下取整；
3. Math.round(num):四舍五入；
4. Math.random():取随机数；
5. Math.PI:
6. Math.sqrt(num):开方；
7. Math.max(num1,num2,num3…):取最大值
8. Math.min(num1,num2,num3…):取最小值；
9. Math.pow(num1,num2):num1的num2次方；
10. Math.abs(num):取num的绝对值；

Math.random随机数的应用举例：

场景：获取九宫格中的随机三个格子，改变其颜色为随机色：

宽度自适应的九宫格html代码：

开始结束

九宫格css代码：

*{padding: 0;margin: 0;
}
html,body{font-size: 10px;
}
.box{float: left;margin-top: 3vw;margin-left: 4vw;width: 28vw;height: 28vw;border-radius: 15px;background-color: orange;
}
#btn1,#btn2{width: 100vw;height: 40px;margin-top: 20px;letter-spacing: 5px;background-color:white;color: orange;border-color: orange;/*outline: none;*/
}
#btn1:hover,#btn2:hover{background-color:orange;color: white;
}

九宫格js代码：

function begin(){int=setInterval(changeColor,300);//设置定时器，每隔300毫秒执行一次函数changecolor();function changeColor(){function getColor(){var color="#";var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];for (var i = 0; i < 6; i++) {color=color+arr[Math.floor(Math.random()*16)]}return color;}//<--随机获取十六进制颜色值function num(){var num;var count=[1,2,3,4,5,6,7,8,9];var num=count[Math.floor(Math.random()*9)];return num;}//<--随机获取1-9的数字;var box=document.getElementsByClassName('box');for (var j = 0; j < 3; j++) {box[num()].style.backgroundColor=getColor();}}//将随机色和随机数赋给九宫格中的三个;}
function end(){var finish=clearInterval(int);
}

这里设置了计时器setInterval(要调用的函数或者要执行的代码串，周期性执行的时间间隔)、取消计时器clearInterval(id_of_setInterval)，
点击“开始”按钮时，函数begin()执行，计时器开始工作。
点击“结束”按钮时，函数end()执行，计时器停止工作
函数getColor()：

function getColor(){var color="#";var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];for (var i = 0; i < 6; i++) {color=color+arr[Math.floor(Math.random()*16)]}return color;}

返回一个六位数的十六进制随机颜色：
数组arr：包含组成十六进制颜色值的字符；
for循环：用Math.random()*16获取0～16之间的随机数；用Math.floor(Math.random()*16)获取[0,15]之间的随机整数（Math.floor()为向下取整）；
函数getColor()的最后返回一个由“#”+六个arr[]数组里的字符组成的十六进制颜色值。
函数num()：

function num(){var num;var count=[1,2,3,4,5,6,7,8,9];var num=count[Math.floor(Math.random()*9)];return num;}

返回一个[0,9]之间的随机数
Math.random()*9：获取(0,9)之间的数字；
Math.floor(Math.random()*9)：向下取整，获得[0,8]之间的随机整数，从而得到count的下标
count[Math.floor(Math.random()*9)]：随机获取count[]数组里的一个元素。

var box=document.getElementsByClassName('box');for (var j = 0; j < 3; j++) {box[num()].style.backgroundColor=getColor();}}

得到类名为“box”的html元素（九宫格中的九个格子）组成的数组；
for循环：随机获取一个格子，改变其背景颜色为随机色；计时器工作一次，获取三个格子并改变这三个格子的背景颜色。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！