回到顶部
<!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>
<style>
* {
padding: 0;
margin: 0;
}
#header {
width: 100%;
height: 200px;
background-color: pink;
position: fixed;
top: -200px;
transition: all linear 2s;
}
li {
height: 1000px;
}
#btn {
width: 100px;
height: 100px;
background-color: yellow;
position: fixed;
right: 50px;
bottom: 50px;
display: none;
}
</style>
</head>
<body>
<div id="header">顶部</div>
<ul>
<li>1</li>
</ul>
<button id="btn">回到顶部</button>
<script>
/**
* 1.当页面的距离大于300的时候，让header和btn展示
* header 的 top设置为0就能看到了
* btn 的 display设置为block就能看到了
* 2.当页面滚动的距离小于300的时候，让 header 和 btn 取消展示
* header 的 top设置为200就能看到了
* btn 的 display设置为none就能看到了
* */
// 0.想设置元素的属性。一定要先获取标签
var header = document.getElementById('header')
var btn = document.querySelector('#btn')
// 1.监听页面的滚动距离，从而决定是否展示header和btn
window.onscroll = function() {
// console.log(document.scrollingElement.scrollTop)
if(document.scrollingElement.scrollTop > 300) {
// console.log('展示header和btn')
header.style.top = 0
btn.style.display = 'block'
} else {
header.style.top = -200 + 'px'
btn.style.display = 'none'
}
}
/**
* 2.新需求
* 点击btn按钮时 让页面滚动到顶部
*
* 1.监听btn是否被点击
* 语法：元素.onclick = function () {}
* 2.当btn被点击的时候，让页面滚动的距离回到0
* 我们直接给scrollTop重新赋值即可
* */
// 1.监听btn是否被点击
btn.onclick = function () {
// 当btn按钮被鼠标单击的时候，就会执行这个函数内的代码
// console.log('我是一个按钮，我被点击了~~~')
document.scrollingElement.scrollTop = 0
}
</script>
</body>
</html>
密码可视化
<!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="password">
<button id="btn">这是一个眼睛图标</button>
<script>
/**
* 密码可视化
* 1.监听btn 是否被点击
* 语法：
* 2.点击的时候，判断 input的 type属性
* 如果type === password -> 重新题值为text
* 如果type === text -> 重新题值为password
* */
// 0.获取标签
var btn = document.querySelector('#btn')
var input = document.querySelector('input')
// 1.监听btn是否被点击
btn.onclick = function () {
// console.log('我被点击了~~~')
// 2.点击的时候，判断 input的 type属性
// if (input.getAttribute('type') === 'password') {
// input.setAttribute('type', 'text')
// } else if(input.getAttribute('type') === 'text') {
// input.setAttribute('type', 'password')
// }
// console.log(input.type)
if(input.type === 'password') {
input.type = 'text'
} else if(input.type === 'text') {
input.type = 'password'
}
}
</script>
</body>
</html>
