day4_javascript2
day4_javascript2
1加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
整个html文档都是从上到下加载 解释执行
script尽量写在页面最下边 保证html元素加载完毕 再处理js
onload 加载结束
*/
// debugger
function myInit(){
document.getElementById("myText").value = "蔡徐坤..."
}
</script>
</head>
<body onload="myInit()">
<input id="myText" type="text"/>
</body>
</html>
注意:
script标签 尽量写在页面最下边 保证html元素加载完毕 再处理js
2键盘事件
用户通过键盘输入之后 做交互效果
onkeyup 键盘弹起 生效之后
onkeydown 键盘按下 生效之前
特殊情况:
可以通过内置事件对象 获得键盘码表
<input type="text" onkeyup="myTest(event)"/>
function myTest(event){
console.log(event.keyCode);
}
2.1输入框校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
vertical-align: middle;
display: none;
}
</style>
</head>
<body>
<input id="myPhone" type="text" onkeyup="checkPhone()"><img id="phoneImg" src="./imgs/nook.png"/><br>
<!-- <span id="phoneSpan"></span> -->
</body>
<script>
/*
1 正则怎么表示
/^1(3|4|5|7|8)\d{9}$/
正则对象.test("字符串")
/^1(3|4|5|7|8)\d{9}$/.test("13333333333")
*/
/*
键盘输入 经常做 输入校验效果
*/
function checkPhone(){
//正则对象
let phoneReg = /^1(3|4|5|7|8)\d{9}$/
//phone框的内容
let phoneTextVal = document.getElementById("myPhone").value
// console.log(phoneReg.test(phoneTextVal));
if(phoneReg.test(phoneTextVal)){
// document.getElementById("phoneSpan").innerHTML = "格式正确"
// document.getElementById("phoneSpan").style.color = "green"
document.getElementById("phoneImg").src="./imgs/ok.png"
}else{
// document.getElementById("phoneSpan").innerHTML = "格式错误"
// document.getElementById("phoneSpan").style.color = "red"
document.getElementById("phoneImg").src="./imgs/nook.png"
}
document.getElementById("phoneImg").style.display = "inline-block"
}
</script>
</html>
2.2表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
vertical-align: middle;
display: none;
}
</style>
</head>
<body>
<form action="/myserver" method="get" onsubmit="return checkAll()">
<input id="myPhone" type="text" name="phone" onkeyup="checkPhone()"><img id="phoneImg" src="./imgs/nook.png"/><br>
<input id="myMail" type="text" name="mail" onkeyup="checkMail()"><img id="mailImg" src="./imgs/nook.png"/><br>
<button type="submit">注册</button>
</form>
</body>
<script>
/*
表单校验效果:
1.每个输入框 需要单独配正则表式 做校验
2.表单提交时 调用每个单独校验 根据&&关系 所有都正确才能提交
*/
function checkPhone(){
//正则对象
let phoneReg = /^1(3|4|5|7|8)\d{9}$/
//phone框的内容
let phoneTextVal = document.getElementById("myPhone").value
// console.log(phoneReg.test(phoneTextVal));
let flag = false;
if(phoneReg.test(phoneTextVal)){
// document.getElementById("phoneSpan").innerHTML = "格式正确"
// document.getElementById("phoneSpan").style.color = "green"
document.getElementById("phoneImg").src="./imgs/ok.png"
flag = true
}else{
// document.getElementById("phoneSpan").innerHTML = "格式错误"
// document.getElementById("phoneSpan").style.color = "red"
document.getElementById("phoneImg").src="./imgs/nook.png"
flag = false
}
document.getElementById("phoneImg").style.display = "inline-block"
return flag
}
function checkMail(){
//正则对象
let mailReg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/
//phone框的内容
let mailTextVal = document.getElementById("myMail").value
// console.log(phoneReg.test(phoneTextVal));
let flag = false;
if(mailReg.test(mailTextVal)){
// document.getElementById("phoneSpan").innerHTML = "格式正确"
// document.getElementById("phoneSpan").style.color = "green"
document.getElementById("mailImg").src="./imgs/ok.png"
flag = true
}else{
// document.getElementById("phoneSpan").innerHTML = "格式错误"
// document.getElementById("phoneSpan").style.color = "red"
document.getElementById("mailImg").src="./imgs/nook.png"
flag = false
}
document.getElementById("mailImg").style.display = "inline-block"
return flag
}
//调用所有校验效果
function checkAll(){
let mailRes = checkMail();
let phoneRes = checkPhone();
return mailRes&&phoneRes
}
</script>
</html>
3BOM浏览器对象模型
通过浏览器控制浏览器的按钮和功能
3.1window对象
当前窗口对象 当前的html文档 js对当前文档生效
//系统自带的弹窗
//1window可以忽略不写
//2js解析器(js执行引擎) 单线程的 alert会阻塞线程
//alert("弹窗")
//confirm("确定离开么...")
//prompt("请输入")
3.2history对象
历史记录对象
history.back() 后退一个文档
history.forward() 前进一个文档
history.go(-2); 跳文档
在历史记录中 通过编号跳转 -2 -1 0 1 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="myBack()">回退</button>
<button onclick="myForward()">前进</button>
<button onclick="myGo()">跳记录</button>
</body>
<!--
history 历史记录对象
可以搭配js中的 各种事件 做不同的触发 不一定限定用按钮
history.back() 后退一个文档
history.forward() 前进一个文档
history.go(-2); 跳文档
在历史记录中 通过编号跳转 -2 -1 0 1 2
-->
<script>
function myBack(){
history.back()
}
function myForward(){
history.forward()
}
function myGo(){
history.go(0);
}
</script>
</html>
3.3location地址对象
可以不同元素 在不同事件中做页面跳转
location.href href属性
location.reload() reload()函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="toBaidu()" >跳转到百度</button>
<div style="width: 100px;height: 100px;border: 1px solid black;" onmouseover="toBaidu()">
王美丽王美丽 我们爱你!!!!!
</div>
<button onclick="myReload()" >刷新页面</button>
</body>
<script>
/*
功能简单 但是意义重大
location.href href属性
location.reload() reload()函数
*/
function toBaidu(){
/*
三种路径
1相对路径
2相对根路径
3绝对路径
*/
location.href="https://www.baidu.com/s?wd=王美丽"
}
function myReload(){
location.reload()
}
</script>
</html>
3.4document对象
当前文档对象
可以在当前文档中 根据特征获取各种元素
getElementById 通过id查找元素 html标签
返回指定id的第一个元素
id值不要重复 不然容易获取不到
getElementsByClassName 通过class值 找元素 获得元素集合
想控制元素的属性时 需要先取到元素再操作 经常搭配遍历使用
getElementsByTagName 通过标签名 找元素 获得元素集合
想控制元素的属性时 需要先取到元素再操作 经常搭配遍历使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="mycls" id="myEle2" value="bbbb"/>
<button class="mycls" id="myEle">aaa</button>
<button >ccc</button>
</body>
<script>
console.log(document);
//找元素改属性
/*
getElementById 通过id查找元素 html标签
返回指定id的第一个元素
id值不要重复 不然容易获取不到
getElementsByClassName 通过class值 找元素 获得元素集合
想控制元素的属性时 需要先取到元素再操作 经常搭配遍历使用
getElementsByTagName 通过标签名 找元素 获得元素集合
想控制元素的属性时 需要先取到元素再操作 经常搭配遍历使用
Cannot set properties of undefined
Cannot set properties of null
类似于空指针报错
*/
//console.log(document.getElementById("myEle"));
console.log(document.getElementsByClassName("mycls"));
// document.getElementsByClassName("mycls")[0].style.color="red"
// debugger
// let eles = document.getElementsByClassName("mycls")
// //js中 可以自由扩展属性和函数
// eles.style = "red"
// console.log(eles);
let eles = document.getElementsByClassName("mycls");
for(let ele of eles){
ele.style.color="red"
}
console.log(document.getElementsByTagName("button"));
</script>
</html>
4BOM常用方法
打开关闭窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="newWin()" >打开新窗口</button>
<button onclick="closeWin()" >关闭窗口</button>
</body>
<script>
/*
open返回值 得到新窗口对象
如果要跨函数使用对象 可以使用全局变量
*/
//提升作用域范围
let newWinObj;
function newWin(){
newWinObj = open("/day4_javascript2/1加载事件.html")
}
function closeWin(){
newWinObj.close()
}
// open("/day4_javascript2/1加载事件.html")
</script>
</html>
定时函数
三种语法:
1. setInterval("myFun()",1000)
2. setInterval(myFun,1000)
3. setInterval(function(){},1000)
建议使用匿名函数
注意:
匿名函数 function(){}
箭头函数 替代 ()=>{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="startBtn" onclick="startInterval()">开启定时</button>
<button id="stopBtn" onclick="stopInterval()">停止定时</button>
</body>
<script>
/**/
//每隔一定事件 执行指定的函数
/*
1. setInterval("myFun()",1000)
2. setInterval(myFun,1000)
3. setInterval(function(){},1000)
匿名函数
箭头函数 替代
()=>{}
setInterval 定时反复执行
setTimeout 定时执行一次(延时执行)
clearInterval(taskId) 停止定时
clearTimeout(taskId) 停止延时执行 (需要在执行前调用)
主要用来做页面定时切换或者改变的效果
1可以开启多任务时 通过数组记录任务号 关闭时 可以统一关闭
2只开启一个任务 通过控制按钮的启用禁用 限制用户开启数量
*/
// function myFun(){
// console.log(1);
// }
// setInterval("myFun()",1000)
// setInterval(myFun,1000)
// setTimeout(()=>{
// console.log("执行了....");
// },2000)
/*
单个数据 用单个变量
多个数据 用集合存
*/
//let taskId;
// let taskArr = [];
// function startInterval(){
// let taskId = setInterval(()=>{
// console.log("执行了.....");
// },1000)
// taskArr.push(taskId)
// }
// function stopInterval(){
// console.log(taskArr);
// for(let tid of taskArr){
// clearInterval(tid)
// }
// //clearInterval(taskId)
// }
let taskId;
function startInterval(){
document.getElementById("startBtn").disabled = true
taskId = setInterval(()=>{
console.log("执行了.....");
},1000)
}
function stopInterval(){
document.getElementById("startBtn").disabled = false
clearInterval(taskId)
}
</script>
</html>
浙公网安备 33010602011771号