JS浏览器事件

kong@react

已于 2022-11-13 23:09:24 修改

阅读量372

点赞数

文章标签：前端 javascript

于 2022-11-13 18:02:15 首次发布

本文链接：https://blog.csdn.net/kkddqq1121/article/details/127833579

版权

一.获取浏览器

1.高(innerHeight)和宽(innerWidth) 计算滚动条

<script>
// 获取浏览器的高
conslon.log(window.innerHeight)
// 获取浏览器的宽
conslon.log(window.innerWidth)
</script>

2.高(clientHeight)和宽(clientWidth) 不计算滚动条

<script>
// 获取浏览器的高
conslon.log(document.documentElement.clientHeight)
// 获取浏览器的宽
conslon.log(document.documentElement.clientWidth)
</script>

二.浏览器滚动距离顶部(scrollTop) 回顶(scrollTo)

<button id="Top">回顶</button>

window.onscroll = function(){
  // 打印滚动距离
  console.log(document.documentElement.scrollTop)
  // 可用于浏览器低版本
  console.log(document.body.scrollTop)

  // 滚动距离 显示与隐藏
  if((document.documentElement.scrollTop || document.body.scrollTop)>200){
	console.log("显示")
  }eles{
  	console.log("隐藏")
  }
}
Top.onclick = function(){
	window.scrollTo(0,0)
	// 对象形式
	window.scrollTo({
	  Top:0,
	  left:0
	})
}

三.浏览器历史记录（history）

1.点击跳转到下一页

history.forward()
history.go(1)

2.点击回到上一页

history.back()
history.go(-1)

<button id = "Bott">下一页</button>
<script>
	Bott.onclick = function(){
		history.forward()
		history.go(1)
	}
</script>

<button id = "Bott">上一页</button>
<script>
	Bott.onclick = function(){
		history.back()
		history.go(-1)
	}
</script>

四.本地存储

1.session：信息存储到服务器上
2.localStorage：永久存储到客户端本地
3.cookie：把信息存储到客户端的浏览器中

// 存储数据
localStorage.setItem()
// 获取存储数据
localStorage.getItem()
//

实现功能：账号与密码添加一次后，可以自动添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号:<input type="text" id="username">
    <br>
    密码:<input type="password" id="userpassword">
    <br>
    <button id="login">登录</button>

    <script>
        // getItem 获取本地存储
        var userna = localStorage.getItem("name")
        var mima = localStorage.getItem("password")
        if(userna && mima){
            username.value = userna
            userpassword.value = mima
        }

        login.onclick = function() {
            console.log(username.value,userpassword.value)
            // name 与 password 是存储到本地的名称
            localStorage.setItem("name",username.value)
            localStorage.setItem("password",userpassword.value)
        }
    </script>
</body>
</html>