上机实验1 制作一个课表
实验一 制作一个本学期使用的课程表
一、 实验目的和要求
制作一个本学期使用的课程表，要求有背景图像、背景音乐。
二、 实验内容
制作一个本学期使用的课程表。
三、 实验方法与步骤
用记事本写入html语句，依照本学期的课程，在文本文档写好后，改 文件的后缀名为html，用浏览器打开查看效果，并在body中加入了背景图片，在head标签中加入bgsound标签，添加背景音乐。
四、 实验数据记录、处理及结果分析
1、其中表格的核心代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| <table border=1 background="kebiao_2.jpg" width="900" height="700" style="background-repeat: no-repeat;background-size: cover;">
<caption>本学期课程表</caption>
<tr height="80">
<th width="80">节次\星期</th>
<th width="180">星期一</th>
<th width="180">星期二</th>
<th width="180">星期三</th>
<th width="180">星期四</th>
<th width="180">星期五</th>
<th width="180">星期六</th>
<th width="180">星期天</th>
</tr>
<tr height="80">
<td>第一二节</td>
<td>线性代数Ⅰ</td>
<td></td>
<td>线性代数Ⅰ</td>
<td>大学英语Ⅲ</td>
<td>数据结构</td>
<td></td>
<td></td>
</tr>
<tr height="80">
<td>第三四节</td>
<td > 大 学 英 语 Ⅲ </td>
<td>大学体育（3）</td>
<td>C#程序设计</td>
<td>数据结构</td>
<td>C#程序设计</td>
<td></td>
<td></td>
</tr >
<tr height="80">
<td>第五六节</td>
<td>Web设计基础</td>
<td></td>
<td>概率论与数理统计Ⅰ</td>
<td></td>
<td>数据结构</td>
<td></td>
<td></td>
</tr>
<tr height="80">
<td>第七八节</td>
<td>概率论与数理统计Ⅰ</td>
<td></td>
<td>马克思主义<br>基本原理概论</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="80">
<td>第九十节</td>
<td></td>
<td>韩国语入门（智慧<br>树）</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
|
2、实验效果：
五、 相关讨论、实验心得
1、在写table的时候要注意tr定义行，td定义列，在一行中写多个td标签，就会在一行中显示多列，注意tr和td标签的配对，否则会显示不成功。
2、表格由 ＜table＞ 标签来定义。
每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
表格的表头使用 th 标签进行定义，本实验中的星期一，星期二…..等就是用th定义的。
表格的标题用caption标签来定义，本实验中的表格上方的本学期课表就是该表格的标题
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
3、
1
2
3
4
5
6
7
| <!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。本实验中如果不写本句话，在别人的电脑上就会乱码。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
|
4、什么是html
HTML 指的是超文本标记语言，他不是一种编程语言，而是一种标记语言是一套标记标签 ，用标记标签来描述网页。
上机实验二 一、 实验目的和要求
制作一个计算器界面
二、 实验内容
制作一个计算器界面，能够在客户端实现加减乘除运算，示意图如P102 图4—22所示。
三、 实验方法与步骤
根据课后题的模样，写一个界面，在form标签中写几个input标签，写入文本框，单选按钮和点击按钮，使得输入数据，点击单选按钮选择两数之间的操作，点击按钮实现两数之间的计算。
四、 实验数据记录、处理及结果分析
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| 1、form标签的定义代码：
<form method="post" action="" name="jisuan_Form">
请输入第一个操作数：
<input type="text" name="one" /><br>
请输入第二个操作数：
<input type="text" name="two" /><br>
请选择操作：
<input type="radio" name="caozuo" value="+"/>+
<input type="radio" name="caozuo" value="-"/>-
<input type="radio" name="caozuo" value="*"/>*
<input type="radio" name="caozuo" value="/"/> /<br><br>
<input type="button" name="submit" value="=" onclick="calculate()" /><br><br>
结果是：<input type="text" name="ans" value=""/>
</form>
2、按钮点击的操作函数：
<script>
function calculate(){
var txt1=document.jisuan_Form.one.value-0;
var txt2=document.jisuan_Form.two.value-0;
var fuhao=document.jisuan_Form.caozuo;
var ans;
var tmp;
<!--找到选中的单选按钮,并将其赋值给tmp;而且这个i的类型不能是int类型,否则就不对-->
for(var i=0;i<fuhao.length;i++){
if(fuhao[i].checked){
tmp=fuhao[i].value;
break;
}
}
<!--匹配tmp的选项,进行相应的运算,然后输出-->
switch(tmp){
case "+": ans=txt1+txt2; document.jisuan_Form.ans.value=ans; break;
case "-": ans=txt1-txt2; document.jisuan_Form.ans.value=ans; break;
case "*": ans=txt1*txt2; document.jisuan_Form.ans.value=ans; break;
default: ans=txt1/txt2; document.jisuan_Form.ans.value=ans;
}
}
</script>
|
3、实验效果：
五、 相关讨论、实验心得
1、 首先就是写出界面，定义一个form表单，在其中写input标签，定义文本框，单选按钮和点击按钮，并且在按钮的定义时写入onclick事件，当点击时调用本网页中编写的calculate方法。
2、 在写calculate()的时候，radio必须name相同才能在一组中，否则单选按钮可以多选，我就忘记了，起初是挨个挨个获取单选按钮的值，后来发现可以获取一个单选按钮的组，然后用数组的形式获取其中是否选中。
3、 其中：表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
4、 ＜input type=”submit”＞ 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
上机实验3 制作一个个人主页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
一、 实验目的和要求
制作一个个人主页，页面内容包括“基本情况”和“教育经历”两个部分，其它内容自主添加，要求简洁美观。
二、 实验内容
制作一个个人主页，页面内容包括“基本情况”和“教育经历”两个部分，其它内容自主添加，要求简洁美观。
三、 实验方法与步骤
按照课本上的那个网上书店的例子，通过在一个网页中写两个frameset的方法，实现上方为独立的logo简介页面，下方的frameset嵌套两个frame，从而实现了在左方点击超链接在右下方的窗口显示连接到的网页的效果。其中超链接中的target属性应该指向右下方这个网页的name，这样才能实现在右方窗口单独显示网页的效果。
四、 实验数据记录、处理及结果分析
1. 首先是网页上方的logo.html
<html>
<head>
<meta charset="UTF-8">
<title>主页上方</title>
<style>
body {
text-align: center;
}
.vintage1 {
font-size: 8;
text-shadow: 5px -5px black, 8px -8px white;
font-weight: bold;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
</style>
</head>
<body bgcolor="#C4E3F3">
<font size="5">
<h1 class="vintage1">我的个人主页</h1></font>
</body>
</html>
2. 网页左方的导航栏界面
<html>
<head>
<meta charset="UTF-8">
<title>主页左边导航栏</title>
</head>
<body>
<p><a href="a.html" target="main">基本情况</a></p>
<p><a href="b.html" target="main">教育经历</a></p>
</body>
</html>
3. 网页右方的两个子窗口
基本情况：
<html>
<head>
<meta charset="UTF-8">
<title>基本情况</title>
<style>
#blog{
margin: 40px;
border-radius: 25px;
border: 2px solid #46B8DA;
width: 30px;
height: 15px;
color: #999999;
}
#name{
margin: 40px;
}
#sex{
margin-right: 40px;
}
</style>
</head>
<body bgcolor="aliceblue" >
<div align="center">
<table border="0" width="800px" height="600px">
<tr height="50px">
<td align="center" background="timg.jpg " height="80px">
<h2> ABOUT ME</h2>
</td>
</tr>
<tr height="50px">
<td align="center" >
<img src="renxiang.jpg" width="55px" height="90px"/>
<span id="name">
<font size="5">邹庆志</font>
</span>
<img src="man.jpg" width="30px" height="30px" id="sex" />
<font size="5">齐鲁工业大学学生</font>
<hr>
</td>
</tr>
<tr>
<td valign="top">
<ul >
<li>自入学以来，我始终把学习当做第一位。在学习生活中，我坦诚乐观，生活俭朴，尊敬师长，勤奋刻苦，有着较强学习能力和进取精神。在大一这学年中，担任班里的生活委员，关注同学们的生活状况和身体健康，积极帮助有困难的同学，团结同学。配合其他班委处理班级的各种事务，认真负责地完成学院和班级布置的各项工作。</li>
<br>
<li>思想上，我积极向上，能主动，自觉地向党组织靠拢，现被选为入党积极分子，平常更是以一个党员的标准来严格要求自己。在课外活动中积极参加志愿活动并获得荣誉称号。</li>
<br>
<li>
身为一个计算机系的学生对编程有着一番热情， 点击右侧按钮到达<a id="blog" href="https://aoyuehan.gitee.io/aoyue/"> 我的blog </a>
在这里，我积累了许多的知识，包括对数据结构，ACM，数据库，编程语言的理解。
</li>
<br>
</ul>
<br>
</td>
</tr>
</table>
</div>
</body>
</html>
教育经历：
<html>
<head>
<meta charset="UTF-8">
<title>教育状态</title>
</head>
<body>
<ul>
<li>
2012年就读于莒南第八中学，完成初等义务教育。
</li>
<br>
<li>
2015年就读于莒南第一中学,于2018年完成学业，参加高考。
</li>
<br>
<li>
<a href="http://www.qlu.edu.cn/"><img src="qlu.jpg" height="50px" width="50px" /></a>
2018年就读于齐鲁工业大学计算机系，正在就读中。
</li>
</ul>
</body>
</html>
五、 相关讨论、实验心得
1.首先认识到网页美观的重要性了，自己做出来的网页和网上的相比，简直是差了十万八千里，所以网页设计要美观大方，颜色搭配有序，布局要符合用户的需求，设计的更加人性化才可以。
2.通过本次实验，让我对于html中的table，a，p，hr，br标签有了新的用法经验，其次是应用css调整网页元素，比如：给文字加背景，生成艺术字，设置网页背景，调整html元素的布局等等，从而让页面变得更加美观。
4. 再者，是对html的框架有了更深的理解，其中frameset声明一个框架集，其包含frame声明的子窗口，而每个窗口都有自己的name属性，所以可以通过超链接等形式来改变各个子窗口的内容；并且各个子窗口之间是独立的，可以显示不同的内容。
5. 在子窗口设计时，我在jianjie.html即显示基本情况的界面中用到table来布局，在每一行显示不同的内容，最后把table的border属性设置为0，就可以分块显示想要的内容了。
6. frameset 元素用来定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。所以要使用 cols 或 rows 属性来定义框架的大小。而且不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。
|
实验效果：
上机实验4 css的使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
| 一、 实验目的和要求
（ 1 ）熟练应用页面布局技术，使网页布局合理，内容丰富
（ 2 ）使用 CSS 样式使网站具有统一风格
二、 实验内容
1 、使用 CSS 技术的制作一个页面，页面内容及显示格式如下图所示
HTML 技术（红色）
CSS 用于定义 Web 页面内容在浏览器上的显示方式，由于 HTML 的功能有限， 一般不能随意设计版面和编排文字，所以 W3C 公布了一套 HTML 的扩展标准 CSS ， 扩展了 HTML 在排版和文字式样上的功能（蓝色）
通过样式定义可以设定很多属性，如字号、颜色、 页边距， 元素在页面上的绝对位置等。 （绿色）
（ 1 ）直接定义 HTML 标记中的 style 属性实现。
（ 2 ）定义内部样式表实现。
（ 3 ）嵌入外部样式表实现。
（ 4 ）链接外部样式表实现。
三、 实验方法与步骤
首先通过课本上关于css这一节的几个例题的引入，知道了通过css修改网页可以通过定义 HTML 标记中的 style 属性实现、定义内部样式表实现、嵌入外部样式表实现、链接外部样式表实现来实现，编写代码，记录报告。
四、 实验数据记录、处理及结果分析
（ 1 ）直接定义 HTML 标记中的 style 属性实现。
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center" >
<h1 style="color: #FF0000;">HTML 技术</h1>
<p style="color: #2A36FF; text-align: center;">        CSS 用于定义 Web 页面内容在浏览器上的显示方式，由于 HTML 的功能有限，<br>
一般不能随意设计版面和编排文字，所以 W3C 公布了一套 HTML 的扩展标准 CSS ，<br>
扩展了 HTML 在排版和文字式样上的功能（蓝色）</p>
<p style=" color: green;">通过样式定义可以设定很多属性，如字号、颜色、 页边距，元素在页面上的绝对位置等。 （绿色） </p>
</div>
</body>
</html>
（ 2 ）定义内部样式表实现。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1{
color: #FF0000;
}
#p1{
color: #2A36FF;
text-align: center;
}
#p2{
color: green;
}
</style>
</head>
<body>
<div align="center" >
<h1 >HTML 技术</h1>
<p id="p1">        CSS 用于定义 Web 页面内容在浏览器上的显示方式，由于 HTML 的功能有限，<br>
一般不能随意设计版面和编排文字，所以 W3C 公布了一套 HTML 的扩展标准 CSS ，<br>
扩展了 HTML 在排版和文字式样上的功能（蓝色）</p>
<p id="p2">通过样式定义可以设定很多属性，如字号、颜色、 页边距，元素在页面上的绝对位置等。 （绿色） </p>
</div>
</body>
</html>
（ 3 ）嵌入外部样式表实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
<!--
@import url("style1.css");
-->
</style>
</head>
<body>
<div align="center" >
<h1 >HTML 技术</h1>
<p id="p1">        CSS 用于定义 Web 页面内容在浏览器上的显示方式，由于 HTML 的功能有限，<br>
一般不能随意设计版面和编排文字，所以 W3C 公布了一套 HTML 的扩展标准 CSS ，<br>
扩展了 HTML 在排版和文字式样上的功能（蓝色）</p>
<p id="p2">通过样式定义可以设定很多属性，如字号、颜色、 页边距，元素在页面上的绝对位置等。 （绿色） </p>
</div>
</body>
</html>
（ 4 ）链接外部样式表实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div align="center" >
<h1 >HTML 技术</h1>
<p id="p1">        CSS 用于定义 Web 页面内容在浏览器上的显示方式，由于 HTML 的功能有限，<br>
一般不能随意设计版面和编排文字，所以 W3C 公布了一套 HTML 的扩展标准 CSS ，<br>
扩展了 HTML 在排版和文字式样上的功能（蓝色）</p>
<p id="p2">通过样式定义可以设定很多属性，如字号、颜色、 页边距，元素在页面上的绝对位置等。 （绿色） </p>
</div>
</body>
</html>
(5)其中style1和style2的内容是一样的：
h1 {
color: #FF0000;
}
#p1 {
color: #2A36FF;
text-align: center;
}
#p2 {
color: green;
}
|
（6）实现效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 五、 相关讨论、实验心得
1.首先是关于直接在html中定义属性的方法来改变网页效果，这种方法通过直接在html标签中加入style属性来设置网页中字体的颜色，大小，文字的对齐方式，页边距等，但是比较繁琐，如果要修改一部分元素的效果时查找和修改都比较费劲，不直观。
2.然后就是关于css选择器的理解：CSS选择器用于选择你想要的元素的样式的模式。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如：p {color:red;text-align:center;}
选择器几种常用的用法总结：
class选择器：例如.intro{}。这样的话选择所有class="intro"的元素。
id选择器：例如#firstname{}。选择所有id="firstname"的元素
一般来说，id用在名字唯一的上面，class用在多个元素同名的时候。（如果只是单纯的添加css样式，id不唯一也可以。但是如果与js或者是jquery结合时，只会对第一个起作用。）
对于一般的html标签，可以通过element的形式来设置style属性，如：p{}。
选择所有<p>元素；同样：div,p{} 选择所有<div>元素和<p>元素。
div+p{} 选择所有紧接着<div>元素之后的<p>元素
div>p{} 选择所有父级是 <div> 元素的 <p> 元素
特别的：对于a标签， a:link{} 选择所有未访问链接
a:visited 选择所有访问过的链接
3. 关于多重样式优先级的总结：
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式（注意：如果外部 样式放在内部样式的后面，则外部样式将覆盖内部样式。）
|
上机实验5 js实现验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| 一、 实验目的和要求
使用js编写一段代码，完成验证，并给出提示。
二、 实验内容
使用JavaScript编制一段代码完成以下功能:
1.要求输入一个姓名
2.用确认框检查输入是否正确(是否为合法输字符,位长是否合理等)
3.根据输入给出相应的提示.
三、 实验方法与步骤
按照课本的输入验证的例子来写这个例子，就是获取到文本框中的字符，然后判断这些字符是否全都是汉字，如果不全都是汉字，弹框提示；然后再判断字符串的长度是否符合要求，不符合要求给出提示。并且在文本框的按键松开的时候编写方法提示你输入了几个字符。
四、 实验数据记录、处理及结果分析
1.源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js实现输入验证</title>
<script language="JavaScript" type="text/javascript">
function confirm_yanzheng(){
var str=document.getElementById("textin");
if(!isChinese(str.value)){
alert("有非法字符,必须输入中文");
} else if(str.value.length < 2 || str.value.length > 6 ) {
alert("输入字符长度不符 必须在2-6之间");
} else {
alert("验证成功!");
}
}
function isChinese(temp){
var re=/[^\u4e00-\u9fa5]/;
if (re.test(temp)) return false ;
return true ;
}
function tips(){
var str1=document.getElementById("textin");
if(str1.value != "") {
document.getElementById("text_tips").innerHTML = "您当前已经输入" + str1.value.length + " 个字符";
} else {
(document.getElementById("text_tips")).innerHTML = "内容不能为空请输入";
}
}
</script>
</head>
<body>
<input type="text" id="textin" onkeyup="tips()" /><input type="button" id="confirm" value="确认" onclick="confirm_yanzheng()" />
<div id="text_tips"></div>
</body>
</html>
|
2.效果展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
五、 相关讨论、实验心得
1. 首先要注意的问题就是document.getElementById方法，这个方法的参数是字符串，当初在写的时候直接写了id名，然后一直不知道哪里错了，所以一定要细心。另外想想也是传递的参数应该为字符串才对呀，不然的话，id名又不是变量。
2.
另一个应该注意的地方就是验证的那部分，正则匹配方式
function isChinese(temp){
var re=/[^\u4e00-\u9fa5]/;
if (re.test(temp)) return false ;
return true ;
}
这个re正则里面表示汉字的符号不应该是/u4e00，应该用反斜杠表示。
这段代码的逻辑是，参数tmp和re相比，如果tmp里面的字符都是re里面的字符，那么就返回true，否则返回false。其中说明： u4e00-u9fbf : unicode CJK(中日韩)统一表意字符。u9fa5后至u9fbf为空
3．还有就是在不知道怎么正则匹配汉字的时候找到了一个blog上写的一篇关于这个作业的源码，其中她的思想很好，就是
function $(id) {
return document.getElementById(id);
}
这样写来用$（id）就能直接获取该id的对象，这样写比较简洁，在需要获取多次id所代表的对象的时候比较方便。
|
#### 上机实验5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| 一、 实验目的和要求
1.在客户端验证用户输入信息。如果输入正确,允许链接到网站;如果不正确, 禁止链接。 要求用户界面友好。
2. 制作一个页面,背景颜色可以随机改变
二、 实验内容
1.验证用户输入的信息，如果输入的信息正确,就允许链接到网站;如果不正确, 禁止链接。 用户界面友好。
2.制作的这个页面的背景颜色可以随机改变。
三、 实验方法与步骤
1.首先是编写一个按钮，当点击这按钮的时候弹出一个输入确定框，输入管理员，点击确定连接到百度页面，就会跳转到百度页面；否则弹出提示框重新输入用户名。
2.编写js代码，编写一个定时器，每2s就执行一个函数，该函数产生个一个3以内的随机数，然后通过switch函数来选择当做背景图片的照片序号。通过dom结构的document.body.background=src;来改变背景图片。
3、改变背景颜色，产生一个随机数代表颜色，然后document.bgcolor=颜色；来改变背景颜色。
四、 实验数据记录、处理及结果分析
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function yanzheng(){
var Myname=prompt("请输入你的姓名：");
if(Myname=="管理员"){
var Mybool=confirm(Myname+"你好，确认要连接到百度的网页吗？");
if(Mybool){
window.location.replace("https://www.baidu.com")
}
}else{
alert("对不起，用户名错误。请重新输入");
}
}
</script>
</head>
<body>
<input type="button" width="200px" height="20px" onclick="yanzheng()" value="点击登录到百度">
<br>点击次按钮登录，然后输入用户名为管理员，跳转到百度页面</input>
</body>
</html>
2.
改变背景图片
<html>
<meta charset=utf-8" />
</head>
<body onLoad="randomimg();" style="background-size: cover; width: 800px; height: 900px;">
<script language="javascript">
function randomimg()
{
var i = Math.floor(Math.random()*5);//随机选取照片
var src = "";
switch(i)
{
case 0 :
src = "3.jpg";
break;
case 1:
src = "1.jpg";
break;
case 2:
src = "2.jpg";
break;
}
document.body.background=src;
setTimeout("randomimg()",2000);
}
</script>
</body>
</html>
3、改变背景颜色
<html>
<head>
<script>
function changeBg(){
var rand=Math.round(Math.random()*1000000);
document.bgColor="#"+rand;
}
setTimeout("changeBg();",1000);
</script>
</head>
<body>
</body>
</html>
五、 相关讨论、实验心得
1. 在编写第7题的时候，因为在输入之后点击确定按钮的时候，把确认框返回的值赋给Mybool变量，而在下面进行页面刷新的时候写成了if(!Mybool),导致点击确认不进行跳转，纳闷了好久才发现这么简单的逻辑错误。
2. js 刷新当前页面的几种方法：
reload()方法用于刷新当前文档。如：location.reload();
replace()replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。
window.location.replace("要跳转的新的网页")
或者： windows.location.href="NEW_URL";
自动刷新的方法：
<meta http-equiv="refresh" content="20">
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
3.当需要的类型与数据不同时，可以强制类型转换，
使用强制类型转换可以访问特定的值，即使它是另一种类型的。
Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。
|
上机实验六
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
| 一、 实验目的和要求
制作一个html程序，能计算到期后本金和利息的总和是多少。
二、 实验内容
某银行网站希望增加一个栏目，在界面中输入本金、存款方式和存款时间后，即可显示到期后的本金和利息之和共有多少，以利于客户选择存款方式。完成该栏目的设计与制作。
三、 实验方法与步骤
分为两个模块，输入数据和计算结果
其中输入数据设计存储方式，定期类型，期限，每期存入的金额这几个块，其中他们都有一个id，这样在js函数时就可以通过dom来获取每个块的值。从而实现计算，最后把结果输出到下面的文本框中。
四、 实验数据记录、处理及结果分析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算利息</title>
<!--
月利率=年利率÷12（月）=日利率×30（天）
利息的计算公式：本金×年利率（百分数）×存期
本息合计=本金+利息
-->
<style>
.kuang1{
display: block;
}
</style>
<script language="JavaScript">
function xiaoshi(){
var a1=document.getElementById("leixing1").value;
if(a1==2){
document.getElementById("kuang1").style.display="none";
}else{
document.getElementById("kuang1").style.display="block";
}
}
function jisuan(){
var benxi,lixi;
var dingqi_leixing=document.getElementById("leixing2");
var index_leixing=dingqi_leixing.selectedIndex
var day=document.getElementById("qixian");
var index_day=day.selectedIndex;
var val_day=day.options[index_day].value;
var money=document.getElementById("money").value-'0';
var a2=document.getElementById("leixing1").value;
if(a2==1){
//结算结果
if(index_leixing==0){
//计算整存整取类型：
lixi=money*val_day*0.0175;
benxi=money+lixi;
}
if(index_leixing==1){
//计算整存零取类型：
lixi=money*val_day*0.0275;
benxi=money+lixi;
}
if(index_leixing==2){
//计算存本取息类型：
lixi=money*val_day*0.0275;
benxi=money+lixi;
}
}else{
//计算活期
lixi=money*val_day*0.0030;
benxi=money+lixi;
}
document.getElementById("lixi").value=lixi;
document.getElementById("benxi").value=benxi;
}
</script>
</head>
<body>
输入数据：
<form id="lixi_form">
<span>存储方式：</span>
<select id="leixing1" onchange="xiaoshi()">
<option value="1" selected="selected">定期</option>
<option value="2" >活期</option>
</select><br>
<sapn id="kuang1">定期类型：
<select id="leixing2" >
<option value="1" selected="selected">整存整取</option>
<option value="2" >整存零取</option>
<option value="3" >存本取息</option>
</select>
</sapn>
<br>
<span id="kuang2">期限： </span>
<select id="qixian">
<option value="0.083">一个月</option>
<!--
作者：2661444606@qq.com
时间：2019-12-07
描述 一个月就是一年的1/12
-->
<option value="0.5">半年</option>
<option value="1">一年</option>
<option value="3">三年</option>
<option value="5">五年</option>
</select>
<br>
<span id="money_id" >每期存入的金额：</span>
<input id="money" />元<br>
<input type="button" value="计算" onclick="jisuan()" style="background-color: #EEA236; width: 80px;" />
<input type="reset" style="width:80px;"/>
</form>
<br>
<hr> <br>
<div>
计算结果：<br>
所得利息：<input id="lixi" disabled="disabled" /><br>
本息合计：<input id="benxi" disabled="disabled" />
</div>
</body>
</html>
|
实验效果：
定期：
活期：
五、 相关讨论、实验心得
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| 1、 首先就是通过id来访问文本框，下拉列表的值
其中可以通过var 值=选择框.value;直接得到选中的option的value
其中总结一下关于下列列表的一些操作
HTML DOM selectedIndex 属性
selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。
1、运用new Option("文本","值")方法添加选项option
var obj = document.getElementById("mySelect");
obj.add(new Option("4","4"));
2、删除所有选项option
var obj = document.getElementById("mySelect");
obj.options.length = 0;
3、删除选中选项option
var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options.remove(index);
4、修改选中选项option
var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option("three",3); //更改对应的值
obj.options[index].selected = true; //保持选中状态
5、删除select
var obj = document.getElementById("mySelect");
obj.parentNode.removeChild(obj); //移除当前对象
|
2、 可以通过style的display属性来设置某个元素的显示还是隐藏，属性值为block为显示，为none的时候为隐藏。
3、 在获取文本框的值的时候忘记了-‘0’;在最后的结果中
会直接把利息和本金用字符串拼接的方式来得到本息。
tips小技巧