您当前的位置：首页 > 计算机 > 编程开发 > JavaScript

掌握JavaScript的数学与时间魔法：Math和Date对象详解

时间：02-23来源：作者：点击数：7

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

案例

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

Math.PI 圆周率
Math.abs() 求绝对值
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

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

Math.floor() 向下取整

console.log(Math.floor(4.1)); //4
console.log(Math.floor(4.9)); //4
console.log(Math.floor(-4.1)); //-5
console.log(Math.floor(-4.9)); // -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));

Math.pow(m,n) 求m的n次方
Math.sqrt(n) 求n的开方
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~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>

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

<!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>

封装一个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>

扁平化数组如：[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>

计时器

timer = setInterval(函数,毫秒数) : 间歇性计时器

clearInterval(timer) : 取消计时器

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

clearTimeout(timer);

Date对象

如何创建日期对象？

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

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

date.getFullYear() //年
date.getMonth() //月 0~11
date.getDate() //日
date.getDay() //星期
date.getHours() 时
date.getMinutes() 分
date.getSeconds() 秒
date.getMilliseconds() 毫秒
date.getTime() 时间戳

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

date.setFullYear() 年
date.setMonth() 0~11
date.setDate() 日
date.setHours() 时
date.setMinutes() 分
date.setSeconds() 秒
date.setMilliseconds() 毫秒
date.setTime() 时间戳

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

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

案例

求出自己已生活了多少天零多少小时零多少分钟零多少秒钟？

    <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>

写出距当前日期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>

数码时钟

<!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>

倒计时

<!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>

简单的代码异步执行机制

同步：按步骤执行

异步：同时进行

计算机程序执行分为同步执行,和异步执行:

所谓的异步执行,是一种特殊的程序的执行方式，常见的异步程序有:

定时器（setInterval），延时器（setTimeou），各种事件的绑定（onclick......），ajax请求

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

setTimeout(function(){ 
    console.log('我是异步执行的程序1'); 
} , 2000);
setTimeout(function(){ 
    console.log('我是异步执行的程序2'); 
} , 1000);
console.log('我是同步执行的程序')

//结果依次是：
//我是同步执行的程序
//我是异步执行的程序2
//我是异步执行的程序1