发表于： 2020-04-17 21:46:57
0 2034
一、今天完成的任务
<script>
/*
* BOM
* - 浏览器对象模型
* - BOM可以使我们通过JS来操作浏览器
* - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
* - BOM对象
* window
* - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
* Navigator
* - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
* Location
* - 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
* History
* -代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
* 由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页
* 而且该操作只在当次访问时有效
* Screen
* - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
*
* 这些 BOM 对象在浏览器中都是作为window对象的属性保存的
* 可以通过window对象来使用，也可以直接使用
* */
/*
* Navigator
* - 代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器
* - 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
* - 一般我们只会使用userAgent来判断浏览器的信息
* userAgent 是一个字符串，这个字符串中包含有用来描述浏览器信息的内容
* 不同的浏览器会有不同的userAgent
* 火狐的userAgent
* Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
* 谷歌的
* Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
*
* 在IE11中已经将微软和IE相关的标识都已经祛除了，所以我们基本已经不能通过userAgent来识别一个浏览器是否是IE了
*
* */
// console.log(navigator.userAgent);
if (/firefox/i.test(navigator.userAgent)){
alert("你是火狐吗");
}
/*
* History
* - 对象可以来操作浏览器向前或向后翻页
* - length
* - 属性，可以获取到当前访问的连接数量
* - back（）方法
* - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
* - forword（）方法
* - 可以跳转到下一个页面，作用和浏览器的前进按钮一样
* - go
* - 可以跳转到指定的页面，他需要一个整数作为参数
* 1：表示向前跳转一个页面，相当于forword（）
* 2：表示向前跳转两个页面
* -1：表示向后跳转一个页面
* -2：表示向后跳转两个页面
* */
alert(history.length);
window.onload = function () {
var btn = document.getElementById("btn01");
btn.onclick = function () {
history.forward();
}
}
/*
* location
* - 该对象中封装了浏览器的地址栏的信息
* - 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
* - 如果直接将location属性修改为一个完整的路径，或相对路径， 则我们页面会自动跳转到该路径的，并且会生成相应的历史记录
* - 属性
* - 1.assign()
* - 用来跳转到其他的页面，作用和直接修改location一样
* - 2.reload
* - 重新加载当前页面，作用和刷新按钮一样
* - 如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面
* - 3.replace（）
* - 可以使用一个新的页面替换当前的页面，调用完毕也会跳转页面
* */
</script>
</head>
<body>
<button id="btn01">
点我
</button>
<h1>History</h1>
<a href="键盘事件.html">11</a>
</body>
定时器
<script>
window.onload = function () {
//获取count
var count = document.getElementById("count");
//使count中的内容自动切换
/*
* JS中的程序的执行时非常非常快的
* 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
* */
// for (var i = 0;i < 10 ; i++){
// count.innerHTML = i;
// }
/*
* setInterval()
* - 定时调用
* - 可以将一个函数每隔一段时间执行一次
* - 参数：
* 1.回调函数：该函数会每隔一段时间被调用一次
* 2.每次调用间隔的时间，单位是毫秒
*
* - 返回值：
* 返回一个Number类型的数据
* 这个数字用来作为定时器的唯一标识
*
* */
var num = 1;
setInterval(function () {
count.innerHTML = num++;
if (num == 11){
clearInterval(1);
}
},1000);
//clearInterval（）可以用来关闭一个定时器
//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
// clearInterval();
};
</script>
</head>
<body>
<h1 id="count">1</h1>
</body>
利用定时器切换图片的练习
<script>
window.onload = function () {
/*
* 使图片可以自动切换
* */
//获取img标签
var img1 = document.getElementById("img1");
//创建一个数组来保存图片的路径
var src = ["1.jpg","2.jpg","3.jpg"];
//创建一个变量，用来保存当前图片的索引
var index = 0;
//定义一个变量，用来保存定时器的标识
var timer;
//获取按钮
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
btn01.onclick = function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器
* 点击多次就会开启多个定时器，这就导致图片的切换速度过快
* 并且我们只能关闭最后一次开启的定时器
* */
//在开启定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
timer = setInterval(function () {
//使索引自增
index++;
if (index>src.length-1){
index = 0;
}//判断索引的值是否超过图片的数量，如果超过就使index = 0
//还有一种写法，判断index
// index = index%src.length;//当index的大小自增到和数组的长度一样时，那么index取余重新变为0
//修改img1的src属性
img1.src = src[index];
},1000);
};
btn02.onclick = function () {
clearInterval(timer);
//清除定时器，它可以接收任何的参数
//如果参数是一个有效的定时器的标识，则停止对应的定时器
//如果参数不是一个有效的标识，则什么也不做
}
}
</script>
</head>
<body>
<button id="btn01">点我啊</button>
<button id="btn02">停止吧</button>
<img id="img1" src="1.jpg" style="width: 300px;height: 300px"/>
</body>
</html>
延时调用
<script>
var num = 1;
//开启一个定时器
// setInterval(function () {
// console.log(num++);
// },1000);
/*
* 延时调用
* - 一个函树不马上执行，而是隔一段时间以后执行，而且只会执行一次
*
* 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
*
* 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
* */
setTimeout(function () {
console.log(num++);
},1000);
clearTimeout(1);//关闭一个延时调用
</script>
</head>
二、遇到的困难
无
三、明天要做的事情
继续
四、收获
学习了定时器
返回列表
评论