1、BOM操作
1.1页面地址对象 location
是一种思想，就是操作浏览器中的元素，比如地址(href)
直接用window . 即可
语法格式
// 获得位置信息,返回的是Location对象 window.location // Location对象.属性获得具体的位置信息: // 主机,端口,网站,协议等等 window.location.href
Browser Object Model 浏览器对象模型，将浏览器当作对象，可以与浏览器进行交互
1.1.1location跳转页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="getLocation()">获得location</button>
<hr>
输入网站<input id="i1"/>
<button onclick="setLocation()">设置location-跳转</button>
<script type="text/javascript">
function getLocation(){
// 获得位置信息,返回的是Location对象
console.log(window.location)
// Location对象.属性获得具体的位置信息:
// 主机,端口,网站,协议等等
console.log(window.location.href)
}
function setLocation() {
var val = document.getElementById("i1").value
// 设置当前网站为指定路径(跳转页面)
window.location.href = val;
}
</script>
</body>
</html>
1.2记录浏览记录history
记录当前浏览器的历史记录,实现页面的前进后退
语法格式
// 向前一个页面 （前进）
window.history.forward()
// 返回上一个页面 （后退）
window.history.back();
1.2.1前进后退history
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="red">
<a href="a.html">点击进入a页面</a>
<button onclick="goHead()">前进</button>
<button onclick="goBack()">后退</button>
<script type="text/javascript">
function goHead() {
// 向前一个页面
window.history.forward()
}
function goBack(){
// 返回上一个页面
window.history.back();
}
</script>
</body>
</html>
2、定时器
两个方法：
到达事件执行一次，循环执行
单次执行：
固定时间: setTimeout(函数,时间) ; 在指定时间达到后执行参数函数一次
循环执行：
间隔时间: setInterval(函数,时间间隔); 每个时间间隔都执行函数
2.1固定时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="start()">开始计时</button>
<script type="text/javascript">
function start() {
// 3秒后执行函数
setTimeout(function(){
alert("发射")
},3000); // 毫秒
}
</script>
</body>
</html>
2.2时间间隔【重点】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
中奖人
</div>
<button onclick="start()">开始计时</button>
<button onclick="end()">结束计时</button>
<button onclick="startName()">开始点名</button>
<button onclick="endName()">结束点名</button>
<script type="text/javascript">
var name;
function start() {
var i = 0;
// 每秒执行
// 返回值是定时器的名字
name = setInterval(function(){
console.log(++i)
},1000)
}
function end() {
clearInterval(name);
}
var name2;
function startName() {
var names = ["裕昌","武腾飞","亚辉","敖灿","露珂"];
name2 = setInterval(function(){
// JS的内置对象,Math
// Math.random() 返回0-1之间的小数
// js全局函数,解析为数字,parseInt
var xye = names[parseInt(Math.random() * names.length)]
document.getElementById("box").innerText = xye;
},10)
}
function endName() {
clearInterval(name2);
}
</script>
</body>
</html>
3、正则表达式
是一种校验数据的规则
语法格式：
var 表达式名字 = /正则表达式/;
表达式名字.test(需要判断的值)；
//如果满足正则表达式，返回true，不满足返回false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input {
width: 500px;
height: 50px;
font-size: 40px;
}
</style>
</head>
<body>
<input id="i1" />
<button onclick="check()">校验字符串</button>
<script type="text/javascript">
function check() {
var val = document.getElementById("i1").value;
// 创建正则对象
// 匹配数字
// var reg = new RegExp("[0-9]");
// 匹配数字,有数字就行
var reg = /[0-9]/; // 推荐这种
// 匹配小写字母
var reg2 = /[a-z]/;
// 匹配大写字母
var reg3 = /[A-Z]/;
// 同时匹配大小写
var reg4 = /[A-z]/;
// 同时匹配大小写和数字
var reg5 = /[A-z0-9]/;
// 数字可以写成\d
var reg6 = /[A-z\d]/;
// 要求至少一个数字
var reg7 = /\d+/;
// 要求任意个,0和任意
var reg8 = /\d*/;
// 0或1个
var reg9 = /\d?/;
// 指定个数
// ^匹配开头,$匹配末尾
var reg10 = /^\d{4}$/
// 手机号,11位,开头1,第二位356789,后9位任意数字
var reg11 = /^1[356789]{1}\d{9}$/
// 邮箱 [email protected]
// [email protected]
//
var reg12 = /[\d\w]+@[\d\w]+\.[a-z]/
// 首字母大写,后续包含大写或小写,有数字,总长度6-10
var reg13 = /^[A-Z](?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{5,9}$/;
console.log(reg13.test(val));
/*
需要掌握:
1 回创建正则对象
2 会调用正则方法
3 记住几个常用的正则符号
数字 [0-9] \d
字母 [a-z] [A-Z] [A-z]
字符 \w
量词 +(至少一个) *(任意) ?(0或1) {4}4次, {4,10}出现4到10次之间都行
*/
}
</script>
</body>
</html>