Web前端——JavaScript 的基础总结
一、介绍
- JavaScript是最流行的脚本语言，它存在于所有的 web 浏览器中
- 脚本语言是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，在被调用时进行解释
JavaScript手册下载
二、组成
- 核心—— ECMAScript
- 文档对象模型——DOM
- 浏览器对象模型——BOM
三、JS的导入方式
1、在 H5 内部使用 JS
<html>
<head>
<meta charset="utf-8">
<title>indextitle>
<script>
alert("Hello JS");
script>
head>
<body>
body>
html>
2、在 H5 中引入外部 JS
<html>
<head>
<meta charset="utf-8">
<title>indextitle>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js">script>
head>
<body>
body>
html>
四、JS 的基本语法
1、声明变量
使用 var 声明；js 的变量是弱类型，不用声明具体的类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
var i = 10;
i = "hello js";
console.log(i);//在控制台打印
script>
head>
<body>
body>
html>
2、数据类型
在ECMAScript中，变量可以存在两种数据类型，即原始类型与引用类型
2-1、原始类型
- 原始类型，就是一个字面值，是不可变的。如：10 “abc”
- String 在javascript中字符串字符串字面值，可以使用单引号或双引号声明
- Number 在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始
- Boolean 它有两个值true和false
- Undefined:该类型只有一个值undefined.表示的是未初始化的变量
- Null 该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true
2-2、引用类型
- 引用类型通常叫做类(class),也就是说，遇到引用值，所处理的就是对象
2-3、类型的转换
- parseInt：转换成整数
- parsetFloat：转换成浮点数
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
var s = "123";
alert(s + 1);//1231
alert(parseInt(s) + 1);//124
script>
head>
<body>
body>
html>
3、等性运算符
ECMAScript提供了两套等性运算符
3-1、等号"==“与非等号”!="用来处理原始值
- 如果一个运算数是Boolean值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
- 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
- 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
- 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
在比较时，该运算符还遵守下列规则： - 值 null 和 undefined 相等。
- 在检查相等性时，不能把 null 和 undefined 转换成其他值。
- 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等
- 直接判断null,undefined,0,false,""这些值=非真，可以使用这个特性来判断变量为空,除了这些值都是真
3-2、全等号===与非全等号!==
- "全等"只有在无需类型转换运算数就相等的情况下，才返回 true
- "非全等"只有在无需类型转换运算数不相等的情况下，才返回 true。
4、表达式
五、js 常用对象
1、String 字符串对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var str = new String("a-b-cdc-FG");
//alert(str.length);//10
//alert(str.charAt(4));//c
//alert(str.charCodeAt(4));//99
//alert(str.indexOf("c"));//4
//alert(str.lastIndexOf("c"));//6
//var arr = str.split("-");
/* for(var i=0;i
//alert(str.substr(2,3));//b-c
//alert(str.substring(2,3));//b
//alert(str.toUpperCase());
script>
head>
<body>
body>
html>
2、Array 数组对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "
")
arr.splice(2, 1, "William")
document.write(arr + "
")
script>
head>
<body>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var arr = [3, "z", 1, "java", 'js', true, 4];
// alert(arr.splice(3,0, "python", "php")); //删除java
// alert(arr);
//alert(arr.length);//7
// alert(arr.join("-"));//3-7-1-java-js-true-4
// alert(arr.pop());//4
// alert(arr.join("-"));//3-7-1-java-js-true
// alert(arr);//3,7,1,"java",'js',true
// alert(arr.push("R"));
// alert(arr);
//alert(arr.reverse());
//alert(arr.sort());//按照字符串字典顺序进行排序
script>
head>
<body>
body>
html>
3、Date 日期对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var date = new Date();
// alert(date.toString());
// alert(date.toLocaleString());
// alert("year:"+date.getFullYear());//2019
// alert("month:"+date.getMonth());//6
// alert("date:"+date.getDate());//23
// alert("day:"+date.getDay());//5
/*
var time1 = date.getTime();
var time2 = 3*24*60*60*1000;
alert(new Date(time1+time2).toLocaleString());
*/
script>
head>
<body>
body>
html>
4、RegExp 正则表达式对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var email = "[email protected]";
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
alert(reg.test(email));
script>
head>
<body>
body>
html>
六、函数和事件
1、函数的基本写法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
/*
function method () {
alert("xxx")
}
method();
*/
/*
var method = function(){
alert("yyy");
};
method();
*/
/*
function fn(a,b,c){
var sum = a+b+c;
alert(sum);
//arguments是个数组 会将传递的实参进行封装
for(var i=0;i
script>
head>
<body>
body>
html>
2、变量的作用域
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var v3 = "v3 全局变量";//v3作用域属于window,在js中window是全局对象
function f1() {
var v1 = 'f1变量'; //v1作用域属于f1函数
v4 = "v4 全局变量";//因为没有var声明，所以是全局变量
console.log(v1);
console.log(v3);
console.log(v2);//报错
}
function f2() {
var v2 = "f2变量";//v2作用域属于f2函数
console.log(v2);
console.log(v3);
console.log(v4); //不报错，因为v4属于window
console.log(v1);//报错
}
f1(); //调用函数
f2();
script>
head>
<body>
body>
html>
3、封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数
一般定义函数：
<script>
function myalert() {
alert("hello");
}
myalert();
</script>
封闭函数
<script>
(function () {
alert("hello");
})();
</script>
封闭函数的好处
- 封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全
<script>
var num = 23;
function myalert() {
alert("hello");
}
(function () {
var num = 100;
function myalert() {
alert("hello javascript");
}
alert(num);//100
myalert();//hello javascript
})();
alert(num);//23
myalert();//hello
</script>
4、常用的事件
5、阻止默认事件
- 比如在浏览百度文库时，阻止下载
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="background-color: red;" oncontextmenu="fn1(window.event);">divdiv>
<a href="demo11.html" onclick="fn(event)">点击我吧a>
<hr>
<a href="#" onclick="alert('a');">点击我吧a>
<a href="javascript:void(0);" onclick="alert('a');">点击我吧a>
<script>
function fn1(e) {
e.preventDefault(); //阻止浏览器默认事件
alert('a');
}
function fn(e) {
//ie：window.event.returnValue = false;
//w3c：调用e.preventDefault();函数
if (e && e.preventDefault) {
alert('w3c标准浏览器,屏蔽浏览器默认事件'); //标准浏览器阻止默认事件
e.preventDefault();
} else {
alert("ie 浏览器");
window.event.returnValue = false; //ie阻止浏览器事件
}
}
script>
body>
html>
6、阻止事件传播
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div onclick="fn1()" style="width:100px;height:100px;background-color: green;padding: 50px;">
<div onclick="fn2(event)" style="width:100px;height:100px;background-color: red;">xxxxdiv>
div>
<script type="text/javascript">
function fn1() {
alert("fn1");
}
function fn2(e) {
alert("fn2");
//阻止事件的传播
if (e && e.stopPropagation) {
alert("w3c");
e.stopPropagation(); //w3c标准浏览器(谷歌，火狐等)
//IE标签
} else {
alert("ie");
window.event.cancelBubble = true; //IE
}
}
script>
body>
html>
7、常见的全局函数
8、json 对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
var json = {
fn: function () {
alert("a");
}, "name": "梅西", "age": 30, team: {name: "巴塞罗那", contry: "西班牙"}
}; //json
alert(json.name);
alert(json.age);
alert(json.team.contry);
alert(json.team.name);
json.fn();
script>
head>
<body>
body>
html>
9、eval 函数
- 计算 JavaScript 字符串，并把它作为脚本代码来执行
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
var jsonStr = '{fn:function(){ alert("a");}, "name":"梅西", "age": 30, team: {name:"巴塞罗那", contry: "西班牙"}}'; //json
var json = eval("(" + jsonStr + ")"); //把字符串转换成对象
alert(json.name);
alert(json.age);
alert(json.team.contry);
alert(json.team.name);
json.fn();
script>
head>
<body>
body>
html>
10、编码与解码的函数
- 编码：把一些特殊字符转成16进制
- 解码：把16进制的数字，转换成特殊字符
encodeURI()，decodeURI()
<script>
var test1 = "http://www.w3school.com.cn/My first/";
document.write(encodeURI(test1) + "
");
document.write(decodeURI(test1));
</script>
11、isNaN
“is not a number” 的缩写
var a = 'aaa';
window.alert(isNaN(a)); //返回true
浏览器对象模型——BOM
七、window 对象
1、setTimeout
设置超时
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="./jQuery/jquery-3.3.1.min.js">script>
<script src="./javascript/index.js">script>
<script>
var timer;
var fn = function () {
alert("hello,world");
timer = setTimeout(fn, 2000);
};
var closer = function () {
clearTimeout(timer);
};
fn();
script>
head>
<body>
<input type="button" value="按钮" onclick="closer()">
body>
html>
2、setInterval
设置间隔
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="./jQuery/jquery-3.3.1.min.js">script>
<script src="./javascript/index.js">script>
<script>
var timer = setInterval(
function () {
alert("hello javascript");
},
2000
);
var closer = function () {
clearInterval(timer);
};
script>
head>
<body>
<input type="button" value="按钮" onclick="closer()">
body>
html>
页面自动跳转
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="./javascript/index.js">script>
<script>
var timer = 10;
var tid = setInterval(function () {
var o = document.getElementById("second");
timer--;
if (timer == 1) {
clearInterval(tid);
location.href = 'https://www.baidu.com'; //页面跳转
}
o.innerHTML = timer;
}, 1000);
script>
head>
<body>
恭喜您注册成功，<span id="second" style="color: red;">10span>秒后跳转到首页，如果不跳转请<a href="#">点击这里a>
body>
html>
3、History
历史
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<button onclick="location.href ='https://www.baidu.com'">打开button>
<button onclick="history.go(-1)">backbutton>
<button onclick="history.go(1)">forwordbutton>
body>
html>
4、Location
location.href ="..."
location.reload();
文档对象模型——DOM
八、访问节点
1、getElementById
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="./javascript/index.js">script>
<script>
script>
head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="IT精英培训" id="tid">
<input type="button" name="ok" value="保存1"/>
form>
body>
<script type="text/javascript">
var inputNode = document.getElementById("tid");
alert(inputNode.value);
alert(inputNode.type);
script>
html>
2、getElementsByName
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="./javascript/index.js">script>
<script>
script>
head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br>
<input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br>
<input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br>
<input type="button" name="ok" value="保存1"/>
form>
body>
<script type="text/javascript">
//通过元素的name属性获取所有元素的引用
var inputNodes = document.getElementsByName("tname");
//为每个文本框()增加chanage事件,当值改变时,输出改变的值
for (var i = 0; i < inputNodes.length; i++) {
var inputNode = inputNodes[i];
inputNode.onchange = function () {
alert(this.value);
};
}
script>
html>
3、getElementsByTagName
返回带有指定标签名的对象的集合
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="./javascript/index.js">script>
<script>
script>
head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br>
<input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br>
<input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br>
<select name="edu" id="edu">
<option value="博士">博士^^^^^option>
<option value="硕士" selected>硕士^^^^^option>
<option value="本科">本科^^^^^option>
<option value="幼儿园">幼儿园^^^^^option>
select>
<select name="job" id="job">
<option value="美容">美容^^^^^option>
<option value="IT">IT^^^^^option>
<option value="程序员" selected="selected">程序员^^^^^option>
<option value="建筑师">建筑师^^^^^option>
select>
<br/>
<input type="button" id="btn" value="输出select被选中的值"/>
<input type="button" name="ok" value="保存1"/>
form>
body>
<script type="text/javascript">
var a = document.getElementsByTagName("select");
for (var i = 0; i < a.length; i++) {
alert(a[i].value);
}
script>
html>
4、createElement
createElemnt :在文档中创建元素
setAttribute：设置元素的属性
getAttribute：获得属性
appendChild：在元素中添加新元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="./javascript/index.js">script>
<script>
script>
head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" value="beijing">北京li>
<li id="sh" value="shanghai">上海li>
<li id="cq" value="chongqing">重庆li>
ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐li>
<li id="ms" value="moshou">魔兽li>
<li id="xj" value="xingji">星际争霸li>
ul>
<button id="btn">添加button>
<script>
document.getElementById("btn").onclick = function () {
var li = document.createElement("li");
li.setAttribute("id", "tj");
li.setAttribute("value", "tianjin");
//设置Text
li.innerText = "天津";
var city = document.getElementById("city");
city.appendChild(li);
}
script>
body>
html>
5、innerHTML和innerText
innerHTML：设置内容执行HTML解析
innerText：设置的内容不执行HTML解析
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="./javascript/index.js">script>
<script>
script>
head>
<body>
<div id="subject" style="background-color: red;">jquerydiv>
body>
<script language="JavaScript">
// document.getElementById("subject").innerText = "H1标题
";
document.getElementById("subject").innerHTML = "H1标题
";
script>
html>
九、js 面向对象
1、使用 new Object() 产生对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
var car = new Object();
car.name = "劳斯莱斯幻影";
car.color = "雅黑";
car.use = "买菜用";
car.user = "我的";
car.showName = function () {
document.write(this.name);
}
car.showName();
script>
head>
<body>
body>
html>
输出：劳斯莱斯幻影
2、字面量赋值方式创建对象(JSON)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
var car = {
name: "劳斯莱斯幻影",
color: "雅黑",
use: "买菜用",
user: "我的",
showName: function () {
document.write(this.name + "的颜色是：" + this.color + "，我准备" + this.use);
}
}
car.showName();
script>
head>
<body>
body>
html>
3、通过构造函数产生对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var Lemon = new Person("猛哥", "38", "男");
alert(Lemon.name + Lemon.age + Lemon.sex);
script>
head>
<body>
body>
html>
4、js 原型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
function Flower() {
this.showArea = function () {
alert(this.area);
};
}
Flower.prototype.name = "曼陀罗花";
Flower.prototype.genera = "茄科 曼陀罗属";
Flower.prototype.area = "印度、中国北部";
Flower.prototype.uses = "观赏或药用";
Flower.prototype.showName = function () {
alert(this.name);
}
var flower1 = new Flower();
//flower1.showName(); //曼陀罗花
var flower2 = new Flower();
flower2.__proto__.name = '玫瑰花';
flower2.showName(); //玫瑰花
flower1.showName(); //玫瑰花
script>
head>
<body>
body>
html>
执行flower1.showName方法时,首先查找flower1对象中有没有showName方法,如果没有,则去去Flower.prototype中查找showName方法
十、js 继承
1、对象冒充
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
function ClassFuther(name) {
//父类的构造函数
this.name = name;
this.sayName = function () {
alert(this.name);
}
}
//对象冒充
function ClassChild(name, sex) {
this.newMethod = ClassFuther;//函数名指针指向ClassParent;
this.newMethod(name);//调用该方法。
delete this.newMethod;//删除对ClassParent的引用，这样以后就不能再调用它了。
this.sex = sex;
this.saySex = function () {
alert(this.sex);
}
}
var obj = new ClassChild("张三", "男");
obj.saySex();
obj.sayName();
script>
head>
<body>
body>
html>
2、使用 call 方法
call函数:调用函数，同时改变函数中this指针指向的作用域
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
function ClassParent(name) {
this.name = name;
this.sayName = function () {
alert(this.name);
}
}
function ClassChild2(name, sex) {
ClassParent.call(this, name);
this.sex = sex;
this.saySex = function () {
alert(this.sex);
}
}
var obj2 = new ClassChild2("苍井空", "女");
obj2.sayName();
obj2.saySex();
script>
head>
<body>
body>
html>
3、使用 prototype 原型链继承
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script>
function People(name, age) {
this.name = name;
this.age = age;
}
People.prototype = {
getName: function () {
return this.name;
},
getAge: function () {
return this.age;
}
};
function Boy(name, age, shape) {
People.call(this, name, age);
this.shape = shape;
}
Boy.prototype = People.prototype;
Boy.prototype.getShape = function () {
return this.shape;
};
var boy = new Boy('kitty', 6, "fat");
console.log(boy.getName());
console.log(boy.getShape());
script>
head>
<body>
body>
html>
原型链继承原理
十一、js 案例
1、轮播图自动播放
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
var index = 0;
function changeImg() {
//1. 获得要切换图片的那个元素
var img = document.getElementById("img1");
//计算出当前要切换到第几张图片
var curIndex = index % 3 + 1; //0,1,2
img.src = "../img/" + curIndex + ".jpg"; //1,2,3
//每切换完,索引加1
index = index + 1;
}
function init() {
setInterval("changeImg()", 1000);
}
// window.onload = function() {
// init();
// }
script>
head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
body>
html>
2、定时弹出广告
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
function init() {
setTimeout("showAD()", 3000);
}
function showAD() {
//首先要获取要操作的img
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()", 3000);
}
function hideAD() {
//首先要获取要操作的img
var img = document.getElementById("img1");
//隐藏广告
img.style.display = "none";
}
script>
head>
<body onload="init()">
<img id="img1" src="../img/tp.jpg" width="100%" style="display: none;"/>
body>
html>
3、显示和隐藏图片
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
//文档加载顺序
// var img = document.getElementById("img1");
function hideImg() {
var img = document.getElementById("img1");
img.style.display = "none";
}
function showImg() {
var img = document.getElementById("img1");
img.style.display = "block";
}
script>
head>
<body>
<input type="button" value="显示" onclick="showImg()"/>
<input type="button" value="隐藏" onclick="hideImg()"/><br/>
<img src="../img/1-161104143944.gif" id="img1"/>
body>
html>
4、JS 表单校验
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanID, msg) {
//首先要获得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkUsername()
3.函数去显示校验结果
*/
function checkUsername() {
//获取用户输入的内容
var uValue = document.getElementById("username").value;
//对输入的内容进行校验
//获得要显示结果的span
var span = document.getElementById("span_username");
var r = /^\w{6,}$/;
if (!r.test(uValue)) {
//显示校验结果
span.innerHTML = "对不起,太短";
return false;
} else {
span.innerHTML = "恭喜您,可用";
return true;
}
}
/*
密码校验
*/
function checkPassword() {
//获取密码输入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//对密码输入进行校验
if (uPass.length < 6) {
span.innerHTML = "对不起,太短";
return false;
} else {
span.innerHTML = "恭喜您,够用";
return true;
}
}
/*
确认密码校验
* */
function checkRePassword() {
//获取密码输入
var uPass = document.getElementById("password").value;
//获取确认密码输入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//对密码输入进行校验
if (uPass != uRePass) {
span.innerHTML = "对不起,两次密码不一致";
return false;
} else {
span.innerHTML = "";
return true;
}
}
/*
校验邮箱
* */
function checkMail() {
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//对邮箱输入进行校验
if (flag) {
span.innerHTML = "恭喜您,可用";
return true;
} else {
span.innerHTML = "对不起,邮箱格式貌似有问题";
return false;
}
}
function checkForm() {
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
script>
head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')"
onblur="checkUsername()"/><span id="span_username">span><br/>
密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()"
onkeyup="checkPassword()"/><span id="span_password">span><br/>
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')"
onblur="checkRePassword()" onkeyup="checkRePassword()"/><span id="span_repassword">span><br/>
邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()"/><span
id="span_email">span><br/>
手机号:<input type="text" id="text"/><br/>
<input type="submit" value="提交"/>
form>
body>
html>