1 BOM
js技术,包含
- 基本语法
- DOM
- BOM
BOM,Browser Object Mode,浏览器对象模型
详细的BOM操作,可以参考APIJavaScript Window - 浏览器对象模型 (w3school.com.cn)
浏览器对象操作,
- 浏览器弹框
- alert
- confirm
- prompt
- location
<body>
<button id="btn">点击获得location</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
// window.location获得的是一个对象,
// 对象内部有关于当前页面的大部分信息
// 比如说,路径,协议,主机名等等
var location = window.location;
// console.log(location);
// 一般会用到是路径
// 获得路径
var href = window.location.href;
// console.log(href);
// 设置当前页面路径,当前页面就会跳转过去!
window.location.href = "http://www.baidu.com";
};
</script>
</body>
2 固定时间和间隔时间
固定时间
- setTimeout(函数,时间)
- 在指定时间(毫秒)结束后,去执行参数1 函数,且只执行一次
间隔时间
- setInterval(函数,时间)
- 循环在指定时间结束,执行参数1的函数
2.1 固定时间
<body>
<button id="btn">点击开始倒计时</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
// 开始定时
// setTimeout(function () {
// alert("发射!");
// }, 3000);
setTimeout(() => {
alert("发射!222");
}, 3000);
};
</script>
</body>
2.2 间隔时间
<body>
<button id="btn">点击开始循环</button>
<hr />
<!-- 设置一个盒子,存储名字 -->
<div
id="box"
style="
width: 300px;
height: 100px;
border: 20px red solid;
text-align: center;
font-size: 50px;
"
>
某某某
</div>
<button id="btn-name">点击开始点名</button>
<button id="btn-stop">【停】</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
setInterval(function () {
console.log(new Date().toLocaleString());
}, 3000);
};
/**
* 当开始点名,间隔函数开始不断改变div内的名字
*/
var dianming = document.getElementById("btn-name");
var box = document.getElementById("box");
var nameArr = ["盼盼", "谭昊", "中政", "顺博", "九龙", "克龙"];
var sj;
dianming.onclick = function () {
// 给计时器设置名字,sj
sj = setInterval(() => {
var index = parseInt(Math.random() * nameArr.length);
var name = nameArr[index];
box.innerText = name;
}, 30);
};
var stop = document.getElementById("btn-stop");
stop.onclick = function () {
// 结束计时,需要传入计时器名字
clearInterval(sj);
};
</script>
</body>
3 正则表达式
3.1 介绍
正则表达式: 一种匹配文字的语法,常用语校验数据格式.
场景: 注册时表达的输入框中内容要求
- 用户名首字母大小,长度,特殊符号
- 邮箱格式
- 手机号格式
- 身份证格式
正则表达式是由
一些符号组成模板,这个模板来匹配一些字符串,通过方法可以判断这些字符串是否符号这个模板
正则表达式的模板的写法
- [] 内部写匹配的内容
- [abc] 查找方括号之间的任何字符。
- [0-9] 查找任何从 0 至 9 的数字。
- \d 指数字,就是0-9
- n+ 匹配任何包含至少一个 n 的字符串
- n* 匹配任何包含零个或多个 n 的字符串。
- n? 匹配任何包含零个或一个 n 的字符串。
- n{x} 匹配任何包含x个的字符串
- n{x,y} 匹配任何包含x-y之间个数的字符串
- n{x,} 匹配任何包含x或大于x以上个数的字符串
- ^ 匹配开头
- $ 匹配末尾
- . 点在正则表达式中代表所有的意思
正则表达式的方法
- test() 它通过模式来搜索字符串，然后根据结果返回 true 或 false。
- exec() 它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
正则表达式的创建
- 直接写模板
- var reg = /模板/;
- 使用new来创建正则表达式
- var reg = new RegExp(模板);
3.2 演示【熟悉】
<body>
数据<input id="i1" onblur="checkData()" />
<script>
var i1 = document.getElementById("i1");
function checkData() {
var val = i1.value;
// 创建正则表达式1
// var reg = new RegExp("[0-9]");
// 创建正则表达式2
var reg = /[0-9]/; // 模板1: 判断内容是否包含0-9之间任何一个数字
var reg2 = /[a]/; // 模板2: 是否包含a
var reg3 = /[abc]/; // 模板3: 是否包含abc中任何一个
var reg4 = /[a-z]/; // 模板4: 是否包含a-z中任何一个
var reg5 = /[A-Z]/; // 模板5: 是否包含A-Z中任何一个
var reg6 = /[a-zA-Z]/; // 模板6: 是否包含大小写中任何一个
var reg7 = /[A-z]/; // 模板7: 是否包含大小写中任何一个(因为ascll码值)
var reg8 = /[0-9A-Za-z]/; // 模板8: 是否包含数字或者字母
var reg9 = /[\dA-Za-z]/; // 模板9: 是否包含数字或者字母
var reg10 = /\d+/; // 匹配至少一个数字
var reg11 = /\d*/; // 匹配0或者多个数字
var reg12 = /\d?/; // 匹配0或者1个,只要字符串内有1个或0个就对
var reg13 = /^\d?$/; // 匹配整个内容中只能有0或者1个数字
var reg14 = /^\d{4}$/; // 整个内容中只能有数字,且数字个数是4位
var reg15 = /^\d{4,6}$/; // 整个内容中只能有数字,且数字个数是4-6位
var reg16 = /^\d{4,}$/; // 整个内容中只能有数字,且数字个数是至少4位
// 匹配手机号
// 手机号开头必须是1,第二位可以是3,5,6,8,9,后续数字任意,总长得11位
var reg17 = /^1[35689]\d{9}$/;
// 匹配邮箱 237876779@qq.com
// 开头是数字或者字母,其中必须包含@符号,@后可以是数字和字母,必须有.符号,后面必须是字母
// .是正则表达式的特殊符号,需要转移
var reg18 = /^[\dA-Za-z]+@[\da-z]+\.[a-z]+$/;
console.log(reg18.test(val));
// 置空
// i1.value = "";
// 重点是能看懂就行,会写简单模板
}
</script>
</body>
3.3 实战【重点】
使用正则表达式进行表达校验
- 用户名,不能为空,长度6-10之间,只能包含数字和字母
- 密码,不能为空,长度6-10之间
- 二次确认,两次密码要一致
- 手机号,不能为空,要符合规则
- 邮箱,要符合规则
以上校验,如果出错,要给边框变红,并在后面给出红色提示语句,
如果校验合格,给边框变绿,后面给他绿色提示语句
<!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>表单校验</title>
<style>
body {
font-size: 30px;
}
input {
height: 40px;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<form>
<table>
<tr>
<td>用户名</td>
<td><input id="username" type="text" /></td>
<td><span id="username-span"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input id="pwd" type="password" /></td>
<td><span></span></td>
</tr>
<tr>
<td>二次确认</td>
<td><input id="pwd2" type="password" /></td>
<td><span></span></td>
</tr>
<tr>
<td>邮箱</td>
<td><input id="email" type="email" /></td>
<td><span></span></td>
</tr>
<tr>
<td>手机号</td>
<td><input id="phone" type="text" /></td>
<td><span></span></td>
</tr>
</table>
</form>
<script>
var username = document.getElementById("username");
var usernameSpan = document.getElementById("username-span");
// 点入输入框取消样式
username.onfocus = function () {
username.style = "";
usernameSpan.style = "";
usernameSpan.innerText = "";
};
// 失去焦点时校验
username.onblur = function () {
var value = username.value;
console.log(value.length);
if (value.length == 0) {
usernameSpan.innerText = "用户名不能为空!";
usernameSpan.style.color = "red";
username.style.borderColor = "red";
} else {
var reg = /^[\da-z]{6,10}$/;
if (reg.test(value)) {
usernameSpan.innerText = "用户名可以使用!";
usernameSpan.style.color = "green";
} else {
usernameSpan.innerText = "用户名不符合要求";
usernameSpan.style.color = "red";
username.style.borderColor = "red";
}
}
};
</script>
</div>
</body>
</html>
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
