DAY08-Math-Date

---

第一节

创建对象(回顾)

字面量方式

    var obj = {}                //字面量

构造函数

    var obj2 = new Object()     //构造函数

两种方式的比较

    console.log( obj == obj2 )  //false

    所有对象都不相等,因为其指针的存储位置不一样

对象身上的属性

    var obj = { a:10 }

    var obj2 = { b:10 }

    console.log( obj.a == obj2.b )    //true
    对象身上的属性，相当于一个变量，当值一样的时候，属性相等

this的指向(理解)

this是js中的关键字,它代表当前对象.

例1:在对象内部使用this

    // this的使用,代表的是本对象
    //  function fn(){
    //      console.log(this);   //  window
    //  }
    // fn();

    obj1={
        name:'小芳',
        age:18,
        info:'貌美如花',
        say:function(){
             // 输出info
             console.log(obj1.info);
             // this此时就是obj
             console.log(this); //{name: "小芳", age: 18, info: "貌美如花", say: ƒ}
             console.log(this.info);
        }
    };
    // 调用对象中的方法
    obj1.say();
    console.log(this);
    
    总结:this在那个对象中,就代表那个对象.如果没有直接的对象就直接指向window

例2:在表单和函数的内部使用this

  // this指向了表单本身
  <input type="text" id="txt" onblur="alert(this.value)" />
  
    <script>
     
         document.querySelector('#txt').onclick=function(){
             this.value='';
             console.log(this);
         }
    
    </script>
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WH6EE8Uz-1662382787952)(F:\北京\2201\08\笔记\images\1560495197641.png)]

例3:函数中this的指向

  function fn1(){
        console.log(this); // window
    }

对象中属性的删除

直接使用delete即可

    var obj = {
        name:"admin",
        age:23,
        like:"篮球"
    }
    
    delete obj.name;
    delete obj.age;

内置对象(了解)

JavaScript中概念区分 global对象、window对象、document对象

global对象

     global对象可以说是ECMAScript中最特别的一个对象了，因为不管你从什么角度上看，这个对象都是不存在的,在全局作用域中定义的属性和函数，都是global对象的属性和方法，比如isNaN()、parseInt()以及parseFloat()等，实际都是它的方法；还有就是常见的一些特殊值，如：NaN、undefined等都是它的属性

window对象

1 window对象是相对于web浏览器而言的，表示浏览器中打开的窗口。

2 而在客户端 JavaScript 中，全局对象就是 Window 对象，表示允许 JavaScript 代码运行的 Web 浏览器窗口,

3 window对象是浏览器的JavaScript中具体存在的一个全局对象，是可以直接访问的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w94oiq1s-1662382787953)(F:\北京\2201\08\笔记\images\1577160025722.png)]

例1:直接输出this查看

 console.log(this);  // window 在浏览器中全局对象就是window

例2:直接输出window进行查看

 console.log(window);// alert()   onclick 

例3:声明一个变量,和方法直接使用window访问

     // 相当于在win上直接添加一个属性
     var a = '岂曰无衣,与子同袍';
     console.log(window.a);
  
  // 在win上添加方法
     function fn(){
        console.log('哈哈,你猜猜吧'); 
     }

document

document对象是window对象的一个属性，是显示于窗口内的一个文档.document可以理解为文档，就是你的网页，而window是你的窗口，就是你的浏览器包含的.

// document是文档对象,表示当前html页面
      console.log(document);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OOrLGMZn-1662382787954)(/1577177292019.png)]

window 和 Math是 JavaScript 的原生对象，提供各种数学功能。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。String和Date都有构造函数,先实例化,再调用.

var str = new String()

Math（数学对象介绍)

在脚本初始化被创建,不用实例化,.

格式为：Math.方法名(),如调用random方法，Math.random();

方法	描述
Math.max(num1,num2,num3,…,numN)	返回最大的一个数，可以写多个
Math.min(num1,num2,num3,…,numN)	返回最小的一个数，可以写多个
Math.abs(num)	返回绝对值
Math.ceil(num)	向上取整，1.1、1.8
Math.floor(num)	向下取整，1.1、1.8
Math.round(num)	四舍五入
Math.pow(x,y)	求x的y次幂 pow(2,2) 4
Math.sqrt(x)	求x的平方根 sqrt(9) 3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K9AZ8PQf-1662382787955)(F:\北京\2201\08\笔记\images\1560497018141.png)]

例1:产生随机数

0~10之间的随机整数

10~20之间的随机整数

20~30之间的随机整数

// 0~10之间的随机整数
console.log(Math.round(Math.random() * 10))

// 10~20之间的随机整数
console.log(Math.round(Math.random() * 10) + 10)

// 20~30之间的随机整数
console.log(Math.round(Math.random() * 10) + 20)

产生指定范围随机数

使用:刷新网页变头像

  var num = Math.round(Math.random()*(12-1)+1);
       // 此时num是随机变化的,就产生随机图片
       var img = '<img src="./images/'+num+'.jpg" >';
       document.write(img);

十进制数字转16进制或8进制(了解)

十六进制数:

在数学中是一种逢16进1的[进位制]一般用数字0到9和字母A到F（或a_{f）表示，其中:A}F表示10~15，

八进制数

八进制，Octal，缩写OCT或O，一种以8为基数的计数法，采用0，1，2，3，4，5，6，7八个数字，逢八进1

number.toString(radix) 把数字转换为字符串

radix为2时 数字以二进制值显示.0

radix为8时 数字以八进制值显示

radix为16时 数字以十六进制值显示

   //十进制转其他
    var x=110;
    console.log(x);
    console.log(x.toString(8) + "这是8进制");
    console.log(x.toString(16) + "这是16进制");

parseInt(x,radix) 将其他进制的转化为十进制,

  //其他转十进制
    var x='110';
    console.log(parseInt(x,2));
    console.log(parseInt(x,8));
    console.log(parseInt(x,16));

练习与加强

编写一个函数，获得一个十六进制的随机颜色的字符串(例如：#20CD4F)

解释:颜色有6位十六进制数表示,前面加上#即可
<script>
   function getColor() {
		           var str = "#";
		           //定义一个十六进制的值的数组
		           var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
		           
		     	  // 遍历循环产生 6 个数
		           for (var i = 0; i < 6; i++) {
		             //随机产生 0~15 的个索引数,然后根据该索引找到数组中对应的值,拼接到一起
		            var lut = parseInt(Math.random() * 16); 
		             str += arr[lut];
		           }
		           return str;
		         } 

 </script>

其它写法

      function color16(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
        return color;
      }

日期对象(掌握)

什么是日期对象？

一个和日期有关的对象，用来处理日期和时间。是由js已经提供给我们的，我们称为内置对象。内置对象有Array,Object,Date,String等等。

作用

可以通过js获取和设置对象,设置我们需要的日期值.

创建日期对象

var date = new Date();

date：代表自1970年1月1日00:00:00 (世界标准时间) 起经过的毫秒数

直接获取当前时间

var date = Date.now();

Date()对象的方法有很多，可以把它分为3组

第一组：setXXX：设置时间

第二组：getXXX：获取时间

第三组：toXXX：转化时间格式

方法	描述
date.getFullYear()	返回四位年份
date.getMonth()	返回月份 (0 ~ 11) 注：0为1月,需要加1
date.getDate()	返回一个月中的某一天 (1 ~ 31)
date.getHours()	返回小时 (0 ~ 23)。
date.getMinutes()	返回分钟（0~59）
date.getSeconds()	返回秒（0-59）
date.getDay()	返回一周中的某一天 (0 ~ 6)。0 为星期日
date.getTime();	返回 1970 年 1 月 1 日至今的毫秒数（时间戳）

用日期（Date）对象方法输出格式：

xxxx年xx月xx日 xx:xx:xx 星期一

<script>
function createDate(){
    

var date = new Date();
// 年
var y = date.getFullYear();
console.log(y);
// 月
var m = date.getMonth() + 1;
console.log(m + 1);
// 日
var d = date.getDate();
console.log(d);
// 时
var h = date.getHours();
console.log(h);
// 分
var min = date.getMinutes();
console.log(min);
// 秒
var s = date.getSeconds();
console.log(s);

// 星期 0 - 6
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
 // xxxx年xx月xx日 xx:xx:xx 星期一
console.log(y + "年" + m + "月" + d + "日 " + h + ":" + createZero(min) + ":" + createZero(s) + week[date.getDay()]);
// 直接以对象的形式返回
return {
    
  }
}

function createZero(num){
    return num>10 ? num : '0'+num;
}


// 毫秒数的返回
var time = data.getTime();
console.log(time)
</script>

设置日期

直接设置

new的时候直接设置,但是未设置部分会清零

var d = new Date("2008.8.8 8:8:8");
var d = new Date("2008-8-8 8:8:8");
var d = new Date("2008/8/8 8:8:8");
var d = new Date("2008,8,8 8:8:8");

注意:设置日期的时候,一定要加 引号

复杂模式设置

复杂模式设置,没有设置的,默认是当前时间.

    var d = new Date();

    d.setFullYear(2009);    //设置年

    d.setMonth(6);          //设置月，超过11，累加年

    d.setDate(27);          //设置日，超过最大日期，累加月

    d.setHours(40);         //设置小时，超过24，累加天

    d.setMinutes(40);       //设置分钟，超过60，累加小时

    d.setSeconds(40);       //设置秒，超过60，累加分钟

    d.setMilliseconds(40);  //设置毫秒，超过1000，累加秒

1s = 1000ms

例:设置2008年1月12号 17:58:58

    var d = new Date()
		console.log(d)
		
//		设置日期:
//			1.直接传参
       // 设置年份
		d.setFullYear(2008)
		// 设置月份
		d.setMonth(0)  // 0 表示1月份  1 表示2月份
		// 设置日期
		d.setDate(12)
		// 小时
		d.setHours(17)
		// 设置分钟
		d.setMinutes(58)
		// 设置秒
		d.setSeconds(58)
         // 设置毫秒
		d.setMilliseconds(666)
		
		console.log(d)

日期函数封装

计算两个时间的差值

    function dateDiff(date1,date2){
        // 默认参数的处理
        var d1 = new Date(date1);
        var d2 = date2 ? new Date(date2) : new Date();

        // console.log(d1);
        // console.log(d2);

        // 得到两个日期之间差的毫秒数
        // var n = Math.abs(d1-d2);
        var n = Math.abs(d1.getTime()-d2.getTime());
        // 根据毫秒数，计算天时分秒
        console.log(n);
    }

    dateDiff("2008/8/8 8:8:8","1937/12/13 10:1:0");
    dateDiff("2008/8/8 8:8:8");

时间的转化

toLocaleString() 根据本地时间把 Date 对象转换为字符串

例1:根据本地时间将其转化为字符串

var d=new Date();
var n=d.toLocaleString(); 
console.log(n);

toLocaleTimeString() 可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果。

var d=new Date();
var n=d.toLocaleTimeString(); 
console.log(n);

toLocaleDateString() 方法可根据本地时间把 Date 对象的日期部分转换为字符串，并返回结果。

var d=new Date();
var n=d.toLocaleDateString(); 
console.log(n);

例1:上月的1号是星期几？(注意:有的月份是31天,有的是30天)

   //上月的1号是星期几？
     //1 获取时间对象
        var date = new Date();
     // 2 获取这个月是几月
        var mo = date.getMonth();
 
       //4 设置日期为1号
          date.setDate(1);
     // 3 减1就是上一个月,然后设置月份
          date.setMonth(mo-1);
      // 5 获取一周中的第几天
      console.log(date.toLocaleString());
       var week = date.getDay();
       console.log(week);

延时器和计时器(掌握)

setInterval() 定时器方法

描述：指定时间不断重复的执行js代码（一直执行）

语法： var t = setInterval(code,ms);

说明：

1、code指js代码，一般写函数（注：得加引号）

2、ms指毫秒 ， 1s = 1000ms,间隔多少秒执行一次

3、使用setInterval()会返回一个唯一的标示，通过clearInterval()可以清除定时器

clearInterval()

功能：清除定时器

语法：clearInterval(t);

参数：t指定时器返回的唯一标示

例1:重复的输出hello

例2:结合上面时间显示 函数,实现倒计时效果

setTimeout() 延时器方法

描述：打开网站等待指定时间后执行js代码（仅执行一次）

语法：var t = setTimeout(code,ms);

说明：

1、code指js功能代码，一般写函数（注：必须加引号）

2、ms指毫秒 1s = 1000ms

3、使用setTimeout()会返回一个唯一的标示，通过clearTimeout(唯一标示)可以清楚延时器

例1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vdTluEIk-1662382787955)(F:\北京\2201\08\笔记\images\1560514322509.png)]

<input type="button" value="显示计时的消息框" onclick="Tk();" />
<script>
/*
    步骤
        1、页面显示按钮
        2、点击按钮调用指定函数
        3、函数体内设置延时器
*/

function Tk()
{
    // alert(1);
    setTimeout(tips, 5000);
}

function tips()
{
    alert("哈哈");	
}
</script>

setTimeout和setInterval的区别

setTimeout延时器 ：只执行一次

从定时器 ： 重复不断执行

1.倒计时

从10到0，停止，点击按钮还原倒计时，到0，再停-----------------------点击，再还原

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    #box {
      width: 100px;
      height: 100px;
      line-height: 100px;
      font-size: 40px;
      margin: 30px auto;
      border: solid 4px black;
      text-align: center;
    }

    input {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="box">5</div>
  <input type="button" name="btn" id="btn" value="开始" />
  <input type="button" name="btn" id="btn2" value="停止" />
  <script>
    // 1 获取节点
    var boxObj = document.querySelector('#box');
    var startObj = document.querySelector('#btn');
    var stopObj = document.querySelector('#btn2');
    // 2 设置变量
    // 保存定时器返回值,方便后面清空
    var times = '';
    // 保存页面中起始数据
    var num = boxObj.innerHTML;
    // 3点击开始,实现到倒计时
    startObj.onclick = function () {
      // 4 设置定时器
      times = setInterval(function () {
        var num1 = boxObj.innerHTML;
        // console.log(num1);
        //5 将数字减1之后,放回
        num1--;
        boxObj.innerHTML = num1;
        //console.log(num1);
        //6 数字小于0,则停止定时器,且将数字设置为5
        if (num1 < 0) {
          clearInterval(times);
          boxObj.innerHTML = num;
        }
      }, 1000);
    }

    // 点击停止,则清空定时器
    stopObj.onclick = function () {
      clearInterval(times)
    }
  </script>
</body>

</html>

作业:

点名系统

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#isyou{font-size: 80px;text-align: center;margin: 100px auto;}
			#btn{width: 180px;height: 60px;border: none;background: dodgerblue;display: block;margin: 0 auto;color: #fff;font-size: 30px;border-radius: 6px;text-align: center;line-height: 60px;cursor: pointer;}
			#btn:active{background: slateblue;}
		</style>

	</head>
	<body>
		<div id="isyou">请点击下面的按钮，开始抽奖</div>
		<span id="btn">点击开始</span>
	</body>
	<script type="text/javascript">
    var str = '赵立伟,宋宁,王泽堂,陈世跑,屈庆伸,陈刚,张涛,杨兴文,陈峰,左成发,高攀伟,杨凯峰,里祥瑞,吴家保,申浩,严思霞,杨晓辉,王松,周文利,孙光,董帅,刘猛,张毅,王超一,尹升建,林素溢,李旭,李梦雪,陶文君,高兴悦,邹丹丹,王绍康,王安智,卜祥赫,刘战阳,胡腾,孙引,余迎,王亚民,赵越,余瑶,王苏,李恩赐,黎瑞华,陶金叶,罗水平,蒲旺,张高飞,张磊,宋腾南,张帅杰,蒙丽娜,熊文豪,王惟安,孙学科,徐亚翔,邰振辉,宋瑞准,孙存浩,郑泽洋,刘炳芳,陈乾,蔡智泉,徐康,李锋,吴振涛,李延送';

		var arr = str.split(",")
		
		var oIsyou = document.getElementById("isyou")
		var obtn = document.getElementById("btn")
		var onOff = true;
		var timer;
		
		obtn.onclick = function(){
			
			if(onOff){
				timer = setInterval(function(){
					var i = Math.round(Math.random()*(arr.length-1))
					oIsyou.innerHTML = arr[i]
				},30)
				obtn.innerHTML = "点击停止";
				onOff = false
			}else{
				obtn.innerHTML = "点击开始";
				clearInterval(timer);
				onOff = true
			}
		}
		
	</script>

跑,屈庆伸,陈刚,张涛,杨兴文,陈峰,左成发,高攀伟,杨凯峰,里祥瑞,吴家保,申浩,严思霞,杨晓辉,王松,周文利,孙光,董帅,刘猛,张毅,王超一,尹升建,林素溢,李旭,李梦雪,陶文君,高兴悦,邹丹丹,王绍康,王安智,卜祥赫,刘战阳,胡腾,孙引,余迎,王亚民,赵越,余瑶,王苏,李恩赐,黎瑞华,陶金叶,罗水平,蒲旺,张高飞,张磊,宋腾南,张帅杰,蒙丽娜,熊文豪,王惟安,孙学科,徐亚翔,邰振辉,宋瑞准,孙存浩,郑泽洋,刘炳芳,陈乾,蔡智泉,徐康,李锋,吴振涛,李延送’;

	var arr = str.split(",")
	
	var oIsyou = document.getElementById("isyou")
	var obtn = document.getElementById("btn")
	var onOff = true;
	var timer;
	
	obtn.onclick = function(){
		
		if(onOff){
			timer = setInterval(function(){
				var i = Math.round(Math.random()*(arr.length-1))
				oIsyou.innerHTML = arr[i]
			},30)
			obtn.innerHTML = "点击停止";
			onOff = false
		}else{
			obtn.innerHTML = "点击开始";
			clearInterval(timer);
			onOff = true
		}
	}
	
</script>