math使用及案例

1.math基本

 //向上取整
console.log(Math.ceil(1.4));//2

//向下取整
console.log(Math.floor(1.3));//1

//四舍五入
console.log(Math.round(1.6));//2
console.log(Math.round(-1.6))//-2,四舍五入后添加负数
//要注意一个特殊的情况，当参数为“-1.5”的时候，取值为-1

//绝对值
console.log(Math.abs(-1.6));//1.6

//最大值最小值
console.log(Math.min(1,2,6,7,5,77,99));//1
console.log(Math.max(3,6,54,22,100));//100

//次方
console.log(Math.pow(2,10));//1024
//简写 console.log(2 ** 10)；

//开方
console.log(Math.sqrt(9));//3

//sin cos tan,不能直接写度数，要带pI格式
console.log(Math.sin(60 * 2 * Math.PI / 360));
console.log(Math.cos(60 * 2 * Math.PI / 360));

2.生成随机数

 //Math.random():生成随机数[0,1),他的区间只是[0,1)，所以我们一般利用加减乘除算法后取整来设置他的数字

//生成[0,100）的随机整数
        for(var i = 0; i < 100; i++){
        console.log(Math.floor(Math.random() * 100))
       	}

//封装生成[a,b)的随机正整数
        function random(a,b){
        return Math.floor(Math.random() * (b - a ) + a);
        }
console.log(random(10, 50));

3.随机生成字符串：含数字，字母

        var str = "jfjaijqirqir4525322";
        var str1 = "";
        for (var i = 0; i  < 10 ; i++ ){
         str1 += str[Math.floor(Math.random() * 19)] 
        }
        console.log(str1);

4.小球运动

<span id="con">沛华和海静的故事</span>
<script>
        var oCon = document.getElementById("con");
        var x = 0; //用来设置当x坐标
        var startY = 300;
        var y = 0; //用来设置当y坐标
        setInterval(function(){
            x++;
            y = startY - Math.sin(x * 2 * Math.PI / 360) * 200;
            //*200是因为他的sin值太小了
            //在浏览器这个视口中，以左上角为起始点，左上角那个点，也就是我们如果不设置stary=300，
            //他就会从最左上角（0,0）坐标开始动，而且需要注意的是，这个窗口是第一象限，但是，向下是正数，向右是正数
            //所以要设置一个startY = 300让他往下挪
            oCon.style.left = x + "px";//这要设置+px，不然没有单位，他不知道你设置的是什么意思
            oCon.style.top = y + "px ";
        }, 1000 / 60)
    </script>

5.随机抽奖

    <div class="outer">
        <p id="btn">start</p>
        <h2 id="user">
            奖池
        </h2>
    </div>
    <script>
        var oBtn = document.getElementById("btn");
        var oUser = document.getElementById("user");
        var timer = null;
        var flag = false;//开关原理
        var userName = ["一等奖","二等奖","三等奖","安慰奖"]
        oBtn.onclick = function(){
            if(flag){ //每次点击完，清除时间
                clearInterval(timer);
            }else{
                timer = setInterval(function(){
            var newUser = userName[Math.floor(Math.random() * userName.length)]
            //取userName的下标
            oUser.textContent = newUser;
  }, 10)               
}
        flag = !flag;
}