第3期：12306页面制作

最新推荐文章于 2023-02-27 23:47:50 发布

竹清兰香

最新推荐文章于 2023-02-27 23:47:50 发布

阅读量2.5k

点赞数 7

分类专栏：笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_53312629/article/details/113704440

版权

笔记同时被 2 个专栏收录

58 篇文章 11 订阅

订阅专栏

完整

13 篇文章 0 订阅

订阅专栏

12306页面制作

第1期：手把手教你制作网易邮箱注册页面
第2期：网页动画制作（CSS+JS）
第3期：12306页面制作

文章目录

12306页面制作
前言
一、基础知识
二、制作步骤
总结

前言

第三期了，也是这个系列的最后一期了，下面就让我们来看一下这次制作12306首页要实现的效果：

首页中的轮播图：要求可以定时自动切换，也可以点击下方小圆点手动切换，轮播图需要原生javascript实现。
返回顶部功能：当页面向下滑动到一定距离，右下角会出现“返回顶部”的按钮，要求实现点击”返回顶部“的按钮可以平滑滚动到页面顶部的功能。返回顶部功能需要原生javascript实现。
首页表单：要求尽量按照原网页中的样式绘制，达到设计美观，其中选择地点和日期以及查询只需完成绘制，无需实现功能。

在这里插入图片描述

信用信息栏无需绘制。

在这里插入图片描述

页面排版需要与原网页大致相同，其余动画效果不做硬性要求，总体以提高舒适的用户体验为原则。

以下是本篇文章正文内容。

一、基础知识

1.JS基础语法

操作符之间的优先级（高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

2.JS数组

①创建数组：

var myarray=new Array();
var myarray= new Array(8); //创建数组，存储8个数据。
注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

②数组赋值：

下面创建一个数组，用于存储5个人的数学成绩。
var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
myarray[2]=90; //存储第3个人的成绩
myarray[3]=77; //存储第4个人的成绩
myarray[4]=59; //存储第5个人的成绩
注意： 数组每个值有一个索引号，从0开始。
我们还可以用简单的方法创建上面的数组和赋值：
第一种方法：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意： 数组存储的数据可以是任何类型（数字、字符、布尔值等）

③数组属性length：

myarray.length; //获得数组myarray的长度
注意： 因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。
同时，JavaScript数组的length属性是可变的，这一点需要特别注意。
arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10
数组随元素的增加，长度也会改变，如下:
var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34; //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16

④二维数组：

1. 二维数组的定义方法一

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }

2. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
说明: myarr[0][1] ,0 表示表的行，1表示表的列。

3.JS函数

parseInt() 函数——可解析一个字符串，并返回一个整数;
语法
parseInt(string, radix);

参数	描述
string	必需。要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

parseFloat() 函数——可解析一个字符串，并返回一个浮点数;
语法
parseFloat(string);

参数	描述
string	必需。要被解析的字符串。

JavaScript 全局函数

获取元素的值设置和获取方法为：
例：
赋值： document.getElementById(“id”）.value = 1；
取值： var = document.getElementById(“id”）.value；

4.JS事件

什么是事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
主要事件表:

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚集
onblur	光标离开
onload	网页导入
onunload	关闭网页

①onclick

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

②onmouseover

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

③onmouseout

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

④onfocus

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

⑤onblur

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

⑥onselect

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

⑦onchange

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

⑧onload

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：
1.加载页面时，触发onload事件，事件写在标签内。
2.此节的加载页面，可理解为打开一个新页面时。例如，当加载一个新页面时，弹出对话框“加载中，请稍等…”。

⑨onunload

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
注意：不同浏览器对onunload事件支持不同。
如,当退出页面时，弹出对话框“您确定离开该网页吗？”。

5. JS内置对象

①什么是对象

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

对象的属性： 反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法： 能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；

JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：
var objectName =new Array();//使用new关键字定义对象
或者
var objectName =[];

访问对象属性的语法:
objectName.propertyName
访问对象的方法：
objectName.methodName()

②Date 日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。

定义一个时间对象 :
var Udate=new Date();

注意: 使用关键字new，Date()的首字母必须大写。
使 Udate 成为日期对象，并且已有初始值： 当前时间(当前电脑系统时间)。

如果要自定义初始值，可以用以下方法：

var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date(‘Oct 1, 2012’); //2012年10月1日

我们最好使用下面介绍的“方法”来严格定义时间。

访问方法语法： “<日期对象>.<方法>”

Date对象中处理时间和日期的常用方法：

方法名称	功能描述
get/setDate()	返回/设置日期
get/setFullYear()	返回/设置年份用四位数表示
get/setYear()	返回/设置年份
get/setMonth()	返回/设置月份 0：一月…11：十二月
get/setHours()	返回/设置小时 24小时制
get/setMinutes()	返回/设置分钟数
get/setSeconds()	返回/设置秒钟数
get/setTime()	返回/设置时间 (毫秒为单位)

③String 字符串对象

定义字符串的方法就是直接赋值。

访问字符串对象的属性length:
stringObject.length; 返回该字符串的长度。

var mystr="Hello World!";
var myl=mystr.length;

以上代码执行后，myl 的值将是：12

访问字符串对象的方法：

● toUpperCase()方法

● toLowerCase()方法

使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：

var mystr="Hello world!";
var mynum=mystr.toUpperCase();

以上代码执行后，mynum 的值是：HELLO WORLD!
相应地，toLowerCase() 可以将大写字母转化为小写字母

● charAt() 方法

charAt() 方法——可返回指定位置的字符。返回的字符是长度为 1 的字符串。

语法:
stringObject.charAt(index)

参数说明：

参数	描述
index	必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

注意：

字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。

注意： 一个空格也算一个字符。

● indexOf() 方法

indexOf() 方法——可返回某个指定的字符串值在字符串中首次出现的位置。

语法
stringObject.indexOf(substring, startpos)

参数说明：

参数	描述
substring	必需。规定需检索的字符串值。
startpos	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。

说明：

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

注意：

indexOf() 方法区分大小写。
如果要检索的字符串值没有出现，则该方法返回 -1。

● split() 方法

split() 方法——将字符串分割为字符串数组，并返回此数组。

语法：
stringObject.split(separator,limit)

参数说明:

参数	描述
separator	可选。字符串或正则表达式，从该参数指定的地方分割 string Object。
limit	可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

注意： 如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

● substring()方法

substring() 方法——用于提取字符串中介于两个指定下标之间的字符。

语法:
stringObject.substring(startPos,stopPos)

参数说明:

参数	描述
startPos	必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。
stopPos	可选。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

注意：

返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

● substr() 方法

substr() 方法——从字符串中提取从 startPos位置开始的指定数目的字符串。

语法:
stringObject.substr(startPos,length)

参数说明:

参数	描述
startPos	必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
length	可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

注意：

如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果startPos为负数且绝对值大于字符串长度，startPos为0。

④Math对象

Math对象，提供对数据的数学计算。
使用 Math 的属性和方法，代码如下：

<script type="text/javascript">
  var mypi=Math.PI; 
  var myabs=Math.abs(-15);
  document.write(mypi);
  document.write(myabs);
</script>

运行结果:
3.141592653589793
15

注意： Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。

Math 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

● ceil() 方法

ceil() 方法——可对一个数进行向上取整。

语法:
Math.ceil(x)

参数说明:

参数	描述
x	必需。必须是一个数值。

注意： 它返回的是大于或等于x，并且与x最接近的整数

● floor() 方法

floor() 方法——可对一个数进行向下取整。

语法:
Math.floor(x)

参数说明：

参数	描述
x	必需。必须是一个数值。

注意： 返回的是小于或等于x，并且与 x 最接近的整数。

● round() 方法

round() 方法可把一个数字四舍五入为最接近的整数。

语法:
Math.round(x)

参数说明：

参数	描述
x	必需。必须是一个数值。

注意：

返回与 x 最接近的整数。
对于 0.5，该方法将进行上舍入。(5.5 将舍入为 6)
如果 x 与两侧整数同等接近，则结果接近 +∞方向的数字值。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6)

● random() 方法

random() 方法——可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。

语法：
Math.random();

注意：

返回一个大于或等于 0 但小于 1 的符号为正的数字值。
因为是随机数，所以每次运行结果不一样，但是0 ~ 1的数值。

⑤Array 数组对象

数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的

数组定义的方法：

1. 定义了一个空数组:
var 数组名= new Array();
2. 定义时指定有n个空元素的数组：
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var 数组名 = [<元素1>, <元素2>, <元素3>…];

我们定义myArray数组，并赋值，代码如下：
var myArray = [2, 8, 6];
说明：定义了一个数组 myArray，里边的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

数组元素使用：
数组名[下标] = 值;

注意: 数组的下标用方括号括起来，从0开始。

数组属性：

length 用法：
<数组对象>.length；
返回： 数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。

数组方法

● concat() 方法

concat() 方法——用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

语法
arrayObject.concat(array1,array2,…,arrayN)

参数说明：

参数	说明
array1	要连接的第1个数组
…	…
arrayN	要连接的第N个数组

注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

● join()方法

join()方法——用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

语法：
arrayObject.join(分隔符)

参数说明:

参数	说明
separator	可选。指定要使用的分隔符。如果省略此参数，则使用逗号做分隔符。

注意： 返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。

● reverse() 方法

reverse() 方法——于颠倒数组中元素的顺序。

语法：

arrayObject.reverse()

注意： 该方法会改变原来的数组，而不会创建新的数组。

● slice() 方法

slice() 方法——可从已有的数组中返回选定的元素。

语法
arrayObject.slice(start,end)

参数说明：

参数	描述
start	必须。要抽取的片断的起始下标，第一个字符位置为 0。如果为负数，则从尾部开始截取。-1为最后一个元素
end	可选。紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
该方法并不会修改数组，而是返回一个子数组。

注意：

可使用负值从数组的尾部选取元素。
如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
String.slice() 与 Array.slice() 相似。

● sort()方法

sort()方法——使数组中的元素按照一定的顺序排列。

语法:
arrayObject.sort(方法函数)

参数说明：

参数	描述
方法函数	可选。规定排序顺序。必须是函数。

如果不指定<方法函数>，则按unicode码顺序排列。
如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

1. 使用sort()将数组进行排序，代码如下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

运行结果：
Hello,JavaScript,John,love
1,100,16,50,6,80

注意: 上面的代码没有按照数值的大小对数字进行排序。

2.如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

运行结果：
80,16,50,6,100,1
1,6,16,50,80,100

6.浏览器对象

window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
atob()	解码一个 base-64 编码的字符串。
btoa()	创建一个 base-64 编码的字符串。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
getSelection()	返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()	获取指定元素的 CSS 样式。
matchMedia()	该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scroll()	已废弃。该方法已经使用了 scrollTo() 方法来替代。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
stop()	停止页面载入。

注意: 在网页动画制作（CSS+JS）中，已讲解了部分属性，window对象重点讲解计时器。

①JavaScript 计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器方法：

方法	说明
setTimeout()	指定时间
clearTimeout()	清除延时设定
setInterval()	每隔时间执行代码
clearInterval()	清除延时设定

● setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:
setInterval(代码,交互时间);

参数说明：

代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):
setInterval(“clock()”,1000)
或
setInterval(clock,1000)

● clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：
clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
// 每隔100毫秒调用clock函数，并将返回值赋值给i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

● setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:
setTimeout(代码,延迟时间);

参数说明：

要调用的函数或要执行的代码串。
延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

● clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:
clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

②History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法：
window.history.[属性|方法]

注意： window可以省略。

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

使用length属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

● back()方法

返回前一个浏览的页面

back()方法——加载 history 列表中的前一个 URL。

语法：
window.history.back();

比如，返回前一个浏览的页面，代码如下：
window.history.back();
注意： 等同于点击浏览器的倒退按钮。

back()相当于go(-1),代码如下:
window.history.go(-1);

● forward()方法

返回下一个浏览的页面

forward()方法——加载 history 列表中的下一个 URL。

语法：
window.history.forward();

如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:
window.history.forward();
注意： 等价点击前进按钮。

forward()相当于go(1),代码如下:
window.history.go(1);

● go()方法

返回浏览历史中的其他页面

go()方法——根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：
window.history.go(number);

参数：

number	参数说明
1	前一个，go(1)等价forward()
0	当前页面
-1	后一个，go(-1)等价back()
其它数值	要访问的URL在History的URL列表中的相对位置

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：
window.history.go(-2);

注意： 和在浏览器中单击两次后退按钮操作一样。

同理，返回当前页面之后浏览过的第三个历史页面，代码如下：
window.history.go(3);

③Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:
location.[属性|方法]

location对象属性图示:
在这里插入图片描述

location 对象属性：

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

Location 对象方法：

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

④Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性:

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

查看浏览器的名称和版本，代码如下:

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

● userAgent

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

语法
navigator.userAgent

使用userAgent判断使用的是什么浏览器,代码如下:

function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome")>-1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
}

⑤screen对象

screen对象用于获取用户的屏幕信息。

语法：
window.screen.属性

对象属性:

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度

● 屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。

screen.height 返回屏幕分辨率的高
screen.width 返回屏幕分辨率的宽

注意:

单位以像素计。
window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽，代码如下:

<script type="text/javascript">
  document.write( "屏幕宽度："+screen.width+"px<br />" );
  document.write( "屏幕高度："+screen.height+"px<br />" );
</script>

● 屏幕可用高和宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

注意:

不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度，代码如下：

<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

注意: 根据屏幕的不同显示值不同。

7.DOM对象，控制HTML元素

HTML DOM 的属性和方法：

①getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：
document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

1.  因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

②getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:
document.getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

③区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。

把上面的例子转换到HTML中，如下:

<input type=“checkbox” name=“hobby” id=“hobby1”> 音乐

input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。

方法总结如下:

方法	说明	获得
getElementById	通过指定id获得元素	一个
getElementsByName	通过元素名称name获得元素	一组
getElementsByTagName	通过标签名称获得元素	一组

注意： 方法区分大小写

通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:

  <input type="checkbox" name="hobby" id="hobby1">  音乐
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步
  <input type="button" value = "全选" id="button1"> 
  <input type="button" value = "全不选" id="button1">

document.getElementsByTagName(“input”)，结果为获取所有标签为input的元素，共8个。
document.getElementsByName(“hobby”)，结果为获取属性name="hobby"的元素，共6个。
document.getElementById(“hobby6”)，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。

④getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：
elementNode.getAttribute(name)

说明:

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字

⑤ setAttribute()方法

增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：
elementNode.setAttribute(name,value)

说明：

name: 要设置的属性名。
value: 要设置的属性值。

注意：

把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

● 节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

二、nodeValue 属性: 节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。

以下常用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

①访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

语法：
elementNode.childNodes

注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

②访问子节点的第一和最后项

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

语法：
node.firstChild

说明：与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

语法：
node.lastChild

③访问父节点parentNode

获取指定节点的父节点

语法：
elementNode.parentNode

注意:父节点只能有一个。

访问祖节点:
elementNode.parentNode.parentNode

④访问兄弟节点

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：
nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：
nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。

⑤ 插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:
appendChild(newnode)

参数:
newnode：指定追加的节点。

⑥插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:
insertBefore(newnode,node);

参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。

⑦ 删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:
nodeObject.removeChild(node)

参数:
node ：必需，指定需要删除的节点。

⑧替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：
node.replaceChild (newnode,oldnew )

参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

⑨创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：
document.createElement(tagName)

参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

⑩ 创建文本节点createTextNode

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

语法：
document.createTextNode(data)

参数：
data : 字符串值，可规定此节点的文本。

●浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

•  window.innerHeight - 浏览器窗口的内部高度
•  window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

•  document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
•  document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者
Document对象的body属性对应HTML文档的标签

•  document.body.clientHeight
•  document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
  || document.body.clientWidth;
var h= document.documentElement.clientHeight
  || document.body.clientHeight;

① 网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意: 区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

② 网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

③ 网页卷去的距离与偏移量

在这里插入图片描述

scrollLeft: 设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。

scrollTop: 设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft: 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop: 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

注意:

区分大小写
offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

以上部分内容源自JavaScript进阶篇、W3school在线教程以及菜鸟教程。

二、制作步骤

1.建立框架

观察原网站特点，划分好区域，建立基本的分区框架
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>中国铁路12306</title>
        <link href="index03.css" rel="stylesheet" type="text/css">
        <link href="function03.js" rel="stylesheet" type="text/javascript">
    </head>
    <body>
        <div class="head1">

        </div>
        <div class="box1">
            
        </div>
        <div class="box2">
            
        </div>
        <div class="box3">
            
        </div>
        <div class="box4">
            
        </div>
        <div class="box5">
            
        </div>
        <div class="footer">
            
        </div>
    </body>
</html>

2.丰富内容

向框架中加入基本的元素
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>中国铁路12306</title>
        <link href="index03.css" rel="stylesheet" type="text/css">
        <!--<link href="function03.js" rel="stylesheet" type="text/javascript">-->
                        
           
    </head>
    <body>
        <div class="head1">
            <div class="wrapper"><img id="logo1"src="image/logo01.png" style="width:200px; height:50px">
                <div class="head_right">
                    <div class="search"><input id = "search_input" placeholder="搜索车票/餐饮/常旅客/相关规章"  type="text" style="width:450px; height:25px">
                        <img id="search_img" src="image/search.png"style="width:30px; height:30px">
                </div>
                <ul class="header-menu">
                    <li class="menu-item menu-nav">
                        <a  class="menu-nav-hd">English
                            <img class="arrow"src="image/arrow.png">
                        </a>
                    </li>
                    <li class="menu-line">|</li>
                    <li class="menu-item menu-nav">
                        <a class="menu-nav-hd">我的12306
                            <img class="arrow"src="image/arrow.png">
                        </a>
                    </li>
                    <li class="menu-line">|</li>
                    <li>
                        <a class="text1">登录&nbsp;</a><a class="text1">注册</a>
                    </li>
                </ul></div>
            </div>
        </div>
        <div class="head2">
            <ul class="list02">
                <li class="tou"id="haha">首页</li>
                <li class="tou">车票 v</li>
                <li class="tou">团购服务 v</li>
                <li class="tou">会员服务 v</li>
                <li class="tou">站车服务 v</li>
                <li class="tou">商旅服务 v</li>
                <li class="tou">出行指南 v</li>
                <li class="tou">信息查询 v</li>
            </ul>
        </div>
        <div class="box1">
            <div class = "lunbo">
                <ul id ="list03" style="left: 0px;">
                    <li class="tu"><img  id="img6" src="image/lunbo/banner06.jpg"></li>
                    <li class="tu"><img  id="img5" src="image/lunbo/banner05.jpg"></li>
                    <li class="tu"><img  id="img4" src="image/lunbo/banner04.jpg"></li>
                    <li class="tu"><img  id="img3" src="image/lunbo/banner03.jpg"></li>
                    <li class="tu"><img  id="img2" src="image/lunbo/banner02.jpg"></li>
                    <li class="tu"><img  id="img1" src="image/lunbo/banner01.jpg"></li>
                </ul>
                <div class="buttons">
                    <ul class="buttonss">
                        <li id="bbb1"index="1" class="on" οnclick="change(1)">1</li>
                        <li id="bbb2"index="2" class="" οnclick="change(2)">2</li>
                        <li id="bbb3"index="3" class="" οnclick="change(3)">3</li>
                        <li id="bbb4"index="4" class="" οnclick="change(4)">4</li>
                        <li id="bbb5"index="5" class="" οnclick="change(5)">5</li>
                        <li id="bbb6"index="6" class="" οnclick="change(6)">6</li></ul>
                </div>
            </div>
            <div class="searchbox">
                <div class="searchleft">
                    <ul class="b1">
                        <li><img src="image/b1.png"style="width:100px; height:116px"></li>
                        <li><img src="image/b2.png"style="width:100px; height:116px"></li>
                        <li><img src="image/b3.png"style="width:100px; height:116px"></li>
                    </ul>
                </div>
                <div class="searchright">
                    <ul class="b2">
                        <li><img src="image/c1.png"style="width:90px; height:32px"></li>
                        <li><img src="image/c2.png"style="width:90px; height:32px"></li>
                        <li><img src="image/c3.png"style="width:90px; height:32px"></li>
                        <li><img src="image/c4.png"style="width:90px; height:32px"></li>
                    </ul>
                    <ul class="b3">
                        <li class="cl"><span class="c33">出发地</span><input class="ci"placeholder="简拼/全拼/汉字"  type="text" style="width:265px; height:30px"><img class="im1"src="image/c41.png"style="width:30px;height:30px"></li><br>
                        <li class="cl"><span class="c33">到达地</span><input class="ci1"placeholder="简拼/全拼/汉字"  type="text" style="width:265px; height:30px"><img class="im2"src="image/c41.png"style="width:30px;height:30px"></li><br>
                        <li class="cl"><span class="c33">出发日期</span><input class="ci2"placeholder="2021-03-01"  type="text" style="width:265px; height:30px"><img class="im3"src="image/c42.png"style="width:30px;height:30px"></li>
                    </ul>
                    <div class="c4">
                    <label style="color:#0f0f0f">学生</label><i></i>
                    <label style="color:#201e1e">高铁/动车</label><i></i></div>
                    <input type="submit" value="查询" name="submit" class="buttom3"  />
                </div>
            </div>   
        </div>
        <div class="box2">
            <div class="wrapper" id="part2">
                <ul >
                    <li class="img2"><img src="image/001.png"style="width:169px; height:130px"></li>
                    <li class="img2"><img src="image/002.png"style="width:169px; height:130px"></li>
                    <li class="img2"><img src="image/003.png"style="width:169px; height:130px"></li>
                    <li class="img2"><img src="image/004.png"style="width:169px; height:130px"></li>
                    <li class="img2"><img src="image/005.png"style="width:169px; height:130px"></li>
                    <li class="img2"><img src="image/006.png"style="width:169px; height:130px"></li>
                    <li class="img2"><img src="image/007.png"style="width:169px; height:130px"></li>

                </ul>
            </div>
            <div class="wrapper" id="part3">
                <ul>
                    <li class="img3"><img src="image/01.jpg"style="width:590px; height:160px"></li>
                    <li class="img3"><img src="image/02.jpg"style="width:590px; height:160px"></li>
                    <li class="img3"><img src="image/03.jpg"style="width:590px; height:160px"class="sha"></li>
                    <li class="img3"><img src="image/04.jpg"style="width:590px; height:160px"class="sha"></li>
                </ul>
            </div>
        </div>
        <div class="box3">
            <div class="section">
                <ul>
                    <li >铁路旅游</li>
                    <li class="more"style="color:grey">更多&gt;</li>
                </ul>
            </div>
            <div><img src="image/travel.png" style="width:1190px; height:508px" class="img4"></div>
        </div>
        <div class="box4">            
            <div class="head3">
                <ul class="lists">
                    <li class="first">最新发布</li>
                    <li class="second">常见问题</li>
                    <li class="second">信用信息</li>
                </ul>
            </div>
            <div class="minibox">
                <div class="news-index">
                    <ul class="news1">
                        <li class="news-tit" >公 告<span class="news-time">2021-02-25</span></li>
                        <li class="news-tit" >关于延长12306网站部分业务办理时间的公告<span class="news-time">2021-01-01</span></li>
                        <li class="news-tit" >公 告<span class="news-time">2020-05-28</span></li>
                        <li class="news-tit" >中国铁路广州局集团有限公司关于2021年3月11日至3月16日期间增<span class="news-time">2021-03-03</span></li>
                        <li class="news-tit" >中国铁路上海局集团有限公司关于2021年3月3日-2021年4月6日增<span class="news-time">2021-03-02</span></li>
                    </ul>
                    <ul class="news2">
                        <li class="news-tit" >关于铁路部门调整预售期及退票费率规则的公告<span class="news-time">2021-01-13</span></li>
                        <li class="news-tit" >候补购票操作说明<span class="news-time">2021-02-25</span></li>
                        <li class="news-tit" >关于调整互联网、电话订票起售时间的公告<span class="news-time">2021-02-19</span></li>
                        <li class="news-tit" >中国铁路广州局集团有限公司关于2021年3月5日至3月8日期间增<span class="news-time">2021-03-02</span></li>
                        <li class="news-tit" >青藏集团公司关于加开临时旅客列车的公告<span class="news-time">2021-03-02</span></li>
                    </ul>
                    <div class="news-more">
                        <a >更多&gt;</a><!--&gt;-->
                    </div>
                </div>
            </div>
        </div>
        <div class="box5">
            <img src="image/end.png" style="width: 1200px;height: 200px;">
        </div>
        <div class="footer">
            <p>
                <span class="end1">版权所有©2008-2020</span>
                <span class="end1">中国铁道科学研究院集团有限公司</span>
            </p>
            <p>
                <span class="end">京ICP备05020493号-4</span>
                <span class="end">|</span>
                <span class="end">ICP证：京B2-20202537</span>
            </p>
        </div>
        <div class="return">
            <img src="image/return.png" onclick="scrollWindow()">
        </div>
    </body>
</html>

3.修改样式(CSS)

外部建立一个css文件
代码如下：

/***/
ul{
    list-style: none;
    display: inline;
}
body{
    /*background-color: black;*/
}
/*head1*/
.head1{
    display: inline;
}
.wrapper{
    width: 1200px;
    padding: 0 5px;
    margin-left: auto;
    margin-right: auto;
}
.head_right{
    float: right;
    margin: 24px 0 0 0;
    width: 890px;
    height: 40px;
}
#logo1{
    display: inline;
    position: relative;
    margin: 15px 0 0 0;
}
.search{
    margin: 0px 0 5px 100px;
    display: inline;
}
.header-menu{
    position: relative;
    left:80px;
}
#search_img{
    position: relative;
    left:-32px;
    top:6px;
}
.menu-nav-hd{
    font-size: 13px;
    color: #3B99FC;
}
.menu-line{
    color:#95b8fa;
}
.text1{
    font-size: 13px;
}
#search_input{
    display: inline;
    position: relative;
    left:2px;
    top:-5px;
}
li{
    display: inline;
}
/*head2*/
.head2{
    position: relative;
    top:20px;
    width:100%;
    height:40px;
    background-color: #579aff;
    text-align: center;
}
.list02{
    cursor: pointer;
    position: relative;
    left:-12px;
}
.tou{
    height: 40px;
    padding: 0 40px 0 40px;
    position: relative;
    top:8px;
    color:white;
}
#haha{
    background-color: #3887ff;
}
/*box1*/
.lunbo{
    width: 100%;
    height: 450px;
    /*overflow: hidden;/*划重点qwq*/
    display:block;
    position: relative;
    top:21px;
}
#list03{
    display: inline;
    z-index: -1;
    position: relative;
    left:-1500px;
    transition: 1s;
}
.tu{
    position: absolute;/*划重点qwq*/
    display:inline;
}
#img1{
    position: relative;
    left: 0px;
}
#img2{
    position: relative;
    left: 1200px;
}
#img3{
    position: relative;
    left: 2400px;
}
#img4{
    position: relative;
    left: 3600px;
}
#img5{
    position: relative;
    left: 4800px;
}
#img6{
    position: relative;
    left: 6000px;
}
.buttons{
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
}
.buttons li{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 100px;
    background: #f8f8f8;
    margin: 0 6px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    opacity: .6;/*透明*/
}
.buttons .on{
    width: 12px;
    height: 12px;
    line-height: 100px;
    background: #ff9090;
    margin: 0 6px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: rgb(255, 135, 135);
}
.searchbox{
    height: 360px;
    width: 560px;
    position: relative;
    left: 250px;
    top:-400px;
    background-color: white;
}
.b1{
    float: left;
    width: 100px;
    height: 100%;
    display:block;
    /*background: #3B99FC;*/
    height: 116px;
    position: relative;
    left:-40px;
    top:-15px;
}
.b2{
    width: 400px;
    height: 32px;
    display: inline;
    position: relative;
    left: -40px;
    top:20px;
}
.b3{
    float: left;
    width: 360px;
    height: 223px;
    position: relative;
    top:20px;
    font-size: 16px;
}
.c33{
    float:right;
    position: relative;
    left: -330px;
    top:10px;
}
.cl{
    position: relative;
    padding-top: 12px;

}
.ci{
    float: right;
}
.ci1{
    float: right;
    position: relative;
    top:5px;
}
.ci2{
    position: relative;
    top:10px;
    right:-40px;
}
.c4{
    position: relative;
    left: 120px;
    top:-24px;
    height: 32px;
    width: 360px;
    text-align: center;
}
.c4 i{
    margin-right: 0;
    margin-left: 10px;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: top;
    margin-top: 7px;
    margin-right: 10px;
    background-image: url(./image/check.png);
}
.im1{
    position: relative;
    left:280px;
    top:5px;
}
.im2{
    position: relative;
    left:280px;
    top:10px;
}
.im3{
    position: relative;
    left:280px;
    top:-25px;
}
.buttom3{
    height: 30px;
    line-height: 20px;
    padding: 4px 10px;
    border: 1px solid #DEDEDE;
    background: #ff8201;
    color: #fff;
    border-color: #ff8201;
    display: block;
    width: 320px;
    border-radius: 6px;
    font-size: 14px;
}
label{
    float: left;
    width: 75px;
    padding-right: 10px;
    text-align: right;
    }
/*box2*/
#part2{
    text-align: center;
    height:136px;
    width: 100%;
    position: relative;
    top:30px;
}
.img2{
    display: inline;
}
.sha{
    position: relative;
    left:20px; 
    top:20px;   
}
#part3{
    width: 100%;
    position: relative;
    top:30px;
    float:left;
    display: inline;
    text-align: center;

}
/*box3*/
.section{
    float: left;
    position: relative;
    top:50px;
    left:150px;
    font-size: 16px;
    line-height: 38px;
    height: 38px;
    width: 80%;
    color: #3B99FC;
    padding: 0 4px;
    display: inline;
}
.more{
    float: right;
}
.img4{
    margin: 50px 0 0 180px;
}
/*box4*/
.head3{
    margin-top: 40px;
    margin-bottom: 55px;
}
.lists{
    display:inline-block;
    width: 1200px;
    height: 40px;
    line-height: 40px; 
    font-size: 16px;
    text-align: center;
    position: relative;
    left:150px;
}
.first{
    background-color: rgb(63, 151, 252);
    color:white;
    height: 40px;
    width: 390px;
    float: left;
}
.second{
    height: 40px;
    width: 390px;
    float: left;
    background-color: rgb(235, 235, 235);
}
.minibox{
    width: 1170px;
    height: 260px;
    position: relative;
    left:190px;
    top:-70px;
    border: 1px solid grey;
    background-color: white;
}
.news-time{
    float:right;
    font-size: 3px;
    color: grey;
}
.news1{
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    display: inline;
    position: relative;
    left:20px;
    top:30px;
}
.news1 li{
    float: left;
    width: 544px;
    margin-right: 60px;
    height: 36px;
    line-height: 36px;
}
.news2{
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    display: inline;
    position: relative;
    left:600px;
    top:-150px;
}
.news2 li{
    float: left;
    width: 544px;
    margin-right: 60px;
    height: 36px;
    line-height: 36px;
}
.news-more{
    position: relative; 
    color: grey;
    float: right;
    top:-90px;
}
/*box5*/
.box5{
    text-align: center;
    background-color: #f8f8f8;
}
.head4{
    float: left;
}
/*footer*/

.footer{
    text-align: center;
    width: 100%;
    position:relative;
    padding: 10px 0;
    background: #666;
    color: #c1c1c1;
}
.end{
 position: relative;
/* left:-120px;*/
}
.end1{
    position: relative;
    /*left:-300px;*/
}
.return{
    position: fixed;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
    transition:2s;
}
/*--*/
.box2,.box3,.box4,.box5,.footer{
    position: relative;
    top:-360px;
}

4.添加动态效果(JS)

外部建立一个js文件
代码如下：

<script>
            /*轮播*/
            var index =1;
            function play(){
                setInterval(animate,3000);
            }
            function animate(){
                if (index != 7){
                    index += 1;
                }
                if(index==7){
                    index = 1;
                }
                change(index);
            }
            function change(now){
                index = now;
                button(index);
                var sum = (-1349)*(now-1);
                document.getElementById("list03").style.left = sum + "px";
            }
            function button(num){
                for(var i = 1;i<=6;i++){
                    if(document.getElementById("bbb"+ i).className == "on"){
                        document.getElementById("bbb"+ i).className = "";
                    break;
                    }
                }document.getElementById("bbb"+ num).className = "on";
            }
            window.onload =function(){
                play();
            }
            /*返回顶部*/
            function scrollWindow(){
                var y = document.documentElement.scrollTop || document.body.scrollTop;  
                if( y > 0 ){
                    var b = setInterval(back,1);
                    if( y < 0 ){
                    clearInterval(b);
                    }
                }    
                }
            function back(){
                var y = document.documentElement.scrollTop || document.body.scrollTop;
                y = y -  10;   
                if( y <= 0 ){
                    clearInterval(b);
                }
                window.scrollTo(0,y);
                
            }
        </script>

总结

写文章的时候觉得麻烦，一些常用素材先存在这里● ①②③④⑤⑥⑦⑧⑨①②③④⑤⑥⑦⑧#### ● ⑨● ①②③④⑤●⑥⑦⑧#### ● ⑨⑩●⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ 很多标题都加了相应的超链接

(Tab)写文章的时候发现了很多样式的小技巧

完结撒花~

总结会抽时间写的，先睡了，

竹清兰香

关注

7
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
1
评论
第3期：12306页面制作

12306页面制作第1期：手把手教你制作网易邮箱注册页面第2期：网页动画制作（CSS+JS）第3期：12306页面制作文章目录12306页面制作前言一、基础知识二、制作步骤1.建立框架2.丰富内容3.修改样式(CSS)4.添加动态效果(JS)总结前言第三期了，也是这个系列的最后一期了，下面就让我们来看一下这次制作12306首页要实现的效果：首页中的轮播图：要求可以定时自动切换，也可以点击下方小圆点手动切换，轮播图需要原生javascript实现。返回顶部功能：当页面向下滑动
复制链接

扫一扫