正则表达式
正则表达式包含在"/"，"/"中
开始与结束
| ^ | 字符串的开始 |
| $ | 字符串的结束 |
例：
- "^The"：表示所有以"The"开始的字符串（"There"、"The cat"等）
- "of despair$"：表示所有以"of despair"结尾的字符串
- "^abc$"：表示开始和结尾都是"abc"的字符串
- "notice"：表示任何包含"notice"的字符串
量词（次数）
| + | 一次/更多 |
| * | 没有/更多 |
| ? | 没有/一次 |
| {} | 重复次数的范围 |
例：
- "ab*"：表示一个字符串有一个a后面跟着零个或若干个b（"a"、"ab"、"abbb"……）
- "ab+"：表示一个字符串有一个a后面跟着至少一个b或者更多
- "ab?"：表示一个字符串有一个a后面跟着零个或者一个b
- "a?b+$"：表示在字符串的末尾有零个或一个a跟着一个或几个b
- "ab{2}"：表示一个字符串有一个a跟着2个b（"abb"）
- "ab{2,}"：表示一个字符串有一个a跟着至少2个b
- "ab{3,5}"：表示一个字符串有一个a跟着3到5个b
查找匹配
| x|y | 匹配x或y |
| (x) | 匹配括号中的内容 |
| . | 匹配任意字符 |
| [xyz] | 匹配中括号中的任意一个 |
| [^xyz] | 中括号中的一个都不匹配 |
| [a-d] | 表示一个字符串包含小写a到d中的一个 |
| [a-zA-Z] | 包含大小写的任意一个字母 |
| [0-9] | 数字 |
转义字符
| \d | 数字 |
| \D | 非数字 |
| \n | 换行符 |
| \r | 回车符 |
| \s | 空白字符，包括\n,\r,\f,\t,\v等 |
| \S | 非空白字符 |
| \t | 制表符 |
| \v | 重直制表符 |
| \w | 匹配字母，数字或下划线字符 |
练习
校验登录名：只能输入5-20个以字母开头、可带数字、"_"、"."的字符串
密码：6-20个字母、数字、下划线
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>校验登录</title>
<script>
function check(){
var username = document.getElementById('username').value
var userpass = document.getElementById('userpass').value
// 登录名5-20个以字母开头、可带数字、"_"、"."的字符串
var name_regex = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/
// 密码6-20个字母、数字、下划线
var pass_regex = /^(\w){6,20}$/
if(username == null || username == '') {
document.getElementById('pass').innerHTML = ''
document.getElementById('name').innerHTML = '用户名不能为空'
return false
}else if(username.match(name_regex) == null){
document.getElementById('pass').innerHTML = ''
document.getElementById('name').innerHTML = '登录名5-20个以字母开头、可带数字、"_"、"."的字符串'
return false
}else if(userpass == null || userpass == ''){
document.getElementById('name').innerHTML = ''
document.getElementById('pass').innerHTML = '密码不能为空'
return false
}else if(userpass.match(pass_regex) == null){
document.getElementById('name').innerHTML = ''
document.getElementById('pass').innerHTML = '密码6-20个字母、数字、下划线'
return false
}else{
alert('登录成功')
return true
}
}
</script>
</head>
<body>
<form action="" method="get" onsubmit="return check()">
username:<input type="text" id="username"><font id="name"></font>
<br>
userpass:<input type="text" id="userpass"><font id="pass"></font>
<br>
<input type="submit">
</form>
</body>
</html>浏览器对象模型（BOM）
window.open()：打开新窗口
window.close()：关闭当前窗口
window.print()：打印
history.back()：与在浏览器点击后退按钮相同
history.forward()：与在浏览器点击向前按钮相同
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM</title>
</head>
<body>
<button id="btn1" onclick="alert(window.confirm('你确定要执行此操作吗？'))">确认框</button>
<button id="btn2" onclick="window.close()">关闭窗口</button>
<button id="btn3" onclick="window.open()">打开窗口</button>
<button id="btn4" onclick="window.print()">打印窗口</button>
<button id="btn5" onclick="history.back()">返回上一页</button>
</body>
</html>
计时
setInterval()：间隔指定的毫秒数不停地执行指定的代码
setTimeout()：暂停指定的毫秒数后执行指定代码
clearInterval()：用于停止setInterval()方法执行的函数代码
clearTimeout()：用于停止执行setTimeout()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计时</title>
<script>
window.onload=function(){
document.getElementById('btn1').onclick=function(){
// 注意：没有加var
display_time = setInterval(function(){start_time()}, 1000)
}
document.getElementById('btn2').onclick=function(){
clearInterval(display_time)
}
}
function start_time(){
var d = new Date()
var t = d.toLocaleTimeString()
document.getElementById('time').innerHTML = t
}
</script>
</head>
<body>
<p id="time"></p>
<button id="btn1">显示时间</button>
<button id="btn2">暂停时间</button>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计时2</title>
<script>
function myFunction(){
tmp = setTimeout(function(){alert('hello!')}, 3000)
}
function stopmyFunction(){
clearTimeout(tmp)
}
</script>
</head>
<body>
<p>要在3秒前阻止弹窗出现</p>
<button id="btn1" onclick="myFunction()">三秒后出现弹窗</button>
<button id="btn2" onclick="stopmyFunction()">阻止弹窗出现</button>
</body>
</html>
