Javascript从零基础到精通——Math

Math

Math内置对象

Math对象属性

Math对象上的属性都是常量，不是变量，不能被修改

Math对象方法

Math.random()生成随机数

Math.random()生成一个从0-1（包含0不包含1）的随机小数

生成 min ~ max （min < max）的随机数公式：

Math.random()*(max - min) + min

Math对象方法详解:

        /*
            Math
                Math和其他的对象不同，它不是一个构造函数
                它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法
                比如：
                    Math.PI     圆周率
        */
        console.log(Math.PI);
        /*
            Math.abs()
                可以用来计算一个数的绝对值
        */
        console.log(Math.abs(-1));
        /*
            Math.ceil()
                可以对一个数进行向上取整，小数位只要有值就自动进1
        */
        console.log(Math.ceil(1.4));
        /*
            Math.floor()
                可以对一个数进行向下取整,小数部分会被舍掉
        */
        console.log(Math.floor(1.99));
        /*
            Math.round()
                可以对一个数进行四舍五入取整
        */
        console.log(Math.round(1.5));
        /*
            Math.random()
                可以生成一个0-1之间的随机数
                生成一个0-10的随机数
                生成一个0-x之间的随机数
                    Math.round(Math.random()*x)
                生成一个x-y之间的随机数
                    Math.round(Math.random()*(y-x)+x)
        */
        for(var i = 0; i < 100; i++){
            console.log(Math.round(Math.random()*10));
        }
        /*
            Math.max()
                可以获取多个数中的最大值
        */
        console.log(Math.max(1,2,3,4,5));
        /*
            Math.min()
                可以获取多个数中的最小值
        */
        console.log(Math.min(1,2,3,4,5));
        /*
            Math.pow(x,y)
                返回x的y次幂
        */
        console.log(Math.pow(2,4));
        /*
            Math.sqrt(x)
                返回x的开方
        */
        console.log(Math.sqrt(4));

Math应用

1. 点击div随机更换背景颜色

	<div id="box"></div>

    #box {
      width: 200px;
      height: 200px;
      background: red;
    }

    var box = document.getElementById('box')
    box.onclick = function () {
      // 生成一个随机颜色
      var str = '0123456789abcdef'
      var color = '#'
      for (var i = 0; i < 6; i++) {
        var index = Math.floor(Math.random() * str.length)
        color += str[index]
      }
      console.log(color)
      // 下面这句是用来修改元素样式的，先用，以后讲
      box.style.background = color
    }

2. 利用随机数做一个抽奖程序

    var arr = ['一等奖', '二等奖', '三等奖', '安慰奖', '未中奖', '特等奖', '未中奖']
    // 随机生成一个索引
    // 0 ~ arr.length  包含0但是不包含arr.length
    var index = Math.floor(Math.random() * arr.length)
    console.log('你的抽奖结果为:' + arr[index])

3. 获取随机验证码

	<button id="btn">获取验证码</button>
    <h1 id="h1"></h1>

	#btn{
		width: 100px;
		height: 50px;
	}

        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var str = '0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM';
            var code = '';
            // 6个色值
            for (var i = 0; i < 4; i++) {
                var index = Math.floor(Math.random() * str.length);
                code += str[index];
            }
            console.log(code);
            var h1 = document.getElementById('h1');
            h1.innerHTML = code;
        }