添加列表 非空验证:
<!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>
input {
height: 30px;
outline-style: none;
}
ul li {
list-style: none;
width: 200px;
height: 30px;
border: 1px solid red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<input id="text" type="text">
<input id="btn" type="button" value="点击添加">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var btn = document.getElementById("btn")
btn.onclick = function() {
// console.log(confirm("确定要添加吗?"))
if (test()) {
if (confirm("确定要添加吗?") == true) {
var li = document.createElement("li")
var text = document.getElementById("text")
li.innerHTML = text.value
var list = document.getElementById("list")
// list.appendChild(text.value)
list.appendChild(li)
} else {
alert("添加失败")
}
} else {
alert("不是")
}
}
function test() {
var fn = /\b[a-zA-Z0-9]{1,}\b/
var text = document.getElementById("text")
if (fn.test(text.value)) {
return true
} else {
return false
}
}
</script>
</body>
</html>
打开新窗口 ,关闭新窗口 案例
<input type="button" value="openNew 打开新窗口" id="openNew">
<input type="button" value="closeNew 关闭新窗口" id="closeNew">
<script>
var newWindow //用来储存新打开的窗口
openNew.onclick = function() {
newWindow = window.open("https://www.baidu.com")
}
closeNew.onclick = function() {
newWindow.close("https://www.baidu.com") //close():关闭打开的窗口
}
</script>
打开新页面(可以返回) 刷新新页面 打开新页面(不可以返回)
<!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="button" value="assign" id="assign">
<input type="button" value="reload" id="reload">
<input type="button" value="href" id="href">
<script>
assign.onclick = function() {
//assign() 可以打开新页面,并且返回,可以产生历史记录的
location.assign("https://www.baidu.com")
}
reload.onclick = function() {
location.reload() //实现的是页面刷新
console.log("aa")
}
href.onclick = function() {
location.href = "https://www.baidu.com" //跳转到页面不可以返回
}
</script>
</body>
</html>
三个页面的跳转
html 第一个页面
<div>html1</div>
<input type="button" value="跳转" id="btn">
<script>
// var input = document.getElementById("btn")
btn.onclick = function() {
location.href = "2.html"
}
</script>
html 第二个页面
<div>html2</div>
<input type="button" value="后退" id="btn1">
<input type="button" value="跳转到3" id="btn2">
<input type="button" value="forward" id="btn3">
<input type="button" value="go" id="btn4">
<script>
btn1.onclick = function() {
history.back() // 返回
}
btn2.onclick = function() {
location.href = "3.html" //直接跳转到3.html页面
}
btn3.onclick = function() {
history.forward() //前进到历史记录列表的下一个url
}
btn4.onclick = function() {
history.go(-2) //-2返回到上上个页面 2 就到 下下个页面
}
</script>
第三个页面 html
<input type="button" value="返回" id="btn1">
<script>
btn1.onclick = function() {
history.go(-2)
}
</script>
页面加载,滚动条滑动 页面视口改变
<!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>
body {
width: 2000px;
height: 2000px;
}
</style>
</head>
<body>
<script>
//onload 页面加载时触发
window.onload = function() {
console.log("aaa")
}
//滚动条上下左右拉动是 触发函数
window.onscroll = function() {
console.log("onscroll")
}
//页面视口改变
window.onresize = function() {
console.log("onresize")
}
</script>
</body>
</html>
案例 页面改变时 背景颜色发生改变 (类似于媒体查询)
// 案例 页面改变时 背景颜色发生改变 (类似于媒体查询)
window.onresize = function() {
var body = document.body
var w = body.clientWidth
if (w > 1200) {
body.style.backgroundColor = "red"
} else if (w > 992) {
body.style.backgroundColor = "green"
} else if (w > 768) {
body.style.backgroundColor = "orange"
} else {
body.style.backgroundColor = "black"
}
}
防抖和节流
防抖是持续输出 输出停止两秒后显示效果
防抖的思路与实现
1.事件函数执行,先创建定时器
2.把逻辑代码放到定时器中
3.当函数再次触发时清除定时器
4.创建一个新的定时器
节流 是每隔两秒都会执行一次
<input type="text" value="" id="username">
<script>
// //防抖 防抖是持续输出 输出停止两秒后显示效果
// var timer
// username.oninput = function() {
// clearTimeout(timer) //清除 运行的aa
// timer = setTimeout(function() {
// console.log("aa")
// }, 2000)
// }
//节流 只要输出就会是每隔两秒都会执行一次
var itemr = null
username.oninput = function() {
if (itemr) {
return
}
timer = setTimeout(function() {
console.log("aa")
timer = null
}, 2000)
}
</script>