掌握JavaScript的数学与时间魔法：Math和Date对象详解-灵析社区

Ned

Math对象（Math对象不能new!!!!)

  1. Math.PI 圆周率
  2. Math.abs() 求绝对值
  3. Math.round() 四舍五入
如果负数时， > 0.5 进一 <=0.5 舍去
console.log(Math.round(4.5)); //5
console.log(Math.round(4.4)); //4
console.log(Math.round(-4.5)); // -4
console.log(Math.round(-4.5000001)); // -5
console.log(Math.round(-4.4)); //-4
console.log(Math.round(-4.6)); //-5

4. Math.ceil() 向上取整

console.log(Math.ceil(4.1)); //5
console.log(Math.ceil(4.9)); //5
console.log(Math.ceil(-4.1)); //-4
console.log(Math.ceil(-4.9)); // -4

5. Math.max() 最大值

  • 求数组中最大值： Math.max.apply(null,数组) Math.max( ... 数组名)
  • 求数组中最小值： Math.min.apply(null,数组) Math.min( ... 数组名)
var arr = [2,3,1,4,5,3,4];
console.log(Math.max(2,3,1,4,5,3,4));
console.log(Math.min(2,3,1,4,5,3,4));
console.log(Math.max.apply(null,arr));
console.log(Math.min.apply(null,arr));

6. Math.pow(m,n) 求m的n次方

7. Math.sqrt(n) 求n的开方

8. Math.random() 随机数 0 <= n < 1

Math.floor(Math.random() * (max - min + 1) + min) 推荐 Math.round(Math.random() * (max - min) + min)
function random(min,max){
    if(min > max){
        var t = min;
        min = max;
        max = t;
    }
    return Math.floor(Math.random() * (max - min + 1) + min);
}

案例

  1. 实现猜数字游戏（1~10，三次机会）

<!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>
</head>
<body>
    <input type="button" value="你猜？" id="btn">
    <script>
        //实现猜数字游戏（1~10，三次机会）
        /*
            1~10 ? 得到一个什么样的信息？ 随机数
            三次机会？想到了什么呢？ 用户输入三次，循环3次
            如果第一次用户就猜中了？后面的两次机会还需要吗？如果不需要了？怎么办？ break
        */
        //一、获取页面元素
        var o_btn = document.getElementById('btn');
        //二、添加事件
        o_btn.onclick = function(){
            //1. 随机一个整数：（1~10）
            var rand = Math.floor(Math.random() * 10 + 1);
            //2. 让用户去猜，且有三次猜的机会，所以使用循环
            for(var i = 1;i < 4;i ++){
                //问用户接收一个整数
                var n = parseInt(prompt('请输入1~10中的一个整数：'));
                //检测用户输入的整数是否等于随机数
                if(rand === n){
                    alert('您猜中了!');
                    break; //退出循环
                }else if(n > rand){
                    alert('您猜大了！');
                }else{
                    alert('您猜小了！');
                }
            }
            //3. 三次机会用完了
            if(i === 4){
                alert('很遗憾，你挑战失败！正确的数字是：' + rand);
            }
        }
    </script>
</body>
</html>

2. 封装一个随机颜色的函数（至少封装三种）

<!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>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <input type="button" value="你猜？" id="btn">
    <div id="box"></div>
    <script>
        //封装一个随机颜色的函数（至少封装三种）
        /*
           1. 单词 ['red','green','blue']  pass
           2. #十六进制   6个    #ffffff  白色     #000000  黑色
           3. rgb(0~255,0~255,0~255)
        */
        function randColor01(){
            //              在乘的时候会自动将(0xffffff)这个十六进制数转为十进制，求出随机数后再转为十六进制
            return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
        }
        function randColor02(){
            var str = '#';
            //颜色有6个十六进制数
            for(var i = 0;i < 6;i ++){
                str += Math.floor(Math.random() * 17).toString(16);
            }
            return str;
        }
        function randColor03(){
            var arr = [];//放置颜色值
            for(var i = 0;i < 3;i ++){
                arr.push(Math.floor(Math.random() * 256)); //[45,23,233]
            }
            //              45,23,233
            return 'rgb(' + arr.join() + ')';
        }
 
        function randColor04(){
            var str = 'rgb(';//放置颜色值
            for(var i = 0;i < 3;i ++){
                str += Math.floor(Math.random() * 256) + ','; //'rgb(33,44,55,'
            }
            return str.slice(0,-1)  + ')';
        }
        console.log(randColor01());
        console.log(randColor02());
        console.log(randColor03());
        // alert(randColor03());
 
        //获取按钮
        var o_btn = document.getElementById('btn');
        //获取div
        var o_div = document.getElementById('box');
        //添加事件
        o_btn.onclick = function(){
            //改变div的背景颜色
            o_div.style.backgroundColor = randColor03();
        }
    </script>
</body>
</html>

3. 封装一个4位验证码的函数（包含数字大写字母小写字母）

    <script>
        /*
        封装一个4位验证码的函数（包含数字大写字母小写字母）
        4位验证码? 循环四次
        包含数字大写字母小写字母？ 数组  字符串  下标
        */
        function verificationCode(n){
            //包含的内容
            var str = '0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM';
            var code = '';
            //n位验证码
            for(var i = 0;i < n;i ++){
                code += str.charAt(Math.floor(Math.random() * str.length));
            }
            return code;
        }
        alert(verificationCode(6));
    </script>

4. 扁平化数组 如：[1,2,[3,[4,5],[6,7],8],9] [1,2,3,4,5,6,7,8,9]

<!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>
</head>
<body>
    <script>
        /*
        扁平化数组  如：[1,2,[3,[4,5],[6,7],8],9]  [1,2,3,4,5,6,7,8,9]
        1. 不知道里面有多少层数组，也就不知道嵌套多少层循环，这时候，使用递归解决
        instanceof : 检测当前对象是否属于某一个类返回布尔
        */
        // [1,[2,3]]    [1,2,3]
        function delayering(data){ //data : 数据
            //准备一个新数组
            //1.2.1
            var list = [];
            //1. 判断data 是否为数组
            if(data instanceof Array){
            //如果data是数组，返回true
                //遍历数组
                //1.1
                for(var i = 0,len = data.length;i < len;i ++){
                    list = list.concat(delayering(data[i]));
                }
            }else{ //如果data不是数组，返回false,执行else
                //不是数组的这个元素，给它添加到一个新数组中
                //1.2
                list.push(data);
            }
            //返回新数组
            //2
            return list;
        }
 
        console.log(delayering([1,[2,3]]));
        console.log(delayering([1,2,[3,[4,5],[6,7],8],9]))
            data = [1,[2,3]]
            var list = [1,2,3];
            list = list.concat(delayering(1)); [1]
            list = list.concat(delayering([2,3])); [2,3]
            return list; [1,2,3]
 
            data = 1
            var list = []
            list.push(1);  [1]
            return [1]
 
            data = [2,3]
            var list = [2,3];
            list = list.concat(delayering(2)); [2]
            list = list.concat(delayering(3)); [3]
 
            return [2,3]
 
            data = 2
            var list = [];
            list.push(2);  [2]
            return [2];
 
            data = 3
            var list = [];
            list.push(3);  [3]
            return [3];
    </script>
</body>
</html>

计时器

  1. timer = setInterval(函数,毫秒数) : 间歇性计时器
  • clearInterval(timer) : 取消计时器

2. timer = setTimeout(函数,毫秒数) : 一次性计时器、延时器、定时器

  • clearTimeout(timer);

Date对象

如何创建日期对象？

  1. var date = new Date();
  2. var date = new Date(2002,2,5); //0~11
  3. var date = new Date(2002,2,5,18,30,50); //0~11
  4. var date = new Date('2002-3-5'); //1~12
  5. var date = new Date('2002-3-5 18:30:50'); //1~12
  6. var date = new Date('2002/3/5'); //1~12
  7. var date = new Date('2002/3/5 18:30:50'); //1~12

如何访问日期对象中的信息？

  1. date.getFullYear() //年
  2. date.getMonth() //月 0~11
  3. date.getDate() //日
  4. date.getDay() //星期
  5. date.getHours() 时
  6. date.getMinutes() 分
  7. date.getSeconds() 秒
  8. date.getMilliseconds() 毫秒
  9. date.getTime() 时间戳

如何设置日期对象中的信息？

  1. date.setFullYear() 年
  2. date.setMonth() 0~11
  3. date.setDate() 日
  4. date.setHours() 时
  5. date.setMinutes() 分
  6. date.setSeconds() 秒
  7. date.setMilliseconds() 毫秒
  8. date.setTime() 时间戳

如何以本地格式的字符串输出日期对象？

  1. date.toLocaleString() 本地格式的日期时间字符串
  2. date.toLocaleDateString() 本地格式的日期字符串
  3. date.toLocaleTimeString() 本地格式的时间字符串

案例

  1. 求出自己已生活了多少天零多少小时零多少分钟零多少秒钟？
    <script>
        //求出自己已生活了多少天零多少小时零多少分钟零多少秒钟？
        // 1天 = 24小时
        // 1小时 = 60分
        // 1分 = 60秒
        // 1秒 = 1000毫秒
        //1. 获取当前的日期时间
        var now = new Date();
        //2. 生日
        var birthday = new Date('1984/3/5 18:30:50');
        //3. 求两个时间的差值
        // var minus = now - birthday; //毫秒数
        var minus = Math.floor((now.getTime() - birthday.getTime()) / 1000); //秒
        //4. 求天数
        var date = Math.floor(minus / 60 / 60 / 24);
        //5. 求小时
        var hours = Math.floor((minus - date * 24 * 60 * 60) / 60 / 60);
        //6. 分钟
        var minutes = Math.floor((minus - date * 24 * 60 * 60 - hours * 60 * 60) / 60);
        //7. 秒
        var seconds = minus % 60;
        console.log(date + '天' + hours + '时' + minutes + '分' + seconds + '秒');
    </script>

2. 写出距当前日期7天后的日期时间（注，使用日期对象的方法实现，不允许自己计算）

   <script>
        //写出距当前日期7天后的日期时间（注，使用日期对象的方法实现，不允许自己计算）
        // date  date.setDate(date.getDate() + 7)
        function nDaysAfter(n){
            var date = new Date(); //创建日期对象
            //设置当前的日 （ 当前的日期 + 指定的天数)
            date.setDate(date.getDate() + n);
            return date;
        }
        console.log(nDaysAfter(3).toLocaleString());
        console.log(nDaysAfter(7).toLocaleString());
    </script>

3. 数码时钟

<!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>
        .sp{
            font-size: 100px;
            color: red;
        }
    </style>
</head>
 
<body>
    <div id="time">
        <img src="img/0.jpg" alt="">
        <img src="img/0.jpg" alt="">
        <span class="sp">:</span>
        <img src="img/0.jpg" alt="">
        <img src="img/0.jpg" alt="">
        <span class="sp">:</span>
        <img src="img/0.jpg" alt="">
        <img src="img/0.jpg" alt="">
    </div>
    <script>
        /*
        document.querySelectorAll(选择器) : 通过选择器获取所有的元素。返回一个伪数组（类数组）
        伪数组（类数组）：
            1. 与数组相同的地方：都可以通过下标访问。都有length属性
            2. 与数组不同的地方：伪数组没有数组的方法。
        */
        //一、获取页面元素
        //获取div#time中所有的img
        var o_img = document.querySelectorAll('#time>img');
    setInterval(function(){
        //二、获取当前本地时间
        //1. 创建日期对象
        var date = new Date();
        //1.1 获取时
        var hours = date.getHours();
        //1.2 获取分
        var minutes = date.getMinutes();
        //1.3 获取秒
        var seconds = date.getSeconds();
        //2. 将时分秒三段数字分解为6个数字并存在一个数组中
        // 11  2
        var arr = [
            hours < 10 ? 0 : Math.floor(hours / 10), hours % 10,
            minutes < 10 ? 0 : Math.floor(minutes / 10),minutes % 10,
            seconds < 10 ? 0 : Math.floor(seconds / 10),seconds % 10
        ]
        console.log(arr);
        //3. 将图片中的src地址更改为当前时间对象的数字
        //遍历伪数组
        for(var i = 0,len = o_img.length;i < len;i ++){
            o_img[i].src = 'img/' + arr[i] + '.jpg';
        }
    },1000)
    </script>
</body>
 
</html>

4. 倒计时

<!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>
</head>
<body>
    <input type="text" name="" id="hours">:
    <input type="text" name="" id="minutes">:
    <input type="text" name="" id="seconds">
    <script>
        //获取元素
        var o_hours = document.getElementById('hours');
        var o_minutes = document.getElementById('minutes');
        var o_seconds = document.getElementById('seconds');
        //倒计时
    var timer = setInterval(function(){
        //1. 现在时间
        var now = new Date();
        //2. 两点到期
        var date = new Date('2022/12/9 14:00:00');
        //3. 求时间差
        var minus = Math.floor((date.getTime() - now.getTime()) / 1000);
        //4. 求小时
        var  hours = Math.floor(minus / 60 / 60);
        //5. 求分
        var minutes = Math.floor((minus - hours * 60 * 60) / 60);
        //6. 求秒
        var seconds = minus % 60;
        console.log(hours + ':' + minutes + ':' + seconds);
        o_hours.value = hours;
        o_minutes.value = minutes;
        o_seconds.value = seconds;
        //7. 倒计时的停止条件
        if(hours === 0 && minutes === 0 && seconds === 0){
            clearInterval(timer);
            alert('倒计时结束！');
        }
    },1000)
    </script>
</body>
</html>

简单的代码异步执行机制

同步：按步骤执行
异步：同时进行
  1. 计算机程序执行分为同步执行,和异步执行:
所谓的异步执行,是一种特殊的程序的执行方式，常见的异步程序有:定时器（setInterval），延时器（setTimeou），各种事件的绑定（onclick......），ajax请求

2. 异步程序的执行过程从第一行代码开始执行同步程序开始执行遇到异步程序了，暂时不执行，将异步程序暂时存储在“异步池”中所有的同步程序执行完毕开始执行“异步池”中的异步程序若有设定了时间的程序，就会先执行到点了的程序若有设定的时间是相同的程序，则依照书写顺序执行

setTimeout(function(){ 
    console.log('我是异步执行的程序1'); 
} , 2000);
setTimeout(function(){ 
    console.log('我是异步执行的程序2'); 
} , 1000);
console.log('我是同步执行的程序')
​
//结果依次是：
//我是同步执行的程序
//我是异步执行的程序2
//我是异步执行的程序1


阅读量：518

点赞量：0

收藏量:0