今日内容介绍
使用JS完成简单的数据校验
使用JS完成图片轮播效果
使用JS完成页面定时弹出广告
今日内容学习目标
掌握JavaScript的基本语法(掌握)
掌握JavaScript的对象获取(掌握)
掌握JavaScript标签的基本操作(掌握)
使用JS可以获得指定元素
使用JS可以对指定元素的样式进行操作(获得或修改)
使用JS可以编写定时程序
用户在提交表单时,需要对用户的填写的数据进行校验。本案例只对用户名、密码、确认密码和邮箱进行校验。
JavaScript是web上一种功能强大的编程语言,用于开发交互式的web页面。它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行。
1、 JavaScript 被设计用来向 HTML 页面添加交互行为。
2、 JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
说明:脚本语言就是一种轻量级的编程语言。一般都由相应的脚本引擎来解释执行。例如JavaScript语言就由浏览器引擎来解析和执行。
在计算机上不需要安装其他的软件。而java语言就不是脚本语言,必须在计算机安装jdk之后才可以运行。
脚本语言除了JavaScript 语言,还有PHP,Python等语言。
3、 JavaScript 通常被直接嵌入 HTML 页面。
4、 JavaScript 是一种解释性语言(就是说,代码的执行不进行预编译)。
重点强调一下:JavaScript (js)是弱类型语言。而java属于强类型语言。
例如java中定义变量时会根据不同的数据类型书写不同的数据类型的关键字,而js不管什么类型都只是使用一个关键字var。
JS由3个部分组成
ECMAScript: JS的核心,规定了JS的语法 和 词法。
DOM: Document Object Model 文档对象模型 主要用来跟网页打交道的。可以把整个网页看作为DOM的对象。提供访问和操作网页内容的方法。
BOM: Browser Object Model 浏览器对象模型 主要用来跟浏览器打交道的。提供与浏览器交互的方法。
使用JavaScript添加页面动画效果,提供用户操作体验。主要应用有:嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。
在目前学习阶段,只需要记住如下两个最最最常用的就可以了:
js可以动态的修改html及css的代码,DOM操作。
js可以对表单进行校验。
我们的html文件是专门用来书写html语言的。所以我们的js代码是不能随意的书写在html文件中的。它在html中有它特别的位置。而我们接下来要学习的就是js和html结合的方式。
在一个html页面中引入js的方式有两种:
1、 内部js:也就是在html源码中嵌入js代码
语法格式:
<script type="text/javascript">
这里写你的js代码
</script>
注意:
1、
2、type="text/javascript"可以省略
经验:
一般我们的JS是需要操作DOM元素的也就是页面上的标签,如果JS代码写在页面上面,想通过js代码获取某个标签是拿不到的。因为JS是阻塞式加载语言,就是必须是自上往下加载,有点类似单线程。当浏览器在执行js代码时,不能同时做其它事情,即
所以这种方式引入JS我们的代码一般是写在body标签的下面的 。因为只有整个页面即html中的所有标签加载完成之后才可以使用js代码操作标签。而css属于并行加载语言,所以可以书写在head标签中。
问题:
假设多个页面都要用到同样的js代码的时候,我们可以在每个js页面复制一份。但是当我们需要对js代码进行修改的时候,这个时候需要在每个页面都进行修改,非常麻烦,所以上面这种方法不能提高js的复用性。接下来我们要学习的就是js与html的另一种结合方式,也就是引入外部js文件。
2、 外部js:也就是将js代码单独写成一个js文件(扩展名是 .js而不是 .javascript), 在html代码中引入这个封装好的js文件
语法格式:
<script type="text/javascript" src="xxx.js"></script>
注意:无论是内部js还是外部js在html中引入的位置是随意的,标签中可以引入,标签一样可以引入
经验:
因为JS是阻塞式加载(当加载JS的时候啥事都不能做,只能去加载JS)。如果JS比较多,这样我们的页面就得不到加载,可能会出现白屏现象,所以一般我们引入外部JS文件也都是写到body的下面。
java是强类型的语言,注重类型的定义,所以在java中定义类型方式如下:
整型: int i = 0;
浮点型:double d = 3.14;
字符串:String str = “黑马程序员”;
布尔型:boolean b = true;
而js是弱类型语言,不重视类型的定义,但js会根据为变量赋值的情况自己判断该变量是何种类型,js的变量的定义直接通过var关键字就行。
整型: var i = 0;
浮点型:var d = 3.14;
字符串:var str = “黑马程序员”;
布尔型:var b = true;
所以,在js变量的定义,你就记住一个var就行!
语法格式:
var 变量名 = 变量值;
代码示例:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
//在这里书写js代码
/*
js中的注释和java中的注释是一样的
在js中定义变量使用var关键字
定义格式: var 变量名 = 变量值
*/
// 定义一个变量
var a=100;
/*
* java可以输出到idea的控制台,而js需要浏览器来解析,所以我们想输出某个变量的值
* 必须输出到浏览器的控制台中
* 输出浏览器控制台方式有两种:
* 1.alert(输出信息);页面弹出框
* 2.直接输出到浏览器的控制台中:console.log(输出信息);
* 说明:console表示控制台。log表示日志。
* 但是运行看不到任何效果,必须在浏览器页面中按f12才可以看到。
*/
// alert(a);
console.log(a);
//定义一个字符串变量
// var s="黑马程序员";
/*
* 通过演示,我们发现单引号输出一串字符串也可以,在js中没有字符类型概念。
* 所以单引号和双引号表示的是一个意思。
*/
var s='黑马程序员';
//输出到浏览器中
console.log(s);
script>
body>
html>
说明:
1、
<script type="text/javascript"></script>引入js的方式放在html的页面中任何位置都可以。
2、js中的注释和java中的注释是一样的。
3、java可以输出到idea的控制台,而js需要浏览器来解析,所以我们想输出某个变量的值。必须输出到浏览器的控制台中。
输出浏览器控制台方式有两种:
1)alert(输出信息);页面弹出框
2)直接输出到浏览器的控制台中:console.log(输出信息);
补充:console表示控制台。log表示日志。
但是运行看不到任何效果,必须在浏览器页面中按f12才可以看到。
4、在js中没有字符类型概念,只有字符串类型。所有在JS中字符串的表示使用单引号和双引号都可以。开发中使用单引号相对来说多一些。
实现效果:在浏览器中按f12快捷键。
问题:在js中,由于定义任意的数据类型都使用var关键字。那么怎么去查看某个变量的数据类型呢? 使用关键字: typeof。
使用格式: **typeof 变量名 **
代码示例:
实现效果:
注意:typeof 变量名,返回值都是字符串类型。
跟java一样,js的数据类型也分为基本数据类型(原始数据类型)和引用数据类型(复合数据类型),而JS中一共有6种数据类型,其中5种基本数据类型和1种引用数据类型。
1、 基本数据类型(原始数据类型)
数字类型:number 包含了小数和整数
布尔类型:boolean 只有两个值: true(真)| false(假)
字符串类型:String 包含字符和字符串,既可以使用双引号又可以使用单引号
未定义类型:undefined 只有一个值,即 undefined未定义
空类型:null 只有一个值 null,表示空对象
补充:值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。**alert(null == undefined); 输出 “true”,**尽管这两个值相等,但它们的含义不同。
2、 引用数据类型(复合数据类型)
object : 对象
与java一样,js中的对象都是引用数据类型,所以你也可以使用我们所熟知的new关键字来“创建对象”。
例如:
创建一个上帝对象: var obj = new Object();
创建一个日期对象: var date = new Date();
在js中,JavaScript运算符与Java运算符基本一致。
1、赋值运算符:等号(=), 举例: var x = 5。
2、比较运算符: > < >= <= == != === !==
== 和 === 的区别:
两者都可以用来比较两个变量的值是否相等。
== 先做数据类型的转换,再进行比较。比如可以将整数转换为字符串,或者将字符串转换为整数等。
=== 全等 严格的比较,如果符号两侧的数据类型不一致,则立刻返回false。
代码示例:
实现效果:
!= 和 !== 的区别:
!= 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较.
!== 不会进行类型转换,在比较时除了对值进行比较以外,还比较两边的数据类型,它是恒等运算符===的非形式.
案例代码如下:
3、逻辑运算符: && || !
&& 并且,双与:只有运算符两侧都为true,结果才是true; 一假即假。
|| 或者,双或:只要运算符两侧有一个是true,结果就是true;一真即真。
! 取反: !true = false; !false=true;
需要注意的是,在js中,不光boolean值能够参与逻辑运算。所有的值都能参与逻辑运算.
代码示例:
总结一下JS中6个假的:
数字0, 空字符串‘’或者"", false, 空null, undefined, NaN
NaN: Not a Number 不是一个数字
例如: 1 -‘abc’ -> 表示1减去字符’abc’–》不属于一个数字–》NaN
案例代码:
4、算数运算符: + - * / %
注意: + 号比较特殊 因为除了可以进行算数运算,还可以进行字符串的拼接。这点和java是一样的。
5、三元运算符: 条件表达式1 ? 条件表达式2 : 条件表达式3;
跟java一样,js也存在if、if-else、switch、for、while、do-while等逻辑语句,与java使用方式一致,此处不再一一阐述
在java中,当我们需要多次使用一段代码的功能的时候,我们可以使用方法来封装这段代码。当然,在js中我们也可以使用函数来封装一段js代码。下面一起来学习js中函数。
js的函数是js非常重要的组成部分,js最常用的函数的定义方式有两种,需要注意的是在js中,通过function关键字来定义函数
语法格式:
function 函数名(参数列表) {//形参类型不需要书写,直接书写变量名即可
js逻辑代码
}
函数调用:函数名(实际参数);
一定要加上小括号
js中函数中有一些与我们java中不一样的地方。我们重点学习如下这些不一样的地方。因为下面4点会涉及到我们日常的开发中。
1、 函数需要被调用才能执行。
2、 js中,如果函数需要返回值我们直接return就行了。
定义函数的时候不需要声明返回值的类型,因为js是弱数据类型,返回什么数据类型都是var。
3、 在js中,如果我们需要给函数传递参数,那么我们直接写变量名就行,不需要声明传入变量的类型。
4、 在js中,不存在函数重载的概念,如果2个函数名相同,后面出现的函数会覆盖前面的函数。
上述js函数的注意事项代码示例如下:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
/*
1、函数需要被调用才能执行。
2、js中,如果函数需要返回值我们直接return就行了。
定义函数的时候不需要声明返回值的类型,因为js是弱数据类型,返回什么数据类型都是var。
3、在js中,如果我们需要给函数传递参数,那么我们直接写变量名就行,不需要声明传入变量的类型。
4、在js中,不存在函数重载的概念,如果2个函数名相同,后面出现的函数会覆盖前面的函数。
*/
/*
* 函数定义格式:
* function 函数名(参数列表)
* {}
*/
//定义一个函数
function fn()
{
console.log(12);
}
//1、函数需要被调用才能执行。
fn();
//2、js中,如果函数需要返回值我们直接return就行了。
//定义函数的时候不需要声明返回值的类型,因为js是弱数据类型,返回什么数据类型都是var。
//定义一个函数
function fn1()
{
return 'hello';
}
//调用函数
var result=fn1();
console.log(result);
//3、在js中,如果我们需要给函数传递参数,那么我们直接写变量名就行,不需要声明传入变量的类型。
//定义一个函数
function fn2(a)
{
console.log(a);
}
// fn2(3);
fn2('hello');
//4、在js中,不存在函数重载的概念,如果2个函数名相同,后面出现的函数会覆盖前面的函数。
//定义一个函数
function fn3()
{
console.log('world');
}
function fn3()
{
console.log('js');
}
//调用函数
fn3();//;'js'
script>
body>
html>
实现效果:
下面这些点大家**自行学习,**因为如下的不同之处我们正常开发很少去触及。了解一下就行
1、 如果函数的声明带有参数,但是调用时不带参数,函数也可以正常被调用。
2、 如果函数声明时没有参数列表,调用的时候传入参数,函数也能照样执行。
3、 在JS中,可以使用arguments来获取实际传入的参数。arguments是实参的参数数组。
代码示例:
//5、如果函数的声明带有参数,但是调用时不带参数,函数也可以正常被调用。
//定义带有参数的函数
function fn4(a,b)
{
console.log(a+'函数被执行了'+b);
}
//调用函数
//注意:如果不传递任何数据,参数显示是undefined
fn4();//undefined函数被执行了undefined
var c;
console.log(c);//undefined
//6、如果函数声明时没有参数列表,调用的时候传入参数,函数也能照样执行。
//定义函数
function fn5()
{
console.log('函数被执行了');
}
//调用函数
fn5(14,23);//函数被执行了
//7.在JS中,可以使用arguments来获取实际传入的参数。arguments是实参的参数数组。
//定义函数
function fn6()
{
// console.log(arguments);
//遍历数组
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//调用自定义函数
fn6(12,34);
实现效果:
匿名函数(难,掌握)
匿名函数也就是没有名字的函数
语法格式:
function(参数列表){
js逻辑代码
}
匿名函数没有办法直接调用,一般情况下匿名函数有两种使用场景:
第一种: 将匿名函数赋值给一个变量,使用变量调用函数。
定义函数并赋值给变量:
var fn = function(参数列表) {
js逻辑代码
};
调用函数:fn(实际参数);
上述匿名函数代码演示如下所示:
function fn6()
{
// console.log(arguments);
//遍历数组
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//调用自定义函数
fn6(12,34);
/*
* 匿名函数:格式:
* function(参数列表){
*
* }
* 匿名函数没有名字,不能直接让匿名函数执行,让匿名函数执行,有两种方式:
* 1.将匿名函数赋值给一个变量,然后通过变量名(参数列表)方式调用
*/
//定义一个匿名函数
var fn7=function()
{
console.log('匿名函数被执行了');
}
//执行上述匿名函数
fn7();
//对于函数而言,其实函数名本身指向的就是函数。
//输出上述函数名fn6的名字
console.log(fn6);
匿名函数:
说明:对于函数而言,其实函数名本身指向的就是函数。
第二种: 匿名函数直接作为另一个函数的实际参数传递。
例如:
function xxx( 数字类型参数,字符串类型的参数,函数类型的参数 ) {
// js逻辑代码
}
调用该函数: xxx( 100,”abc”,function(){…} );
上述匿名函数代码演示如下所示:
/*
* 让匿名函数执行方式二:匿名函数作为函数参数
*/
//定义一个函数,第二个参数y接收一个匿名函数
function fn8(x,y)
{
//输出x和y
console.log('x='+x);//x=100
console.log('y='+y);//y=function(){console.log(5);}
//调用匿名函数
y();
}
//调用函数,第二个参数是匿名函数
fn8(100,function(){
console.log(5);
});
实现效果:
想一个问题:如果想要对表单进行校验,那么首先我们必须要获取文本框输入的内容,那么我们怎么能获取文本框的值呢?要想获取文本框中的值,那么必须先获取文本框,那么如何获取文本框元素呢?下面给大家介绍一种获取页面元素的方法,当然获取页面元素的方式很多,明天会给大家重点介绍。
语法格式:
var oEle = document.getElementById(id的名称);
返回一个页面上元素对象
oEle 表示获取的具体的一个标签对象
解释:
document: 文档 我们HTML里面就是指整个网页,属于一个对象。
get Element By Id
获取 一个元素 通过 Id
整句翻译过来就是:在页面上通过Id来获取一个元素。
需求: 获取页面文本框的输入内容。
分析: 当我们获取到页面上的一个input标签之后,那么我们怎么才能获取到文本框里面的内容呢?
不知道大家想起来我们昨天给大家介绍文本框的一个属性value没有,文本框的内容是通过value这个属性来设置的,所以我们要获取文本框的内容就可以通过value这个属性来获取。
案例代码实现如下:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<input type="text" id="txt" value="Hello World" />
<script type="text/javascript">
//获取某个元素 document.getElementById(id的名称);
//获取文本框
var oT=document.getElementById("txt");
//输出oT对象
// console.log(oT);
//通过文本框对象oT调用文本框的属性value获取文本框中的值
console.log(oT.value);
script>
body>
html>
实现效果:
分析:校验用户名、密码、确认密码和Email不能为空,如果为空,表单不能提交,不为空,表单才可以提交。
步骤:
1)使用html完成form表单页面的搭建;
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<form action="#" method="post">
<table>
<tr>
<td>用户名td>
<td><input type="text" name="username" id="username"/>td>
tr>
<tr>
<td>密码td>
<td><input type="password" name="password" id="password"/>td>
tr>
<tr>
<td>确认密码td>
<td><input type="password" name="repassword" id="repassword"/>td>
tr>
<tr>
<td>Emailtd>
<td><input type="text" name="email" id="email" />td>
tr>
<tr>
<td>td>
<td><input type="submit" value="提交"/>td>
tr>
table>
form>
body>
html>
完成的效果:
思考:如果上述页面输入框中什么都不写,当点击提交按钮的时候,页面也会提交,就会跳转到如下页面:
这里使用火狐或者IE浏览器,由于谷歌浏览器页面不会发生我们想要的效果,只是地址栏会发生变化。
火狐:
IE:
我们希望只有在输入框输入数据之后,才可以提交表单中的数据,没有输入数据,则不能够提交表单。那么怎样才能够做到这样的需求呢?
就是没有输入数据,不能够提交表单。
在完成上述功能之前,我们先了解一下一个概念,叫做:
默认行为:系统自带的功能。
如果不想让系统自带功能出现,我们引入阻止默认行为。--------》return false;
举例:比如在页面上,当用户右键的时候,不想出现右键的菜单,可以使用阻止默认行为,即return false来实现。
同样,阻止表单提交的功能,可以使用return false 来阻止默认的行为来阻止表单提交。
需求:右键时阻止页面中出现菜单项。
没阻止之前的效果:
实现的代码:
<script type="text/javascript">
//阻止鼠标右键
document.oncontextmenu = function()
{
//右键时输出一句话
console.log("hello");
//阻止鼠标右键
return false;
};
</script>
补充:开发中阻止右键弹出菜单效果的场景,比如在没有登录百度网站的时候,对于某些文章是不能复制的。这里就阻止了菜单弹出的效果了。
2)使用js完成对表单输入框的校验;
上面我们了解了如何阻止系统默认行为,那么接下来我们开始学习如何阻止表单提交。
在form表单中有一个属性叫做οnsubmit=“return false;” 表示阻止了form表单的提交。
代码如下所示:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<form action="#" method="post" onsubmit="return check();">
<table>
<tr>
<td>用户名td>
<td><input type="text" name="username" id="username"/>td>
tr>
<tr>
<td>密码td>
<td><input type="password" name="password" id="password"/>td>
tr>
<tr>
<td>确认密码td>
<td><input type="password" name="repassword" id="repassword"/>td>
tr>
<tr>
<td>Emailtd>
<td><input type="text" name="email" id="email" />td>
tr>
<tr>
<td>td>
<td><input type="submit" value="提交"/>td>
tr>
table>
<script type="text/javascript">
// //阻止鼠标右键
// document.oncontextmenu = function()
// {
// //右键时输出一句话
// console.log("hello");
// //阻止鼠标右键
// return false;
// };
//阻止表单提交,表单提交时执行check()函数
function check()
{
//1.验证用户名是否为空
//获取用户名
var username=document.getElementById('username').value;
//判断用户名非空
if(username == '')
{
alert('用户名不能为空');
return false;
}
//2.验证密码是否为空
//获取密码
var password=document.getElementById('password').value;
//判断密码非空
if(password == '')
{
alert('密码不能为空');
return false;
}
//3.验证确认密码是否为空
//获取确认密码
var repassword=document.getElementById('repassword').value;
//判断确认密码非空
if(repassword != password)
{
alert('两次输入的密码不一致');
return false;
}
//4.验证Email是否为空
//获取Email
var email=document.getElementById('email').value;
//判断邮箱非空
if(email == '')
{
alert('邮箱不能为空');
return false;
}
}
script>
form>
body>
html>
第一天完成首页中,“轮播图”只提供一张图片进行显示。现需要编写程序,完成自动切换图片功能。
说明:我们第一天使用的是黑马旅游网站,这里我们使用的是黑马办公网站。两个网站整体结构几乎一模一样。
思想就是时间过几秒,切换下图片,即改变下引入图片的地址。循环可以重复改变引入图片的地址,但是使用循环时间不好控制。所以在js中提供一个新的API,
叫做定时器setInterval。
补充:引入图片地址:<img src="img/1.jpg" width="100%"/>。
语法结构:
var timer = window.setInterval(code, millisec) 按照指定的周期(间隔)来执行函数或代码片段。
参数1: code 必须写。 执行的函数名或执行的代码字符串。
参数2: millisec 必须写。时间间隔,单位:毫秒。
window可以理解为浏览器窗口。后面会讲解。
timer 返回值:一个可以传递给 window.clearInterval(定时器的返回值) 从而取消对 code 的周期性执行的值。
在关闭定时器时需要使用定时器的返回值作为参数,否则不知道关闭哪个定时器。
例如:
方式:函数名 , setInterval(show, 100); √ show 表示函数名,100表示每隔100豪秒执行这个函数。
注意:调用函数时window.可以省略。
window.setInterval() 等效 setInterval()。
需求:开启一个定时器,每隔1秒钟输出一次 hello world。
代码示例:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
/*
* 需求:开启一个定时器,每隔1秒钟输出一次 hello world。
分析:
window.setInterval(code,millsec);
参数:
code 表示代码片段,一般都是一个函数
millsec : 表示时间段,每隔millsec时间执行code
注意:这里的window.可以省略
*/
//开启一个定时器
/*
* 在使用函数时何时加小括号?
* 如果函数是自己使用的,那么就必须加小括号。
* 如果函数不是自己使用,那么就不用加小括号。
* 比如下面在使用fn函数时就不是自己使用,那么就不用加小括号。
原因:因为只要函数名写小括号,例如fn(),那么就会立刻调用,这样setInterval()函数有可能就调用不了了
*/
//匿名函数
/*window.setInterval(function() {
console.log("hello world");
}, 1000);*/
// window.setInterval(fn,1000);//注意,如果这里不使用匿名函数,这里使用自定义函数时不要加()
//window.setInterval(fn,1000) 表示开启定时器
var timer = window.setInterval(fn,1000);//注意,如果这里不使用匿名函数,这里使用自定义函数时不要加()
//可以将函数抽取出来
function fn(){
console.log("hello world");//这里的hello world是等1s之后才执行的
//关闭定时器 书写在函数内部
//window.clearInterval(timer);
}
/*
* 关闭定时器,根据定时器的名字来关闭
* 在这里关闭定时器是不可以的,因为程序是顺序执行,并且执行很快,同时由于定时器是在过1s后才输出 hello world
* 还没有执行定时器要执行的函数,就已经将定时器给关闭了。
* 所以为了关闭定时器有效果,可以将这句话放到fn函数体中
*/
// window.clearInterval(timer);
script>
body>
html>
说明:
1)在使用函数时何时加小括号?
如果函数是自己使用的,那么就必须加小括号。例如之前的用法,定义好函数,直接通过函数名调用,单独让函数执行。
如果函数不是自己使用,那么就不用加小括号。比如上面在使用fn函数时就不是自己使用,那么就不用加小括号。
原因:因为只要函数名写小括号,例如fn(),那么就会立刻调用,这样setInterval()函数有可能就调用不了了
上述使用定时器的地方:window.setInterval(fn,1000); 这里的fn函数是在等1s之后才执行的。
定时器关闭,具体看开发中的需求需不需要关闭。
关闭定时器,根据定时器的名字来关闭.关闭定时器的代码:window.clearInterval(timer); 要书写在函数fn里面。因为程序是顺序执行,并且执行很快,同时由于定时器是在过1s后才输出 hello world 。这样就会导致还没有执行定时器要执行的函数,就已经将定时器给关闭了。所以为了关闭定时器有效果,可以将这句话放到fn函数体中。
实现效果:
有的同学想在head标签里面去写JS代码,但是想要在head标签里面写,就必须等整个页面加载完成,不然是获取不到图片标签的,因为程序是自上往下加载,所以给大家介绍一个事件,当页面加载完成的时候,我们在事件后面的函数(事件函数)里面来获取元素。
window.onload = function() {
// 页面加载完成的时候会执行这个函数
};
1、 为页面设置加载事件onload
2、 给轮播图的图片设置一个id
3、 根据id来获取到轮播图的图片
4、 开启定时器,2000毫秒重新设置图片的src属性
关于window.οnlοad=function(){};的代码解释:
需求:获取文本框输入的值并输出到浏览器中。
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
//需求:获取文本框输入的值并输出到浏览器中
/*
* 由于页面是从上往下加载,所以在执行:
* var value=document.getElementById('txt').value;
* 代码时,还没有加载到下面的input标签,所以会报错:
* Uncaught TypeError: Cannot read property 'value' of null
* 所以我们一般建议书写js的代码写在页面下面。
* 如果想写在这里,可以通过window.onload来实现,他表示在整个页面加载完毕之后在执行这里面的代码
*/
// var value=document.getElementById('txt').value;
// console.log(value);
window.onload = function()
{
var value=document.getElementById('txt').value;
console.log(value);
};
script>
head>
<body>
<input type="text" id="txt" value="哈哈" />
body>
html>
注意:由于页面是从上往下加载,所以在执行:
var value=document.getElementById(‘txt’).value;
代码时,还没有加载到下面的input标签,所以会报错:Uncaught TypeError: Cannot read property ‘value’ of null
所以我们一般建议书写js的代码写在页面下面。
如果想写在这里,可以通过window.onload来实现,他表示在整个页面加载完毕之后在执行这里面的代码
第一步:在当前项目下新建一个 轮播图案例演示 的文件夹,然后将课前资料中img文件夹中的所有图片拷贝到轮播图案例演示 的文件夹下
第二步:然后新建一个主页index.html。
第三步:
将下面的代码复制到新建的页面index.html中。
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<table cellspacing="0" width="100%" cellpadding="0">
<tr>
<td>
<table width="100%">
<tr>
<td> <img src="img/logo2.png" />td>
<td><img src="img/header.jpg" />td>
<td align="center">
<a href="javascript:;">登录a>
<a href="javascript:;">注册a>
<a href="javascript:;">购物车a>
td>
tr>
table>
td>
tr>
<tr>
<td>
<table width="100%" bgcolor="black" height="50">
<tr>
<td>
<a href="javascript:;">
<font color="white" size="5">首页font>
a>
<a href="javascript:;">
<font color="white">手机数码font>
a>
<a href="javascript:;">
<font color="white">电脑办公font>
a>
<a href="javascript:;">
<font color="white">电脑办公font>
a>
<a href="javascript:;">
<font color="white">电脑办公font>
a>
td>
<td align="right">
<input type="text" placeholder="Search" />
<input type="button" value="Submit" />
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="img/1.jpg" width="100%" />
td>
tr>
<tr>
<td>
<table width="100%">
<tr>
<td colspan="7">
<h3>热门商品 <img src="img/title2.jpg"/>h3>
td>
tr>
<tr align="center">
<td rowspan="2">
<img src="img/big01.jpg" width="205" height="404" />
td>
<td colspan="3">
<img src="img/middle01.jpg" />
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
tr>
<tr align="center">
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="img/ad.jpg" width="100%" />
td>
tr>
<tr>
<td>
<table width="100%">
<tr>
<td colspan="7">
<h3>热门商品 <img src="img/title2.jpg"/>h3>
td>
tr>
<tr align="center">
<td rowspan="2">
<img src="img/big01.jpg" width="205" height="404" />
td>
<td colspan="3">
<img src="img/middle01.jpg" />
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
tr>
<tr align="center">
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="img/footer.jpg" width="100%" />
td>
tr>
<tr>
<td align="center">
<a href="javascript:;">关于我们 a>
<a href="javascript:;">联系我们 a>
<a href="javascript:;">招贤纳士 a>
<a href="javascript:;">法律声明a>
<a href="javascript:;">友情链接 a>
<a href="javascript:;">支付方式 a>
<a href="javascript:;">配送方式 a>
<a href="javascript:;">服务声明 a>
<a href="javascript:;"> 广告声明 a>
<p>Copyright © 2005-2016 传智商城 版权所有p>
td>
tr>
table>
td>
tr>
table>
body>
html>
第四步:
运行查看下效果:
第五步:开始实现轮播图:
实现轮播图的HTML代码:
说明:由于我们想通过js修改img标签中的src属性值,所以必须得先获取img标签,然后在获取img标签中的src属性,这样才能够修改src的属性值。
如果想获取img标签,我们必须给img标签添加一个id属性。id=“idImg”。
实现轮播图的JS代码:
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
//1.给页面添加一个在页面加载完成之后执行的事件
window.onload=function()
{
//2.获取轮播图的img标签
var img=document.getElementById("idImg");
//设置定时器在2s后改变图片
window.setInterval(changeImg,2000);
/*
* 定义一个变量作为更改图片的名字
* 由于页面一加载就执行代码:
* 当页面都加载完成之后在执行这里的js代码,所以定义n=1
*/
var n=1;
//自定义函数改变img地址
function changeImg()
{
/*
* 轮播图片初始化的地址:是img/1.jpg,过2s之后换成img/2.jpg,再过2s换成img/3.jpg
* 再过2s换成img/1.jpg,再过2s换成img/2.jpg。。。。。
*
*/
//更改n
n++;
//判断n的大小,如果n=4,继续更改n=1
if(n==4)
{
n=1;
}
img.src="img/"+n+".jpg";
}
};
script>
head>
在平日浏览网页时,页面一打开可能会在几秒后显示广告,然后过几秒再隐藏广告。效果如下图所示:
setTimeout() 在指定的毫秒数后调用函数或执行代码片段。和setInterval()不同的是setTimeout()只是执行一次,而setInterval()每隔指定的时间就会执行,
如果不停止计时器就会一直执行代码片段。
语法结构:
window.setTimeout(code,millisec)
参数:
code 必需。要调用的函数。
millisec 必需。在执行代码前需等待的毫秒数。
说明:setInterval() 以指定周期执行函数或代码片段。(上一个案例已经讲解)
代码示例:
需求:开启一个定时器 1秒之后输出Hello world,并且只输出一次。
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
/*
* 需求:开启一个定时器 1秒之后输出Hello world,并且只输出一次。
* setTimeout(code,millsec) 在一定时间只执行一次
*/
//使用setInterval()定时器执行
// var timer=window.setInterval(function(){
// console.log("Hello World");
// window.clearInterval(timer);
// },1000);
//使用setTimeout完成
var timer = window.setTimeout(function(){
console.log("Hello World");
},1000);
script>
body>
html>
实现效果:
获取或设置样式:
想完成弹出广告案例,除了使用上述介绍的定时器,还必须知道如何获取样式的获取和修改。
语法格式:
obj.style.样式名 获得指定“样式”的值。样式名包括标签的宽、高、背景颜色等。
obj.style.样式名= 样式值 给指定“样式”设置样式。
注意:如果属性有多个单词使用“-”连接,样式名书写的时候需要将“-”删除,并将后一个单词首字母大写。
例如:background-color 需要改成 backgroundColor
需求:设置页面上某一个div,然后将div的高度设置为原来的div高度的2倍。
div起始高度和宽度是100px,背景颜色是红色。
代码示例:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="div" style="width: 100px;height: 100px;background-color: red;">
我是div
div>
<script type="text/javascript">
//获取div
var div = document.getElementById("div");
//获取div的高度
//div.style.height 获取样式: "100px"
// console.log(div.style.height);
/*
* 由于我们希望将原来的div高度进行增加2倍,而这里获取的是
* 字符串"100px"所以我们必须将这里的字符串变为数字100,这样才可以增加2倍
*/
var height = window.parseInt(div.style.height);//这里获取的就是数字100
// console.log(height);
//将高度翻倍在赋值给高度,注意,这里必须加上单位"px"
div.style.height = height*2+"px";
//更改背景颜色
// div.style.backgroundColor="green";
script>
body>
html>
实现效果:
补充:
将一个字符串转换成一个数字使用:
window.praseInt(字符串);
window.parseFloat(字符串);
例如:
window.parseInt('12abc'); 12
window.parseInt('12.5abc'); 12
window.parseInt('abc'); NaN 非数字
window.parseFloat('12abc'); 12
window.parseFloat('12.5abc'); 12.5
window.parseFloat('abc'); NaN 非数字
页面加载成功后触发onload()事件
加载成功后,触发延迟定时器,3秒后,开始显示广告。
显示广告开始后,3秒后再次隐藏广告
步骤:
第一步:新建 一个页面index.html.
第二步:将以下的html代码复制到index.html页面中:
<table cellspacing="0" width="100%" cellpadding="0">
<tr>
<td>
<table width="100%">
<tr>
<td> <img src="img/logo2.png" />td>
<td><img src="img/header.jpg" />td>
<td align="center">
<a href="javascript:;">登录a>
<a href="javascript:;">注册a>
<a href="javascript:;">购物车a>
td>
tr>
table>
td>
tr>
<tr>
<td>
<table width="100%" bgcolor="black" height="50">
<tr>
<td>
<a href="javascript:;">
<font color="white" size="5">首页font>
a>
<a href="javascript:;">
<font color="white">手机数码font>
a>
<a href="javascript:;">
<font color="white">电脑办公font>
a>
<a href="javascript:;">
<font color="white">电脑办公font>
a>
<a href="javascript:;">
<font color="white">电脑办公font>
a>
td>
<td align="right">
<input type="text" placeholder="Search" />
<input type="button" value="Submit" />
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="img/1.jpg" width="100%" id="idImg" />
td>
tr>
<tr>
<td>
<table width="100%">
<tr>
<td colspan="7">
<h3>热门商品 <img src="img/title2.jpg"/>h3>
td>
tr>
<tr align="center">
<td rowspan="2">
<img src="img/big01.jpg" width="205" height="404" />
td>
<td colspan="3">
<img src="img/middle01.jpg" />
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
tr>
<tr align="center">
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="img/ad.jpg" width="100%" />
td>
tr>
<tr>
<td>
<table width="100%">
<tr>
<td colspan="7">
<h3>热门商品 <img src="img/title2.jpg"/>h3>
td>
tr>
<tr align="center">
<td rowspan="2">
<img src="img/big01.jpg" width="205" height="404" />
td>
<td colspan="3">
<img src="img/middle01.jpg" />
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
tr>
<tr align="center">
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
<td>
<img src="img/small03.jpg" /><br />
<a href="javascript:;">
<font color="black">冬瓜font>
a><br />
<font color="red">¥299.00font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="img/footer.jpg" width="100%" />
td>
tr>
<tr>
<td align="center">
<a href="javascript:;">关于我们 a>
<a href="javascript:;">联系我们 a>
<a href="javascript:;">招贤纳士 a>
<a href="javascript:;">法律声明a>
<a href="javascript:;">友情链接 a>
<a href="javascript:;">支付方式 a>
<a href="javascript:;">配送方式 a>
<a href="javascript:;">服务声明 a>
<a href="javascript:;"> 广告声明 a>
<p>Copyright © 2005-2016 传智商城 版权所有p>
td>
tr>
table>
td>
tr>
table>
广告图片在页面中的效果:
第三步:给广告图片的img标签添加id属性。这样使用js就可以获取该img标签了。
并且让页面在最开始加载页面的时候隐藏广告图片,设置style=“display: none;” 即可。
第四步:书写js代码,页面加载完之后过3s钟,弹出广告,再过3s让广告消失。
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
window.onload = function() {
// 获取广告的标签
var adImg = document.getElementById("adImg");
//开启定时器,3s后弹出广告
window.setTimeout(function() {
//让广告显示就是设置display:block
adImg.style.display = "block";
//广告显示完成之后,在消失
window.setTimeout(function() {
//让广告消失,设置display:none
adImg.style.display = "none";
}, 3000);
}, 3000);
};
script>
head>
注意:定时器可以嵌套使用
BOM对象:Browser Object Model 浏览器对象模型。把整个浏览器当做一个对象来处理。
一个浏览器对象中又包含了其他的对象。我们重点介绍3个对象Window 、History、 Location 。
说明:
Window对象:表示浏览器整个窗口。就是上述空白的地方,不包括工具栏和地址栏。
History对象:表示浏览器中的向后和向前的左右箭头。
Location对象:表示浏览器中的地址栏。
补充:
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。就是都可以使用window对象来调用,例如上述history和location对象都可以使用window对象来调用。
举例:window.history 、 window.location
1、方法:定时器
函数名 | 描述 |
---|---|
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
clearInterval() | 取消由 setInterval() 设置的定时器。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
2、方法:消息框
大家都用支付宝付过款,当我们付款的时候,支付宝经常会弹出一个框,询问我们是否确认付款。这样一个弹窗非常有必要,这样防止我们用户的误操作。或者删除某个数据的时候,为了防止误删的时候,都会弹出一个提示框,询问是否确认删除该数据。
1)提示框:alert(提示信息);
2)确认框:confirm(提示信息);
方法返回值:
确定返回true
取消返回false
3)输入框:prompt(提示信息, 默认值);
方法返回值:
点击确定:输入框的内容
点击取消:null
上述提示框的代码演示案例:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
/*
* 确认框:confirm(提示信息)
* 返回值:
* true:点击了确认按钮
* false:点击了取消按钮
*/
/*var result = window.confirm("确认要删除这条数据吗?");
if(result)
{
// window.alert('确认删除');可以省略window
alert('确认删除');
}else{
alert('取消删除');
}*/
/*
* 输入框:prompt("提示信息","默认值");
* 点击确定:返回值是输入框中输入的内容
* 点击取消:返回值是null
*/
var result2 = window.prompt("请输入姓名","张三");
console.log(result2);
script>
body>
html>
实现效果:
输入框:
Location表示的是当前浏览器的地址栏对象。
例如URL: http://127.0.0.1:8020/day03/定时弹广告/05.location.html?__hbt=150384448335#abc
属性 | 对应的值 |
---|---|
hash: | #abc |
host: | 127.0.0.1:8020 |
hostname: | 127.0.0.1 |
href: | http://127.0.0.1:8020/day03/定时弹广告/05.location.html?__hbt=1503844483351#abc |
pathname: | /day03/定时弹广告/05.location.html |
port: | 8020 |
protocol: | http: |
search: | ?__hbt=1503844483351 |
需求:设置location的href值来实现窗口的跳转。
就是在页面加载的时候直接访问http://www.baidu.com
代码示例:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
/*
* 需求:设置location的href值来实现窗口的跳转。
* 就是在页面加载的时候直接访问http://www.baidu.com
*/
window.location.href="http://www.baidu.com";
// alert(window.location.href);
script>
body>
html>
window.history用来访问浏览器历史浏览记录。
前提:必须有浏览记录.
说明:
对于go()函数既可以后退又可以前进。但是必须给参数。
举例:
go(1) 前进一步 go(2) 前进2步。。。。。
go(-1) 后退一步 go(-2) 后退2步。。。。
需求:如下图所示,必须有浏览记录。需要创建3个页面。
注意:可以先访问a.html,然后是b.html,最后在访问c.html。
a页面:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="toPageB();">→button><br />
<a href="b.html">去b页面a>
<script type="text/javascript">
//点击按钮跳转到b页面 前进
function toPageB(){
// window.history.forward();
window.history.go(1);
}
script>
body>
html>
说明:当点击button按钮的时候会触发button按钮的onclick事件。在onclick事件中可以绑定js函数。
b页面:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="toPageA();">←button>
<button onclick="toPageC();">→button><br />
<a href="c.html">去c页面a>
<script type="text/javascript">
//后退
function toPageA()
{
// window.history.back();
window.history.go(-1);
}
//前进
function toPageC()
{
// window.history.forward();
window.history.go(1);
}
script>
body>
html>
c页面:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="toPageB();">←button>
<script type="text/javascript">
//后退
function toPageB()
{
// window.history.back();
// window.history.go(-1);
//从c页面直接跳转到a页面
window.history.go(-2);
}
script>
body>
html>
|
需求:设置location的href值来实现窗口的跳转。
就是在页面加载的时候直接访问http://www.baidu.com
代码示例:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
/*
* 需求:设置location的href值来实现窗口的跳转。
* 就是在页面加载的时候直接访问http://www.baidu.com
*/
window.location.href="http://www.baidu.com";
// alert(window.location.href);
script>
body>
html>
window.history用来访问浏览器历史浏览记录。
前提:必须有浏览记录.
[外链图片转存中…(img-o8FGpeKL-1562498685510)]
[外链图片转存中…(img-bqAKZ9nG-1562498685510)]
说明:
对于go()函数既可以后退又可以前进。但是必须给参数。
举例:
go(1) 前进一步 go(2) 前进2步。。。。。
go(-1) 后退一步 go(-2) 后退2步。。。。
需求:如下图所示,必须有浏览记录。需要创建3个页面。
注意:可以先访问a.html,然后是b.html,最后在访问c.html。
[外链图片转存中…(img-l9ZkufMm-1562498685510)]
a页面:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="toPageB();">→button><br />
<a href="b.html">去b页面a>
<script type="text/javascript">
//点击按钮跳转到b页面 前进
function toPageB(){
// window.history.forward();
window.history.go(1);
}
script>
body>
html>
说明:当点击button按钮的时候会触发button按钮的onclick事件。在onclick事件中可以绑定js函数。
b页面:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="toPageA();">←button>
<button onclick="toPageC();">→button><br />
<a href="c.html">去c页面a>
<script type="text/javascript">
//后退
function toPageA()
{
// window.history.back();
window.history.go(-1);
}
//前进
function toPageC()
{
// window.history.forward();
window.history.go(1);
}
script>
body>
html>
c页面:
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<button onclick="toPageB();">←button>
<script type="text/javascript">
//后退
function toPageB()
{
// window.history.back();
// window.history.go(-1);
//从c页面直接跳转到a页面
window.history.go(-2);
}
script>
body>
html>
[外链图片转存中…(img-LsmB6oYN-1562498685510)]