JS-对象-CSDN博客

本文链接：https://blog.csdn.net/rfalcon/article/details/106408040

JS笔记

对象声明

通过new运算符声明对象
var obj1 = new Object();
通过省略new声明对象
var obj2 = Object();
对象常量赋值

var obj3 = {};
obj3.username = 'falcon';
obj3.age = 18;//obj3['age']=18;
//alert(obj3['age']);//18
obj3.show = function(){
	alert("My name is " + obj3.username);
}
obj3.show();//My name is falcon
/*
var obj3 = {
	username:'falcon',
	age:18,
	show:function(){
		alert("My name is " + obj3.username);
	}
}
//delete 关键字，删除对象的属性或方法
delete obj3.username;
delete obj3.show;
*/

Math对象

Math.random()返回0-1之间的随机数
Math.max(num1,num2)返回较大的数
Math.min(num1,num2)返回较小的数
Math.abs(num)绝对值
Math.ceil(19.3)向上取整
Math.floor(11.8)向下取整
Math.pow(x,y)x的y次方
Math.sqrt(num)开平方
Math.round()四舍五入，只看小数点后一位
Math.sin() Math.cos()计算三角函数，传入的参数是弧度（Math.PI=180弧度，1弧度=Math.PI/180）

日期对象

日期对象声明，如果没有传入参数，默认获取当前系统时间
var d = new Date();
传入参数（‘2000-01-01’、‘2000/01/01’、按顺序：年、月、日、时、分、秒、毫秒）【注】国外月份从0开始（0-11）
日期对象方法

//自定义当前时间 showtime.js
function showTime(){
	var d = new Date();
	var year = d.getFullYear();
	var month = d.getMonth() + 1;//0-11
	var date = d.getDate();
	var week = d.getDay();//0-6 0是周日
	week = numOfChinese(week);
	var hour = doubleNum(d.getHours());
	var min = doubleNum(d.getMinutes());
	var sec = doubleNum(d.getSeconds());
	var str = year + "年" + month + "月" + date + "日 星期" + week + " " + hour + ":" + min + ":" + sec;
	return str;
}
//星期几的数字转成中文
function numOfChinese(num){
	var arr = ["日","一","二","三","四","五","六"];
	return arr[num];
}
//时分秒都以两位数显示
function doubleNum(n){
	if(n < 10){
		return "0" + n;
	}else{
		return n;
	}
}
document.write(showTime());//2020年5月28日 星期四 19:56:03

【注】所有的参考时间点都是1970年
Date.parse()
格式：Date.parse(日期对象)
功能：可以将日期对象转成毫秒数
d.getTime()/d.setTime()
格式：日期对象.getTime/setTime
功能：将当前日期转成毫秒数

var d = new Date();
alert(Date.parse(d));//1590667237000
alert(d.getTime());//1590667259000

日期对象练习题

//获取两个日期之间相差的天数
function countOfDate(d1,d2){
	var dd1 = new Date(d1);
	var dd2 = new Date(d2);
	var time1 = dd1.getTime();
	var time2 = dd2.getTime();
	var time = Math.abs(time1 - time2);
	return parseInt(time / 1000 / 3600 /24);
}
alert(countOfDate("2010-07-04","2020-05-28"));//3616

//输入n，输出n天后的时间
function afterOfDate(n){
	var d = new Date();
	var day = d.getDate();
	d.setDate(day + n);
	return d;
}
alert(afterOfDate(30));//Sat Jun 27 2020 20:11:09 GMT+0800 (中国标准时间)

定时器

格式：setInterval(函数，毫秒数）
功能：每隔对应的时间，执行一次传入的函数
返回值：启动定时器时，系统分配的编号

/*
一般情况下将没有名字的函数叫匿名函数
var timer = setInterval(function(){
	执行代码;
},毫秒数);
*/
var i = 0;
var show = function () {
  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>
  </head>
  <style>
    #div1 {
      width: 600px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      margin: 100px auto;
      border: 1px solid black;
      font-size: 30px;
    }
  </style>
  <script src="showtime.js"></script>
  <script>
    setInterval(function () {
      var oDiv = document.getElementById("div1");
      oDiv.innerHTML = showTime();
    }, 1000);
  </script>
  <body>
    <div id="div1">显示当前时间</div>
  </body>
</html>

秒表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #div1 {
      width: 300px;
      height: 200px;
      padding: 80px;
      background-color: lightblue;
      border: 1px solid lightcyan;
      margin: 100px auto;
      text-align: center;
    }
    #div1 span {
      font-size: 22px;
    }
    #div1 button {
      width: 200px;
      height: 50px;
      font-size: 16px;
      margin-top: 20px;
      background-color: lightgreen;
      color: blueviolet;
    }
  </style>
  <script>
    //通过id获取标签的方法简化
    function $(id) {
      return document.getElementById(id);
    }
    var i = 0; //总秒数
    var timer = null; //记录定时器的返回值
    var isRuning = 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);
      }

      //给按钮添加点击事件
      $("btn1").onclick = function () {
        if (!isRuning) {
          $("btn1").innerHTML = "暂停";
          isRuning = true;
          startFunc();
        } else {
          $("btn1").innerHTML = "开始";
          isRuning = false;
          pauseFunc();
        }
      };

      //复位
      $("reset").onclick = function () {
        clearInterval(timer);
        i = 0;
        isRuning = false;
        $("btn1").innerHTML = "开始";
        $("sec").innerHTML = "00";
        $("min").innerHTML = "00";
        $("hour").innerHTML = "00";
      };
    };
    
    //让每次都显示两位数
    function doubleNum(n) {
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    }
  </script>
  <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="btn1">开始</button>
      <button id="reset">复位</button>
    </div>
  </body>
</html>