上午:
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;
}