JavaScript中Math对象，日期对象的使用。以及定时器，秒表，实时更新系统时间实例

本文链接：https://blog.csdn.net/qq_42724864/article/details/104834829

在JS中一切皆对象。
（需要实例轮子的直接翻到最后）

很多关系数学运算的函数，直接一个Math对象提供。当我们使用是记不住的时候可以直接百度一下。但是需要注意的是Math函数中sin cos等方法的计算是以弧度为计算对象的
Math.random() 返回0~1间随机数
Math.max(n1,n2,n3,n…) 最大值
Math.min(n1,n2,n3,n…) 最小值
Math.round(value) 四舍五入取整（只看小数点的后一位）
Math.floor(value) 向下取整
Math.ceil(value) 向上取整
Math.abs(value) 绝对值
Math.pow(x,y) x的y次方
Math.sqrt(value) 平方根

//传入的参数是弧度

    Math.sin();正弦
    Math.cos() 余弦

Math.PI =180弧度
1弧度 = Math.PI /180;

    例：计算sin30度

    alert（Math.sin(30*Math.PI /180)）;

日期对象（重点记忆）秒表，实时显示时间等实例

日期对象的声明

1.没有传入参数，默认当前系统时间
var d = new Date();
alert(d);//Thu Mar 12 2020 20:08:01 GMT+0800 (中国标准时间)
GMT:格林尼治时间

2.传入参数
“2000-01-01”
“2000/01/01”
按照顺序，分别传入参数年月日时分秒毫秒
注：在国外月份是从0月开始数的 0~11

直接传入毫秒数 1秒 =1000毫秒 (以1970年1月1日 0：0：0为参考时间点去进行换算)
小彩蛋：linux的创始人
var d = new Date（1000）;

日期对象Date的方法（格式化方法，了解即可）

alert（box.toDateString()）; 以特定的格式显示星期几，月，日和年

alert（box.toTimeString()）; 以特定的格式显示时，分，秒和时区

alert（box.toLocaleDateString()）; 以特定地区格式显示星期几，月，日和年

alert（box.toLocaleTimeString()）; 以特定地区格式显示时，分，秒和时区

alert(box.toUTCString()) ; 以特定的格式显示完整的UTC日期

日期对象方法（重点记忆 set/get既能捕获又能赋值 get只能获取）

**
系统给我们的不一定是最好的，最好是自定义

重点记忆：
set/getDate（）从Date对象中返回一个月中的某一天（1-31）

getDay（）从Date对象返回一周中的某一天（0-6）

set/getMonth（）从Date对象中返回月份（0-11）

set/getFullYear（）从Date对象以四位数返回年份

set/getHours（）返回Date 对象的小时（0-23）

set/getMinutes（）返回Date对象的分钟（0-59）

set/getSecends（）返回Date对象的秒数（0-59）

set/getMilliseconds（）返回Date对象的毫秒

set/getTime（）返回1970年1月1人至今的毫秒数

getTimezoneOffset（）返回本地时间与格林威治标准时间的分钟差

实例来啦：

计算之间相差的时间，我们需将时间转为毫秒计算

function countOfDate(date1,date2){
            var d1 = new Date(date1);
            var d2 = new Date(date2);
            //全部转成毫秒数
            var time1 = d1.getTime();
            var time2 = d2.getTime();
            //我们不知道两个时间谁更大，所以采用绝对值
            var count = Math.abs(time1 - time2);
            //毫秒转成日期
            return parseInt(count/1000/3600/24);
        }
        alert(countOfDate("2018/08/08","2019/08/08"));


        //输入N   输出N天后的时间

        function afterOfDate(n){
            var d = new Date();
            var day = d.getDate();
            d.setDate(day + n);
            return d ;
        }
        alert(afterOfDate(3));

2.实时更新系统时间

setInterval(function(){
    var oDiv = document.getElementById("div1");
    oDiv.innerHTML = showTime();
}),1000;

写成.js文件然后在HTML文件中先引用工具

function showTime(){
    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var date = d.getDate(); 
    var week =d.getDay();//0-6  0是星期日
    week = numOfChinese(week);
    var hours =doubleNum(d.getHours());
    var minutes =doubleNum(d.getMinutes());
    var sencends =doubleNum(d.getSeconds());
    var str =year+"年"+month+"月"+date+"日 星期"+week +" "+ hours+":"+minutes+":"+sencends;
    return str;
}
alert(showTime());
//数字转成中文
function numOfChinese(num){
    var arr = ["日","一","二","三","四","五","六"]
    return arr[num]
}
function doubleNum(num){
    if(num<10){
        return "0"+num;
    }else{
        return num;
    }
}

3,定时器

定时器
格式：
var timer = setIntercal（函数，毫秒数）;

功能：每隔对应的毫秒数，执行一次传入的函数

返回值：启动定时器的，系统分配的编号

clearInterval（timer）; 取消定时器; timer ：定时器的编号

一般情况下，将没有名字的函数叫做匿名函数

 var timer = setInterval（匿名函数，毫秒数）;
                var timer = setInterval(function(){
                    执行代码；
                })，毫秒数

小例子：定时5秒

var i= 0;
function show(){
    if(i == 5){
        clearInterval(timer);
    }
    document.write(i+++"<br/>");
}
var timer = setInterval(show,1000);

最后就是秒表的实现了，最开始在写秒表的时候，将开始和暂停分开写在两个按钮上的，后面发现可以一直开始开始，秒表的时间变化也变也快。所以修改成一个按钮点开始后按钮变成暂停暂停后变为开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 200px;padding: 50px;background-color: orange;border: 1px solid black;margin: 10px auto;}
        #div1 span{font-size: 23px;float: left;}
        #div1 button{width: 100px;height: 30px;font-size: 16px;margin-top: 20px;background-color: black;color: white;;}
    </style>
        <script>
            /*
                window.onload = function(){
                    写在这里的代码，是整个页面加载完成以后运行的（固定格式）
                }
            */ 
           //通过id获取标签的方法进行简化
           function $(id){
               return document.getElementById(id);
           }
           var i = 0;//总秒数
           var timer = null;//记录定时器的
           var isRunning = false //代表当前定时器是否运行
            window.onload = function(){
                        //获取按钮
                function startFunc(){
                   timer = setInterval(function(){
                        i++
                        $("sec").innerHTML =doubleNum(i%60);
                        $("min").innerHTML =doubleNum(parseInt((i/60)%60));
                        $("hour").innerHTML =doubleNum(parseInt(i/3600));
                    },1000);
                }
                //暂停
                function pauseFunc(){
                    clearInterval(timer);
                }
                $("btn").onclick =function(){
                    if(!isRunning){
                        $("btn").innerHTML = "暂停";
                        isRunning = true; 
                        startFunc();  
                    }else{
                        $("btn").innerHTML ="开始";
                        isRunning=false;
                        pauseFunc();
                    }
                }
                //复位
                $("reset").onclick =function(){
                    clearInterval(timer);
                    i=0;
                    isRunning = false;
                    $("btn").innerHTML ="开始";
                    $("sec").innerHTML ="00";
                    $("min").innerHTML ="00";
                    $("hour").innerHTML ="00";
                }
            }
            function doubleNum(num){
                if(num<10){
                    return "0"+num;
                }else{
                    return num;
                }
            }
        </script>
</head>
<body>
    <div id="div1">
        <span id="hour">00</span>
        <span>:</span>
        <span id="min">00</span>
        <span>:</span>
        <span id="sec">00</span>
        </br/>
        <button id="btn">开始</button>
        <!-- <button id="pause">暂停</button> -->
        <button id="reset">复位</button>
    </div>
</body>
</html>