一、定时器
setTimeout()—— 暂停指定的毫秒数后执行指定的代码
clearTimeout()——取消指定的setTimeout函数将要执行的代码
setInterval()——间隔指定的毫秒数不停地执行指定的代码
clearInterval()——取消指定的setInterval函数将要执行的代码
用法 setInterval(()=>{},时间(单位毫秒)),setTimeout和其用法相同;
当然箭头函数也可以用function函数替代
而清楚定时器需要我们定义的时候给其定义一个名字,当消除定时器的时候,直接调用他的名字就噩可以了,例如下边代码
var timer = setInterval(function(){
console.log( Math.random() )
},1000);
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
clearInterval(timer)
}
*/
var timer1 = setTimeout(function () {
console.log(Math.random())
}, 2000);
clearTimeout(timer1);
</script>
二、滚动条相关
1、scrollTo(x,y)——在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
2、scrollBy(x,y)—— 如果有滚动条,将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素),将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
3.我们利用上边学的去实现一个小功能
<1>我们现在body中多写一些内容,让其拥有滚动条
<h2>哈哈哈哈哈哈</h2>
<h2>哈哈哈哈哈哈</h2>
<h2>哈哈哈哈哈哈</h2>
<h2>哈哈哈哈哈哈</h2>
<h2>哈哈哈哈哈哈</h2>
<h2>哈哈哈哈哈哈</h2>
<h2>哈哈哈哈哈哈</h2>
<h2>哈哈哈哈哈哈</h2>
<h2>哈哈哈哈哈哈</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<h2>呵呵呵呵呵呵呵呵呵呵呵呵呵呵</h2>
<2>然后我们通过设置按钮点击按实现滚动条返回顶部 ,我们通过定时器进行这个操作,当scollTop<=0时清除这个定时器(注:scollTop是页面当前距离顶部的高度)
<button id="btn">click</button>
<script>
// 点击按钮 滚动调皮滚动到顶部
// 1取到按钮
var oBtn = document.getElementById('btn');
//2 绑定点击事件
oBtn.onclick = function () {
//3 让滚动条滚动到顶部
// window.scrollTo(0,0);
// window.scrollBy(0,-50)
// 4 可不可以 通过定时器 每隔一段时间向上移动。
// 判断 是否到达顶部,通过当前滚动条滚动的高度
var timer = setInterval(function () {
// 获取当前滚动条滚动的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if( scrollTop <= 0){
clearInterval(timer);
}else{
window.scrollBy(0, -50)
}
}, 50)
}
三、历史记录相关
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go(num) 加载 history 列表中的某个具体页面,值得注意的是我们想要点击下一个需要先去点击a标签创建历史记录再返回此页面的时候才生效
<body>
<a href="./bom-4.html">A页面</a>
<button id="btn">下一个</button>
<script>
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
// 下一页
history.forward();
}
console.log(location.hostname, location.href);
//location:
// location.hostname等信息
//navigator.userAgent 用户电脑信息
</script>
下边代码是a标签链接的页面,其中绑定上一页的功能实现
<body>
我是A页面
<button id="btn">上一页</button>
<script>
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
// 上一页
history.back()
}
</script>
</body>
四、其他方法
alert()--弹出消息对话框(对话框中有一个“确定”按钮)
confirm()--弹出对话框(对话框中包含一个确定与取消按钮)
prompt()--弹出对话框(对话框包含一个确定与取消按钮与一个文本框);