Math对象

Math对象

Math ：数学

Math是个对象，有很多关于数学的方法

+

下面是Math对象下得方法：

Math.abs (有效数值);

Math.ceil(); 向上取整

Math.floor(); 向下取整

Math.round(); 四舍五入取整

Math.random(); 随机返回0~1的值，可能为0，不会为1，没有参数

Math.max();

Math.min();

数值区间的随机数
function random(m,n){
var num= Math.max(m,n)- Math.min(m,n);
return Math.round(Math.random()*num+Math.min(m,n));
}

下面是一个双色球的列子，主要是用随机数来做的，可能有一点bug。。。。。。。。。

demo

html

1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<div class="box">
		<input type="button" name="" value="开始摇奖">
		<div class="loading"></div>
		<div class="ball">
			<ul>
			</ul>
			<ol>
			</ol>
		</div>
	</div>
</body>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul,ol{
			list-style: none;
		}
		.box{
			width: 400px;
			height: 400px;
			/*background: red;*/
			margin: 50px auto 0;
		}
		input{
			border: none;
			width: 150px;
			height: 40px;
			color: #fff;
			background: red;
			font-size: 28px;
			line-height: 40px;
			text-align: center;
			display: block;
			margin:0 auto 30px;
		}
		.ball,.loading{
			height: 45px;
			padding-top: 15px;
			margin: 0 15px;
			background:pink;
			overflow: hidden;
		}
		.ball {
			display: none;
		}
		.loading{
			text-align: center;
			line-height: 45px;
			font-size: 30px;
			color: #000;
		}
		.ball ul{
			width: 240px;
			overflow: hidden;
			float: left;
		}
		.ball ol{
			width: 50px;
			overflow: hidden;
			float: right;
		}
		.ball ul li{
			float: left;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: red;
			line-height: 30px;
			text-align: center;
			color: #fff;
			margin-left: 6px;
		}
		.ball ol li{
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: blue;
			line-height: 30px;
			text-align: center;
			color: #fff;
			margin-left: 6px;
		}
	</style>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script type="">
		var btn=document.querySelector("[type=button]");
		btn.onclick=function(){
			var redNum = 6;
			var blueNum = 1;
			var redList = [];
			var blueList = [];
			var redHtml = "";
			var blueHtml = "";
			for(var i=0;i<redNum;i++){
				redList.push(random(1,33));
			}
			for(var j=0;j<blueNum;j++){
				blueList.push(random(1,16));
			}
			for(var h=0;h<redList.length;h++){
				if(redList[h]<10){
					redHtml += "<li>0"+redList[h]+"</li>";
				}else{
					redHtml += "<li>"+redList[h]+"</li>";
				}
			}
			if(blueList[0]<10){
				blueHtml += "<li>0"+blueList[0]+"</li>"
			}else{
				blueHtml += "<li>"+blueList[0]+"</li>"
			}
			setColor(".ball ul").innerHTML = redHtml;	
			setColor(".ball ol").innerHTML = blueHtml;
			setStyle(".loading","display","none");
			setStyle(".ball","display","block");		
		}
		function setStyle(){
			if(arguments.length >2){
				document.querySelector(arguments[0]).style[arguments[1]] = arguments[2];
			}
			else{
				for(var i in arguments[1]){
					document.querySelector(arguments[0]).style[i] = arguments[1][i];
				}
			}
		}
		function random(m,n){
			var num = Math.max(m,n) - Math.min(m,n);
			return Math.round(Math.random()*num+Math.min(m,n));
		}
 
		function setColor(){
			if(!arguments.length){
				return alert("ni que shao can shu le !");
			}else{
				if(arguments.length == 1){
					return document.querySelector(arguments[0]);
				}else if(arguments.length > 1){
					document.querySelector(arguments[0]).style.color = arguments[1];
				}
			}
		}
	</script>