JavaWeb
使用Java语言开发基于互联网的项目
软件架构
1.C/S————Client/Server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序。
如QQ，迅雷…
优点——用户体验好
缺点——开发，安装，部署，维护 麻烦
2.B/S————Browser/Server 浏览器/服务器
只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序。
优点——开发，安装，部署，维护 简单
缺点——如果应用过大，用户的体验可能会受影响，对硬件要求过高。
B/S架构详解
资源分类
1.静态资源
使用静态资源网页开发技术发布的资源。
特点
- 所有的用户访问，得到的结果是一样的。
- 如——文本，图片，音频，视频，HTML,CSS,JavaScript。
- 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器内置了静态资源的解析引擎，可以展示静态资源。
2.动态资源
使用动态页面及时发布的资源。
特点
- 所有用户访问，得到的结果可能不一样。
- 如——jsp/serclet,php,asp…
- 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
静态资源
1.HTML————用于搭建基础网页
2.CSS—————用于美化网页
3.JavaScript——控制页面的元素，让页面有一些动态的效果
HTML
概念————Hyper Text Markup Language 超文本标记语言（最基础的网页开发语言）。
超文本——超文本使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言——由标签构成的语言。<标签名称> 如html,xml
标记语言不是编程语言。
JavaScript
概念——一门客户端脚本语言。
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎。
- 脚本语言——不需要编译，直接就可以被浏览器解析执行了。
功能
- 可以来增强用户和html页面交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为——C–，后来更名为——ScriptEase。
- 1995年，Netscape(网景)公司，开发了一门客户端脚本语言——LiveSctipt。后来，请来SUM公司的专家，修改LiveSctipt，命名为JavaScript。
- 1996年，微软抄袭JavaScript开发出JScript语言。
- 1997年，ECMA（欧洲计算机制造商协会），ECMASctipt就是所有客户端脚本语言的标准。
- JavaScript=ECMASctipt+JavaScript自己特有的东西（BOM+DOM）。
ECMASctipt——客户端脚本语言的标准
基本语法
1.与html结合方式
①内部JS
定义<script>，标签体内容就是JS代码
②外部JS
定义<script>，通过src属性引入外部的JS文件
注意
①<script>可以定义在html页面任何地方。但是定义的位置会影响执行顺序。
②<script>可以定义多个。
2.注释
①单行注释——//注释内容
②多行注释——/* 注释内容*/
3.数据类型
①原始数据类型（基本数据类型）
- number———数字——整数/小数/NAN（not a number 一个不是数字的数字类型）
- string————字符串——字符串——“abc” “a” ‘abc’
- boolean———true和false
- null—————一个对象为空的占位符
- undefined——未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
②引用数据类型（对象）
4.变量
一小块存储数据的内存空间
Java是强类型语言，而JavaScript是弱理性语言。
①强类型——在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
②弱类型——在开辟变量存储空间时，不定义空间将来存储的数据的数据类型，可以存放任意类型的数据。
语法——var 变量名 = 初始化值；
typeof运算符——获取变量的类型
注意——null运算后得到的是object。
5.运算符
①一元运算符——只有一个运算符的运算符
++，- -，+（正号），-（负号）
注意——在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。
其他类型转number——按照字面值转换。如果自面子不是数字，则转为NAN（不是数字的数字）。
boolean转number——true转为1，false转为0。
②算数运算符
% + - * / …
③赋值运算符
= += -=…
④比较运算符
< > <= >= == ===(全等于)
比较方式
- 类型相同——直接比较（字符串——按照字典顺序比较。按位逐一比较，直到得出大小位置）。
- 类型不同——先进行类型转换，再比较 ===——全等于。在比较之前先判断类型，如果类型不一样，则直接返回false。
⑤逻辑运算符
&&——与（短路）
||——或 （短路）
！——非
其他类型转boolean
number—————0或NAN为假，非0为真
string——————除了空字符串，其他都是true
null&undefined——都是false
对象———————所有对象都是true
⑥三元运算符
？：表达式
语法——表达式 ？值1 值2
判断表达式的值，如果true则取值1，如果是false则取值2。
6.流程控制语句
①if…else
②switch
-
在Java中，switch语句可以接受的数据类型——byte int short char ，枚举（1.5）String（1.7）
-
在JS中，switch语句可以接受任意的原始数据类型
③while
④do…while
⑤for
基本对象
Fuction对象——函数对象
特点
1.创建
①var fun =new Function(形式参数列表，方法体)；
②function 方法名称(形式参数列表）{
方法体
}
③var 方法名(形式参数列表）{
方法体
}
2.方法
3.属性
length——代表形参的个数
4.特点
①方法定义时，形参的类型不用写，返回值类型也不写。
②方法是一个对象，如果定义名称相同的方法，会覆盖。
③在JS中，方法的调用只能与方法的名称有关，和参数列表无关。
④在方法声明中有一个隐藏的内置对象（数组），arguments,粉装所有的实际参数。
⑤调用
方法名称（实际参数列表）；
Array——数组对象
1.创建
①var arr=new Array(元素列表)；
②var arr=new Array(默认长度)；
③var arr=[元素列表]；
2.方法
join（）——将数组中的元素按照执行的分隔符拼接为字符串
push（）——向数组的末尾添加一个或更多的元素，并返回新的长度。
3.属性
length——数组的长度
4.特点
①JS中，数组元素的类型可变的。
②JS中，数组的长度可变的。
Boolean
Date——日期对象
1.创建
var date=new Date；
2.方法
toLocaleString（）——返回当前date对象对应的时间本地字符串格式
getTime（）—————获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。
Math——数学对象
1.创建
Math对象不用创建，直接使用。Math.方法名;
2.方法
random()——返回0~1之间的随机数。含0不含1
ceil()————对数进行上舍入。
floor(x)———对数进行下舍入。
round(x)——把数四舍五入为最接近的整数。
3.属性
PI
Number
String
RegExp——正则表达式对象（定义字符串的组成规则）
①单个字符——[ ]
如[a] [ab] [a-zA-Z0-9]
特殊符号代表特殊含义的单个字符
\d——单个数字字符[0-9]
\w ——单个单词字符[a-zA-Z0-9]
②量词符号
？——出现0次或1次
*——表示出现0次或多次
+——出现1次或多次
{m,n}表示m<=数量<=n
m如果缺省——{ ,n} 最多n次
n如果缺省——{m, } 最少m次
③开始结束符号
^——开始
$——结束
④创建
var reg=new RegExp(“正则表达式”)；
var reg=/正则表达式/；
⑤方法
test（参数）——验证指定的字符串是否符合正则定义的规范。
Global——全局对象（这个Global中封装的方法不需要对象就可以直接调用——方法名（）；）
方法
encodeURI——url编码
decodeURI——url解码
encodeURIComponent——url编码
decodeURIComponent——url解码
paseInt()——将字符串转换为数字
逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转换为number。
isNAN（）——判断一个值是否是NAN
NAN六亲不认，连自己都不认。NAN参与的==比较全部为false。
eval（）——计算JavaScript字符串，并把它作为脚本代码来执行。
DOM（Document Object Model）——文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
W3C DOM标准分为3分不同的部分
- 核心 DOM-针对任何结构化文档的标准模型
Document——文档对象
1.创建（获取）——在html dom模型中可以使用window对象来获取
①window.document
②document
2.方法
①获取Element对象 - getElementById()——根据id属性来获取元素对象。id属性值一般唯一。
- getElementByTagName()——根据元素名称来获取元素对象们。返回值是一个数组。
- getElementByClassName()——根据class属性来获取元素对象们。返回值是一个数组。
- getElementByName()——根据name属性来获取元素对象们。返回值是一个数组。
②创建其他DOM对象
- createAttribute(name)
- createComment(name)
- createElement(name)
- createTextNode(name)
Element——元素对象
1.获取/创建——通过document来获取和创建
2.方法
①removeAttribute()——删除属性
②setAttribute()——设置属性
Attribute——属性对象
Text——文本对象
Comment——注释对象
Node————节点对象，其他5个的父对象
1.特点——所有dom对象都可以被认为是一个节点
2.方法
CRUD dom树
appendChild()——向节点的子节点列表的结尾添加新的子节点。
removeChild()——删除（并返回）当前节点的指定子节点。
replaceChild()——用新节点替换一个子节点。
3.属性
parentNode——返回节点的父节点
- XML DOM-针对XML 文档的标准模型
- HTML DOM-针对HTML 文档的标准模型
案例——动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0); " onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script>
/* 分析
1.添加
* 1.给添加按钮绑定单击事件
* 2.获取文本框的内容
* 3.创建td，设置td的文本为文本框的内容
* 4.创建tr
* 5.将td添加到tr中
* 6.获取table，将tr添加到table中
2.删除
* 1.确定点击的是哪一个超链接
* <a href="javascript:void(0);" onclick="delTr(this);">删除</a>
* 2.怎么删除
* removeChild()*/
//获取按钮
document.getElementById("btn_add").onclick = function () {
//获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//创建td,赋值td的标签体
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的td
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href", "javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);")
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//创建tr
var tr = document.createElement("tr");
//将td添加到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//获取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//删除方法
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
事件的简单学习——某些组件被执行了某些操作后，触发某些代码的执行
如何绑定事件
1.直接在html标签上，指定事件的属性（操作）,属性值就是js代码
事件——OnClick——单击事件
2.通过js获取元素对象，指定事件属性，设置一个函数
常见的事件
1.点击事件
①onclick——单击事件
②ondblclick——双击事件
2.焦点事件
①onblur——失去焦点
②onfoucs——元素获取焦点
3.加载事件
onload——一张页面或一幅图像完整加载
4.鼠标事件
①onmousedown——鼠标按钮被按下
②onmouseup——鼠标按钮被松开
③onmousemove——鼠标被移动
④onmouseover——鼠标移动到某元素上
⑤onmouseout——鼠标从某元素移开
5.键盘事件
①onkeydown——某个键盘按键被按下
②onkeyup——某个键盘按键被松开
③onkeypress——某个键盘按键被按下并松开
6.选择和改变
①onchange——域的内容被改变
②onselect——文本被选中
7.表单事件
①onsubmit——确认按钮被点击
②onreset——重置按钮被点击
案例——表格全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table {
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
margin-top: 10px;
margin-left: 30%;
}
.out {
background-color: white;
}
.over {
background-color: pink;
}
</style>
<script>
//在页面加载完后绑定事件
window.onload = function () {
//给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function () {
//全选
//获取所有的checkbox
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i < cbs.length; i++) {
//设置每一个cb的状态为选中 checked
cbs[i].checked = true;
}
}
document.getElementById("unSelectAll").onclick = function () {
//全不选
//获取所有的checkbox
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i < cbs.length; i++) {
//设置每一个cb的状态为未选中 checked
cbs[i].checked = false;
}
}
document.getElementById("selectRev").onclick = function () {
//反选
//获取所有的checkbox
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i < cbs.length; i++) {
//设置每一个cb的状态为相反
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstCb").onclick = function () {
//反选
//获取所有的checkbox
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i < cbs.length; i++) {
//设置每一个cb的状态和第一个一样
cbs[i].checked = this.checked;
}
}
//给所有的tr绑定鼠标移到元素之上和移除元素之上的事件
var trs = document.getElementsByTagName("tr");
//遍历
for (var i = 0; i < trs.length; i++) {
//移动元素之上
trs[i].onmouseover = function () {
this.className ="over";
}
//移出元素
trs[i].onmouseout = function () {
this.className ="out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
案例——表单检验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left {
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
float: left;
/* border: 1px solid red;*/
}
.rg_right {
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
.error {
color: red;
}
#td_sub {
padding-left: 150px;
}
</style>
<script>
window.onload = function () {
//给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function () {
//调用用户校验方法
return checkUsername() && checkPassword();
}
//给用户名和密码分别绑定离焦事件
document.getElementById("username").onblur = checkUsername();
document.getElementById("password").onblur = checkPassword();
}
//校验用户名
function checkUsername() {
//获取用户名的值
var username = document.getElementById("username").value;
//定义正则表达式
var reg_username = /^\w{6,12}$/;
//判断是否符合正则的规则
var flag = reg_username.test(username);
//提示信息
document.getElementById("s_username")
if (flag) {
//提示绿色对勾
s_username.innerHTML = "<img width='35'height='25' src='img/gou.png'/>"
} else {
//提示红色用户名有误
s_username.innerHTML = "用户名格式有误"
}
return flag;
}
//校验密码
function checkPassword() {
//获取用户名的值
var password = document.getElementById("password").value;
//定义正则表达式
var reg_password = /^\w{6,12}$/;
//判断是否符合正则的规则
var flag = reg_password.test(password);
//提示信息
document.getElementById("s_password")
if (flag) {
//提示绿色对勾
s_password.innerHTML = "<img width='35'height='25' src='img/gou.png'/>"
} else {
//提示红色用户名有误
s_password.innerHTML = "密码格式有误"
}
return flag;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" id="form" method="get">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
HTML DOM
1.标签体的设置和获取——innerHTML
2.使用html元素对象的属性
3.控制样式
案例——电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/*分析
* 1.获取图片对象
* 2.绑定单单击事件
* 3.每次点击切换图片
* 规则
* 如果灯是开的 On,切换图片为 off
* 如果灯是开的 off,切换图片为 On
* 使用标记flag来完成*/
var light = document.getElementById("light");
var flag = false;//代表灯是灭的。off图片
light.onclick = function () {
if (flag) {//判断如果灯是开的，则灭掉
light.src = "img/off.gif"
flag = false;
} else {
//如果灯是灭的，则打开
light.src = "img/on.gif"
flag = true;
}
}
</script>
</body>
</html>
BOM(Browser Object Model)——浏览器对象模型
将浏览器的各个组成部分封装成对象。
组成
- Widow————窗口对象
1.创建
Math对象不用创建，直接使用。Math.方法名;
2.方法
①与弹出框有关的方法
alter——显示带有一段消息以及确认按钮的警告框。
confirm——显示带有一段消息以及确认按钮取消按钮的对话框。
prompt——显示可提示用户输入的对话框。
②与打开关闭有关的方法
close（）——关闭浏览器窗口
open（）——关闭浏览器窗口
③与定时器有关的方法
setTimeout()————在指定的毫秒数后调用函数或计算表达式。
clearTimeout()———取消setTimeout（）方法设置的timeout。
setIntervel()————按照指定的周期（以毫秒计）来调用函数或计算表达式。
cleaIntervel()————取消setIntervel（）方法设置的timeout。
3.属性
①获取其他BOM对象
history
location
navigator
screen
②获取DMO对象
document
4.特点
①Window对象不需要创建可以直接使用。window使用——window.方法名（）；
②window引用可以省略。 方法名（）；
案例——轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id ="img" src="img/banner_1.jpg" width="100%">
<script>
/*
* 分析
* 1.页面上使用img标签展示图片
* 2.定义一个方法，修改图片对象src属性。
* 3.定义一个定时器，每隔3秒调用方法一次。*/
//修改图片src属性
var number=1;
function fun() {
number++;
//判断number是否大于3
if (number>3){
number=1;
}
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
//2.定义定时器
setInterval(fun,3000);
</script>
</body>
</html>
- Navigator———浏览器对象
- Screen————显示屏幕对象
- History————历史记录对象
1.创建
①window.history
②history
2.方法
back（）————加载history列表中的前一个URL。
forward（）——加载history列表中的下一个URL。
go（）————加载history列表中的某个具体页面。
3.属性
length——返回当前窗口历史列表中的URL数量 - Location————地址栏对象
1.创建
①window.location
②location
2.方法
reload（）——重新加载当前文档。刷新
3.属性
href——设置返回完整的URL
案例——自动跳转首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转首页</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<P>
<span id="time">5</span>秒之后，自动跳转到首页…
</P>
</body>
<script>
/*分析
* 1.显示首页效果 <p>
* 2.倒计时读秒效果实现 定时器*/
var second=5;
var time=document.getElementById("time");
function showTime() {
second--;
//判断时间如果<=0,则跳转到首页
if(second<=0) {
//跳转到首页
location.href = "https://www.baidu.com";
}
time.innerHTML=second+"";
}
//设置定时器，1秒执行一次该方法
setInterval(showTime,1000);
</script>
</html>
扫一扫
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
