JavaScript中Math对象，日期对象的使用。以及定时器，秒表，实时更新系统时间实例
在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+++"
");
}
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>