前端HTML网页之间传递数据多种办法，附代码案例

Posted 2023-03-29 long_songs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端HTML网页之间传递数据多种办法，附代码案例相关的知识，希望对你有一定的参考价值。

先看效果

目前常用的有三种办法

session传递，cookie传递，url传递

url会暴露参数，其余的两个是保存在服务端和浏览器中，不会暴露在地址栏里面

使用url：

下面依次介绍

一.session传递

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML1</title>
</head>
<body>
    <h1>Welcome to HTML1!</h1>
    <form method="post" action="receive.html">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
    <script>
        // 获取表单元素和输入框元素
        const form = document.querySelector('form');
        const input = document.querySelector('#name');
        // 在表单提交时将数据保存到sessionStorage中
        form.addEventListener('submit', (event) => 
            event.preventDefault();
            sessionStorage.setItem('name', input.value);
            form.submit();
        );
    </script>
</body>
</html>

receive.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML2</title>
</head>
<body>
    <h1>Welcome to HTML2!</h1>
    <p>Name: <span id="name"></span></p>
    <script>
        // 获取session中的数据
        const name = sessionStorage.getItem('name');
        // 将数据渲染到页面上
        document.getElementById('name').textContent = name;
    </script>
</body>
</html>

案例说明：

在HTML1中，我们使用form标签将数据提交到HTML2页面，并设置method为post，action为HTML2的文件路径。
在HTML2中，我们使用javascript获取session中的数据，然后将数据渲染到页面上。我们可以使用sessionStorage对象来存储数据，它可以在不同的页面之间共享数据。在这里，我们存储了用户输入的姓名，并在HTML2中获取并渲染了这个数据。

如果传递失败，检查一下以下问题：

HTML1文件中的表单action属性设置错误，导致数据无法传递到HTML2页面。在这里，需要确保HTML1中表单的action属性设置为HTML2的文件路径，如action="html2.html"。
HTML2文件中的JavaScript代码没有正确地从sessionStorage中获取数据。需要确保使用正确的key来获取sessionStorage中的数据。在这里，我们使用的key是name，所以需要确保获取数据的代码中使用的也是这个key，如const name = sessionStorage.getItem('name');。
在本地演示时，需要确保HTML1和HTML2两个文件都在同一个服务器上运行，否则sessionStorage无法正常工作。
如果使用了浏览器的隐身模式，也可能导致sessionStorage无法正常工作。如果以上几个原因都不是问题的话，建议检查浏览器的开发者工具中是否有相关的错误信息或警告信息。

二.cookie传递

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML1</title>
</head>
<body>
    <h1>Welcome to HTML1!</h1>
    <form method="post" action="receive.html">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
    <script>
        // 获取表单元素和输入框元素
        const form = document.querySelector('form');
        const input = document.querySelector('#name');

        // 在表单提交时将数据保存到cookie中
        form.addEventListener('submit', (event) => 
            event.preventDefault();
            document.cookie = `name=$input.value`;
            form.submit();
        );
    </script>
</body>
</html>

receive.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML2</title>
</head>
<body>
    <h1>Welcome to HTML2!</h1>
    <p>Name: <span id="name"></span></p>
    <script>
        // 获取cookie中的数据
        const cookies = document.cookie.split(';');
        let name = '';
        for (let cookie of cookies) 
            cookie = cookie.trim();
            if (cookie.startsWith('name=')) 
                name = cookie.substring(5);
                break;
            
        
        // 将数据渲染到页面上
        document.getElementById('name').textContent = name;
    </script>
</body>
</html>

案例解释：

在HTML1中，我们使用form标签将数据提交到HTML2页面，并设置method为post，action为HTML2的文件路径。
在HTML1中，我们使用JavaScript监听表单的提交事件，在事件处理程序中将数据保存到cookie中，并且在页面跳转之前提交表单。这样，在HTML2中就可以通过cookie获取到数据并渲染了。
在HTML2中，我们使用JavaScript获取cookie中的数据，并渲染到页面上。我们可以使用document.cookie来访问cookie，它返回一个字符串，包含所有cookie的键值对。在这里，我们遍历这个字符串，找到名为name的cookie，并获取它的值。然后将这个值渲染到页面上。

三.url传输

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML1</title>
</head>
<body>
    <h1>Welcome to HTML1!</h1>
    <form method="get" action="receive.html">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
    <script>
        // 获取表单元素和输入框元素
        const form = document.querySelector('form');
        const input = document.querySelector('#name');

        // 在表单提交时将数据拼接到URL中
        form.addEventListener('submit', (event) => 
            event.preventDefault();
            const url = new URL(form.action);
            url.searchParams.set('name', input.value);
            window.location.href = url.toString();
        );
    </script>
</body>
</html>

receive.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML2</title>
</head>
<body>
    <h1>Welcome to HTML2!</h1>
    <p>Name: <span id="name"></span></p>
    <script>
        // 获取URL中的参数
        const params = new URLSearchParams(window.location.search);
        const name = params.get('name');
        // 将数据渲染到页面上
        document.getElementById('name').textContent = name;
    </script>
</body>
</html>

案例解释：

在HTML1中，我们使用form标签将数据提交到HTML2页面，并设置method为get，action为HTML2的文件路径。
在HTML1中，我们使用JavaScript监听表单的提交事件，在事件处理程序中将数据拼接到URL中，并跳转到这个URL。这样，在HTML2中就可以通过URL获取到数据并渲染了。
在HTML2中，我们使用JavaScript获取URL中的参数，并渲染到页面上。我们可以使用URLSearchParams来访问URL中的参数，它提供了一些实用的方法，如get()、set()等。在这里，我们获取名为name的参数，并将它渲染到页面上。

Web前端：JavaScript最强总结附详细代码（带常用案例！）

Web前端基础：

Web前端工具：

Web前端：JavaScript最强总结

基本概念
- 概念
- 作用
- 用法
JavaScript显示数据
JavaScript的注释
JavaScript基本语法
- JavaScript的语句
- JavaScript的数据类型
- JavaScript中的运算符
JavaScript对象
- JavaScript的String对象
- JavaScript的Array对象
- JavaScript的Date对象
- JavaScript的Math对象
JavaScript的函数
- JavaScript的常用全局函数
- JavaScript的自定义函数
- JavaScript的匿名函数
JavaScript变量的作用域
- 局部 JavaScript 变量
- 全局 JavaScript 变量
- 变量的生命周期
JavaScript自定义对象
- 定义对象
- 对象的属性
- 访问对象的属性
- 访问对象的方法
JavaScript Window--浏览器对象模型
- window对象
- window对象属性
- - history对象
  - location对象
- window对象方法
JavaScript之事件
- HTML事件
- 常用的HTML事件
JavaScript之DOM模型
- document对象
- document对象常用方法
- HTML DOM 元素 (节点)
表单验证
- 表单验证意义与场景
- 表单验证常用事件与属性
JavaScript的 RegExp 对象
- 概念
- 语法
- 修饰符
- 正则表达式模式
- 正则表达式的方法test(str)
- 常用的正则表达式校验案例
JavaScript案例
- 全选/全不选
- 动态表格
- 省市级联特效

基本概念

概念

JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
JavaScript 很容易入门

作用

为网页添加各式各样的动态功能,
为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

用法

HTML页面中的JavaScript

在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以，放在最后也可以，对位置要求不严格

我们可以在 HTML 文档中放入不限数量的script标签，通常的做法是把内容统一放入head或者页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容

PS：有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已经是所有现代浏览器以及 HTML5 中的默认脚本语言

<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8" />
		<title>JavaScript的用法</title> 
		<script>
	            alert("hello JavaScript1-1");
	   	</script>
		<script>
	            alert("hello JavaScript1-2");
	    </script>
 	</head>
    <body>
		<script>
            alert("hello JavaScript2-1");
        </script>
		<script>
            alert("hello JavaScript2-2");
        </script>
    </body>
</html>
<script>
    alert("hello JavaScript3-1");
</script>
<script>
    alert("hello JavaScript3-2");
</script>

外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。

当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件:

myScript.js文件 //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可 function fun1()
    alert("hello JavaScript");

.html文件

<!DOCTYPE html>
    <html>
        <head>
            <script src="js/myScript.js"/>
        </head>
        <body>
            <script>
				fun1();//调用脚本中的内容s 
			</script>
        </body>
</html>
外部文件引入一次即可，在head或者body中都可以。

PS:外部脚本不能包含 script 标签。

标签属性中的JavaScript

直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。

<a href="javascript:alert('ok')">登录</a>

JavaScript显示数据

使用window.alert()弹出框
PS:这里的window可以省略，等价于alert(“hello world”);

使用document.write()将内容写入到html文档

使用innerHTML写入到html元素

JavaScript的注释

JavaScript注释与java的单行和多行注释相同。
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。

JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。

JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运行，但是依然推荐大家按照规范去编写代码，语言弱，程序员不能弱。

变量

声明变量的关键字:var
语法:var 变量名称;

var myCompany; //声明变量 
myCompany='开课吧';//赋值 
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式

变量的命名规则

变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感(y 和 Y 是不同的变量) 不能使用关键字保留字

变量的命名规范:

见名知意。例如:breadPirce,userService等，避免无意义的a,b,c等
推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName

JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript中也有分支结构和循环结构，语法与java类似，此处就不再深入讲解。细节上的内容等我们后面使用过的时候再给大家单独指出。

PS:一般一行只写一条语句，每句结尾编写分号结束。

JavaScript的数据类型

值类型(基本类型)

字符串String

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号;

var myCompany; //声明变量 myCompany='开课吧'; //赋值 var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
var gameName="英雄联盟";
var hairstylist='tony'; //PS:注意引号嵌套
var message1='我的发型师是"tony"老师'; 
var message2="我的发型师是'tony'老师";

布尔Boolean

只能有两个值:true 或 false。

var isUnderstand = true;
var isSingle = false;

空Null

var email = null;

未定义Undefined
表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
共有4中情况会出现undefined的值

变量声明且没有赋值

var obj; 
alert(obj);//obj值为undefined

获取对象中不存在的属性时

var obj;
alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of undefined"

函数需要实参，但是调用时没有传值，形参是undefined;
函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined

function printNum(num)
    alert(num);

var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined alert(result);
//result的值也是undefined，因为printNum()没有返回值

引用数据类型

对象(Object)、数组(Array)、函数(Function)，后续章节详细介绍。

JavaScript拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类

var param; // param类型为 undefined 
param = 5; // 现在 param 为数字
param = "John"; // 现在 param 为字符串

PS:虽然JavaScript支持这种写法，但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要 盛放什么类型的值，以后尽量不随意改变。

JavaScript中的运算符

运算符类型	符号
算数运算符	±* /%、++、 –
赋值运算符	:=、 +=、-=、*=、 /=、%=
字符串的连接符	+
逻辑运算符	&&
条件运算符	?:
比较运算符	== 、!=、> 、<、 >=、 <=

比较特殊的运算符：

比较运算	描述
===	绝对等于(值和类型均相等)
!==	不绝对等于(值和类型有一个不相等，或两个都不相等)

var x=5;
var  res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true

JavaScript对象

JavaScript的String对象

String对象属性–长度属性

var str="我喜欢看NBA,最喜欢的球员是\\'小学生\\'库里"; //注意:字符串中出现的\\'是一个字符，转义为一个单引号 
console.log(str); //获取字符串的长度:，切记:所有转移符号的长度都算一个，即\\'长度为1 
console.log("字符串的长度="+str.length);//22

JavaScript的Array对象

Array 对象用于在变量中存储多个值，也就是数组

声明数组

数组的长度 length属性

var nameArr=["宝玉","黛玉","湘云"];
var len=nameArr.length; //获取数组的长度，因为是属所以不是length()

JavaScript的Date对象

创建日期对象

var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

日期对象的常用方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)
getFullYear()	从 Date 对象以四位数字返回年份
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)
setFullYear()	设置 Date 对象中的年份(四位数字)
setHours()	设置 Date 对象中的小时 (0 ~ 23)
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)
setMonth()	设置 Date 对象中月份 (0 ~ 11)

JavaScript的Math对象

Math常用属性

var pi=Math.PI;//返回圆周率

Math常用方法

var num=Math.random();// 返回 0 ~ 1 之间的随机数。 
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。

JavaScript的函数

JavaScript的常用全局函数

JavaScript中有个常用的全局属性NaN,即非数值(Not a Number)，NaN 属性用于引用特殊的非数字值，该属性指定的并不是不合法的数字

isNaN(param)

用于检查其参数是否是非数值字
是数值的返回false，不是数值返回true

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

parseFloat(String)

可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

console.log(parseFloat("66"));//66 
console.log(parseFloat("199.99"));//199.99 
console.log(parseFloat("1024 2048 4096"));//1024 
console.log(parseFloat(" 128 "));//128 
console.log(parseFloat("10年"));//10 
console.log(parseFloat("今天是8号"));//NaN

字符串中只返回第一个数字。
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

parseInt(string,radix)

可解析一个字符串，并返回一个整数

参数	描述
string	必需，要被解析的字符串。
radix	可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数

console.log(parseInt("66"));//66 
console.log(parseInt("199.99"));//199 
console.log(parseInt("1024 2048 4096"));//1024 
console.log(parseInt(" 128 "));//128 
console.log(parseInt("10年"));//10 
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16 

PS:旧浏览器由于使用旧版本的ECMAScript(ECMAScript版本小于ECMAScript 5，当字符串以"0"开 头时默认使用八进制，ECMAScript 5使用的是十进制)，所以在解析("010") 将输出8。

只有字符串中的第一个数字会被返回。
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数。

JavaScript的自定义函数

自定义函数语法
使用function关键字定义函数

function 自定义函数名称(参数列表)
	 //函数体

自定义函数实例
注意:1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.
2、函数的返回取决于函数体中是否有return关键字。

JavaScript的匿名函数

JavaScript变量的作用域

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是变量，所以只能在函数内部访问。

在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。

全局 JavaScript 变量

在函数外声明的变量是变量，网页上的所有脚本和函数都能访问它。

<script>
	var userId = 1001; //全局变量:整个script脚本中都可用,要注意先后顺序
	function printMessage() 
		var userName = "李白";//局部变量:只在当前函数中生效 
		document.write(userId);//使用全局变量的时候，保证使用(方法被调用)之前定义并赋值
		document.write(message);
    printMessage();
</script>
<script>
    function printMessage2() 
		var userName2 = "李白2";
		document.write(userId);//这里也可以使用userId 
		//document.write(userName1);//错误:调用不到printMessage函数中的局部变量 
		document.write(userName2);//正确:可以使用自己函数中的局部变量

</script>

变量的生命周期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

JavaScript自定义对象

对象也是一个变量，但对象可以包含多个值(多个变量)

定义对象

对象中可以有属性，也可以有方法

对象的属性

可以说 “JavaScript 对象是变量的容器”。
但是，我们通常认为 “JavaScript 对象是键值对的容器”。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为对象属性。

访问对象的属性

//访问对象的属性
//方式1:
var n = student.name;
//方式2:
var n2 = student["name"];

访问对象的方法

JavaScript Window–浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

BOM:Browser Object Model，中文浏览器对象模型。

虽然现在BOM尚无正式标准，但是由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性，因此window常被认为是 BOM 的方法和属性。

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。( 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象)。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

Window 对象表示浏览器中打开的窗口。

window对象属性

属性	描述
document	对 Document 对象的只读引用
history	对 History 对象的只读引用
location	用于窗口或框架的 Location 对象
name	设置或返回窗口的名称

history对象

window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。

常用方法:

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go(1/-1)
参数为1:等同于 history.forward()，
参数为-1，等同于 history.back()

<a href="javascript:window.history.forward()">前进</a> 
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前进go</a> 
<a href="javascript:window.history.go(-1)">后退go</a>

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法:

window.location 对象在编写时可不使用 window 这个前缀。
href 当前窗口正在浏览的网页地址
replace(url) 转向到url网页地址
reload() 重新载入当前网址，如同按下刷新按钮

<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a><br />
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />

window对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()	显示可提示用户输入的对话框
open()	设置或返回窗口的名称
close()	打开一个新的浏览器窗口或查找一个已命名的窗口
setTimeout()	关闭浏览器窗口
setInterval()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 timeout
clearTimeout()	取消由 setTimeout() 方法设置的 timeout

打开和关闭浏览器案例

<a href="javascript:window.open('https://www.baidu.com')">打开百度</a> 
<a href="javascript:window.open('index.html')">打开-index</a>
<a href="javascript:window.close()">关闭当前页面</a>

弹框案例

<script>
	//window对象常用的弹框方法
	//1、基本弹框
	window.alert("只有一个确定按钮的对话框"); 
	//2、对话框:有确定和取消两个看你，点击确定返回true，点击取消返回false 
	var res=window.confirm("确认要关闭吗?");
	if(res)
		alert("点击了确定按钮"); 
	else
		alert("点击取消按钮"); 
	
	//3、输入框:prompt(提示信息，默认值) 
	var age=prompt("请输入年龄:",19);
	alert("输入的年龄信息是:"+age);
</script>

定时器案例

<div id="today1"> 
	div--显示时间1
</div>
<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a> 
<div id="today2">
	div--显示时间2 
</div>
<a href="javasc以上是关于前端HTML网页之间传递数据多种办法，附代码案例的主要内容，如果未能解决你的问题，请参考以下文章 
 Web前端：JavaScript最强总结 附详细代码 （带常用案例！）
 Web前端：Bootstrap最强总结 附详细代码 （带常用案例！）
 Web前端：Bootstrap最强总结 附详细代码 （带常用案例！）
 Web前端： JQuery最强总结（每个要点都附带完全案例 详细代码！）
 Web前端： JQuery最强总结（每个要点都附带完全案例 详细代码！）
 HTML小游戏8 —— 小霸王游戏机网页版（附完整源码）

前端HTML网页之间传递数据多种办法，附代码案例

先看效果

一.session传递

index.html

receive.html

案例说明：

二.cookie传递

index.html

receive.html

三.url传输

index.html

receive.html

Web前端：JavaScript最强总结 附详细代码 （带常用案例！）

Web前端：JavaScript最强总结

基本概念

概念

作用

用法

JavaScript显示数据

JavaScript的注释

JavaScript基本语法

JavaScript的语句

JavaScript的数据类型

值类型(基本类型)

引用数据类型

JavaScript拥有动态类型

JavaScript中的运算符

JavaScript对象

JavaScript的String对象

JavaScript的Array对象

JavaScript的Date对象

JavaScript的Math对象

JavaScript的函数

JavaScript的常用全局函数

JavaScript的自定义函数

JavaScript的匿名函数

JavaScript变量的作用域

局部 JavaScript 变量

全局 JavaScript 变量

变量的生命周期

JavaScript自定义对象

定义对象

对象的属性

访问对象的属性

访问对象的方法

JavaScript Window–浏览器对象模型

window对象

window对象属性

history对象

location对象

window对象方法

打开和关闭浏览器案例

弹框案例

定时器案例

Web前端：JavaScript最强总结附详细代码（带常用案例！）