JS10

上午： 1、Math对象 2、进制转换 3、Date 4、案例:定时器 延时器 注意：1)clearInterval 、clearTimeout 可以互相使用 clearInterval 可以同时清除定时器和延时器 clearTimeout 可以同时清除定时器和延时器 2)定时器的编号

下午： 日期对象 //1970 格林威治 过了3600000后的时间

一、定义方式：var date = new Date(); var arr = new Array(); 【数组】 var str = new String(); 【字符串】

二、设置时间 设置时间第一种方式: var date = new Date(‘2020,7,4’); 设置时间第二种方式：Date.parse(‘2020,7,4’) 获取的是时间戳 （运用的是对象.方法）** 时间戳：返回1970年1月1日午夜到指定日期（字符串）的毫秒数 三、日期对象的方法（获取get、设置set） 注意事项： 1）星期不可用设置 2）时间是可以做减法（时间差）

案例：时间中文显示 例子： //1970 格林威治 过了3600000后的时间 var date = new Date(3600000); //什么都不写就是获取当前时间 var date = new Date();

1、日期对象的获取方法： getFullYear（）； getMonth(); //月份从0开始 getDate(); //天数** getDay(); //星期 星期天是0** getHours(); //小时 getMinutes(); //分钟 getSeconds(); //秒

特殊 Date.getTime(); //获取时间戳 1970–至今转化为毫秒

2、设置日期的方法： setFullYear(); setMonth(); 月份从0开始 setDate(); （天数） 当日期大于30， 会进一个月** parse() //注意是大写** 返回是时间戳

3、返回时间戳的 3-1） Date.parse() 3-2） getTime() 3-3） 两个时间做减法也会出现时间戳

4、设定时间的格式 year[]month[]day hour min second

定时器：根据我们设定的时间，重复的做同一件事情；如果不清除会一直执行下去 定时器多次点击过快bug(如何解决？插旗) 语法：setInterval (回调函数，毫秒) 清除定时器：clearInterval (一定要用一个变量接收定时器) 清除定时器就是在清除这个变量 1)设定的时间不能无限小，尽量不要小于20毫秒 2）程序的同步执行与异步 **同步执行：顺序语句、循环语句、条件语句 异步执行：定时器、onclick等事件、ajax 例子：烧水 泡茶 注意：所有的异步程序一定是在同步程序执行完毕之后再执行的（重要）

案例：定时器

1秒=1000毫秒 var t1 =setInterval (function(){ document.write(11); },1000) clearInterval(t1); var t2 =setInterval (function(){ document.write(11); },1000) clearInterval(t2); console.log(t1,t2); document.write('我在定时器后面，但是我却先执行了。后面被定时器覆盖了，只出现一次')

案例：延时器（在设定的时间之后，只执行一次） 语法: setTimeout(回调函数,毫秒) 清除的话需要定义一个变量接收clearTimeout

var t = setTimeout(function(){ document.write('太帅了') },1000) clearTimeout（t） console.log(t);

案例：小广告

思路： 1、HTML布局（div、button(×)、文字） 2、 2-1）为按钮注册点击事件，修改让这个小广告消失； 2-2）使用延时器让这个广告再次呈现 CSS布局 #advise{ width: 200px; height: 200px; background: #f00; position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* div水平居中 */ margin: auto; } #btn{ /* 如果不写的话 默认是在左上方 */ float: right; } HTML布局： <div id="advise"> <button id="btn">×</button> <h1>快联系我1888888</h1> </div> JS布局：//为按钮注册点击让这个div消失，消失之后呢 我们又想要让其延迟出现？那么怎么做呢？使用【延时器】 btn.onclick = function(){ advise.style.display = 'none'; setTimeout(function(){ advise.style.display = 'block'; },1000) }

案例：计时器

<!-- 出错地方 1、注意这里写错了是sec.innerHTML 而不是sec.innerHTML++ 2、min.innerHTML++;写在什么位置呢?肯定是超过60秒的地方啊 3、秒跟分钟 小时是内嵌套 4、点击暂停时 清除计时器 5、点击btn1开始按钮 出现计时器 6、为什么插旗子 定时器多次点击过快bug(如何解决？插旗) 这里的判断条件写在哪里呢？写在计时器 --> <!-- 思路： 5、最重要：用【布尔类型】 1、HTML布局 为按钮1注册点击事件 2、写的是时钟，肯定是需要【定时器】 3、定时器写完发现超过60 还是在一直走 需要【判断一下】 4、.innerHTML表示在文档上面操作元素 sec.innerHTML++;秒钟不停的加 如果分钟等于60 min.innerHTML = 0 清除为0 为按钮2注册点击事件 清除计时器 --> <button id="btn1">开始</button> <button id="btn2">暂停</button> <button id="btn3">结束</button> <span id="hour">0</span>: <span id="min">0</span>: <span id="sec">0</span> <script> var t; var flag = 1; btn1.onclick = function () { // 注意：setInterval(回调函数,毫秒) if (flag) { // t = setInterval(function () { // 为什么写计数器 因为我们要操作小时 分钟 秒啊 sec.innerHTML++; // 因为sec.innerHTML++;会一直加 所以需要【判断大于60需要停下来】 if (sec.innerHTML == 60) { //注意这里写错了是sec.innerHTML 而不是sec.innerHTML++ min.innerHTML++; sec.innerHTML = 0; if (min.innerHTML == 60) { hour.innerHTML++; min.innerHTML = 0; } } }, 100) flag=0; } } btn2.onclick = function () { clearInterval(t); flag =1; } btn3.onclick = function () { clearInterval(t) flag = 1; sec.innerHTML = 0; min.innerHTML = 0; hour.innerHTML = 0; }