深圳大学《基于Web的编程》实验参考代码
作者：小教学发布时间：2023-10-03分类：程序开发学习浏览：99
导读：实验题均来自储久良老师编著的《Web前端开发技术——HTML5、CSS3、JavaScript（第三版）》，深圳大学将其作为课程《基于Web的程序设计》实验题使用。现给出本人修读该...
实验题均来自储久良老师编著的《Web前端开发技术——HTML5、CSS3、JavaScript（第三版）》，深圳大学将其作为课程《基于Web的程序设计》实验题使用。现给出本人修读该课程期间编写的代码作为学习的参考。如有批评意见，请在评论区指出。
实验过程中的图片等资源可能用到网络路径。如果这些链接失效，更新路径或自建本地路径即可。
目录
- 实验1
- 求知家园
- Google搜索
- 实验2
- 自荐信
- 数学方程式
- 第四届中国大学出版社图书奖公示
- windows不同版本
- 实验3
- apple网站
- 浮动框架中打开新页面
- 桂林山水
- 图像对齐方式应用
- 图像画廊
- 实验4
- title新闻
- web前端开发工程师的工作内容
- 古诗排版
- 牌匾设计
- 实验5
- DIV+CSS
- HEAD LINE
- 欢度春节
- 木兰花令
- 实验6
- CASIO计算器
- 表格实验
- 登录界面
- 应聘页面
- 实验7
- CSS3动画-沿矩阵边框运动
- HUAWEI CONNECT
- 实验8
- 九九乘法表
- 找出符合条件的数
- 实验9
- 随机产生20个4位数
- 用户登录
- 实验10
- 手机通讯录管理器（indexedDB)
- 手机通讯录管理器（localStorage）
实验1
求知家园
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>求知家园</title>
<style type="text/css">
body{
background-color:#99FFFF;
}
p{
color: blue;
}
</style>
</head>
<body>
<p>欢迎来到我们的求知家园！</p>
<hr size="5" color="#FF3333" width="100%" />
</body>
</html>
Google搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google搜索</title>
</head>
<body style="background-color:#FFFF33;">
<p>欢迎使用Google搜索！</p>
<a href="https://www.google.com/">
<img src="http://imgs.wpeu.cn/ccm/20231002/4xbyjkf5skg.png" width="275" height="95" border="0" alt="">
</a>
<hr size="5" color="#0033FF" width="100%"/>
</body>
</html>
实验2
自荐信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>自荐信</title>
<style>
.title {
font-weight: 400;
text-align: center;
}
.indent {
text-indent: 1em;
}
.footnote {
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
<div class="title">自荐信</div>
<hr size=1px color="#000FFF" width="100%">
<div>尊敬的领导：</div>
<div class="indent">您好！</div>
<br>
<div class="indent">感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！</div>
<br>
<div class="indent">
我是计算机专业的本科毕业生。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。
</div>
<br>
<div class="indent">此致</div>
<div>敬礼!</div>
<hr size=1px color="#00FFFF" width="100%">
<div class="footnote">
联系E-mail:zhang@163.com
</div>
</body>
</html>
数学方程式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数学方程式</title>
<style type="text/css">
h3{font-size:24px;color:red;text-align:center;}
</style>
</head>
<body>
<h3>数学方程式</h3>
<hr size="2px" color="blue" width="80%"/>
<p align="center">
2x<sup>2</sup>+3x=9 <br>
x<sub>1</sub>+x<sub>2</sub>=10
</p>
</body>
</html>
第四届中国大学出版社图书奖公示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第四届中国大学出版社图书奖公示</title>
<style>
body {
background-color: #ccffcc;
}
</style>
</head>
<body>
<h2>第四届中国大学出版社图书奖公示</h2>
<div>优秀教材一等奖（68种）
<dt>
<dd>1.刑事诉讼法（第五版），陈光中主编，北京大学出版社</dd>
<dd>2.普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖 编著，北京大学出版社</dd>
<dd>3.音韻學教程（第四版），唐作藩著，北京大学出版社</dd>
<dd>4.保险学(第5版)，孙祁祥著，北京大学出版社</dd>
<dd>...</dd>
</dt>
</div>
<div>优秀教材二等奖（119种）
<dt>
<dd>1.艺术欣赏教程（第2版），杨辛、谢孟 主编，北京大学出版社</dd>
<dd>2.经济学基础（第6版），[美] 曼昆著，北京大学出版社</dd>
<dd>3.创新管理：赢得持续竞争优势（第2版），陈劲著，北京大学出版社</dd>
<dd>4.医学遗传学（第3版），傅松滨主编，北京大学医学出版</dd>
<dd>...</dd>
</dt>
</div>
</body>
</html>
windows不同版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>windows不同版本</title>
</head>
<body>
<ol>
<li>windows 95</li>
<li>windows 98</li>
<li>windows NT
<ul type="disc">
<li>windows NT Workstation</li>
<li>windows NT Server</li>
</ul>
</li>
<li>windows 2000</li>
<ul type="disc">
<li>windows 2000 Professional</li>
<li>windows 2000 Server</li>
<li>windows 2000 Advance Server</li>
</ul>
<li>windows xp</li>
<li>windows vista</li>
<li>windows 7</li>
<li>windows 8</li>
</ol>
</body>
</html>
实验3
apple网站
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>apple网站</title>
<style type="text/css">
img {
width: 200px;
height: 150px;
border: 0;
}
h2 {
text-align: center
}
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline;
width: 120px;
line-height: 30px;
/* float: left; */
}
</style>
</head>
<h2>
apple网站
</h2>
<hr size="3px" color="#00ff00" width="100%" />
<!-- todo: 图片大小等似有问题，必须处理之。 -->
<ul>
<li> <a href="http://www.apple.com.cn/iphone"><img src="https://source.acexy.cn/view/YPVkPSA" alt="图片未显示"></a></li>
<li> <a href="http://www.apple.com.cn/iphone"><img src="https://source.acexy.cn/view/YPVkedY" alt="图片未显示"></a></li>
<li> <a href="http://www.apple.com.cn/macbook-pro"><img src="https://source.acexy.cn/view/YPVkSTv" alt="图片未显示"></a></li>
<li> <a href="http://www.apple.com.cn/supplierresponsibility"><img src="https://source.acexy.cn/view/YPVkQpI" alt="图片未显示"></a></li>
</ul>
<hr size="3px" color="#00ff00" width="100%" />
</body>
</html>
浮动框架中打开新页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动框架中打开新页面</title>
<style type="text/css">
body {
text-align: center;
}
iframe {
width: 350px;
height: 250px;
}
</style>
</head>
<h2>
浮动框架中打开新页面
</h2>
<iframe src="http://www.pku.edu.cn" name="left"></iframe>
<iframe src="https://www1.szu.edu.cn/" name="right"></iframe>
<p>
<a href="https://www.bilibili.com/" target="left">在左边浮动框架中打开bilibili</a>
<a href="https://blog.csdn.net/" target="right">在右边浮动框架中打开CSDN</a>
</p>
</body>
</html>
桂林山水
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林山水</title>
<style type="text/css">
img {
width: 100px;
height: 100px;
border: 0;
}
h3 {
color: red;
text-align: center
}
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline-block;
width: 120px;
line-height: 30px;
}
</style>
</head>
<h3>
桂林山水风景图片
</h3>
<ul>
<li> <a href="http://imgs.wpeu.cn/ccm/20231002/f0rhg5e2ssm.jpg"><img src="http://imgs.wpeu.cn/ccm/20231002/f0rhg5e2ssm.jpg" alt="图片未显示"><br>桂林山水1</a></li>
<li> <a href="http://imgs.wpeu.cn/ccm/20231002/e0z5enblgph.jpg"><img src="http://imgs.wpeu.cn/ccm/20231002/e0z5enblgph.jpg" alt="图片未显示"><br>桂林山水2</a></li>
<li> <a href="http://imgs.wpeu.cn/ccm/20231002/40lqvrpqkwq.jpg"><img src="http://imgs.wpeu.cn/ccm/20231002/40lqvrpqkwq.jpg" alt="图片未显示"><br>桂林山水3</a></li>
<li> <a href="http://imgs.wpeu.cn/ccm/20231002/04peuwndov2.jpg"><img src="http://imgs.wpeu.cn/ccm/20231002/04peuwndov2.jpg" alt="图片未显示"><br>桂林山水4</a></li>
</ul>
</body>
</html>
图像对齐方式应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像对齐方式应用</title>
<style type="text/css">
h2 {
text-align: center;
}
</style>
</head>
<h2>
图像对齐方式应用
</h2>
<hr size="2px" color="red" width="100%" />
<h3>
未设置对齐方式的图像：
</h3>
<p>
<img src="http://imgs.wpeu.cn/ccm/20231002/nfz2ex1zyfm.png">PNG，图像文件存储格式，其目的是试图(原来此处使用了"企图")替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。
</p>
<h3>
已设置对齐方式的图像：
</h3>
<p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。<img src="http://imgs.wpeu.cn/ccm/20231002/nfz2ex1zyfm.png"
align="bottom">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用合适的预测而造成过分臃肿的PNG文件。</p>
<p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。<img src="http://imgs.wpeu.cn/ccm/20231002/nfz2ex1zyfm.png"
align="middle">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用合适的预测而造成过分臃肿的PNG文件。</p>
<p><img src="http://imgs.wpeu.cn/ccm/20231002/nfz2ex1zyfm.png"
align="left">PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用合适的预测而造成过分臃肿的PNG文件。
</p>
</body>
</html>
图像画廊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像画廊</title>
<style type="text/css">
img{width:100px;height:100px;border:2px #cc0066 ridge;}
ul{list-style-type:none;}
li{float:left;}
h2{text-align: center;}
</style>
</head>
<h2>
图像画廊
</h2>
<hr size="5" color="#00ff00" width="100%"/>
<marquee behavior="alternate">
<ul>
<li><img src="http://imgs.wpeu.cn/ccm/20231002/w2bh401y3tq.jpg" alt="图片未显示"></li>
<li><img src="http://imgs.wpeu.cn/ccm/20231002/mgx3b13w555.jpg" alt="图片未显示"></li>
<li><img src="http://imgs.wpeu.cn/ccm/20231002/z1v1btfdmym.jpg" alt="图片未显示"></li>
<li><img src="http://imgs.wpeu.cn/ccm/20231002/opsz3wtewov.jpg" alt="图片未显示"></li>
<li><img src="http://imgs.wpeu.cn/ccm/20231002/35bsy23afrg.jpg" alt="图片未显示"></li>
</ul>
</marquee>
<hr size="5" color="#00ff00" width="100%"/>
</body>
</html>
实验4
title新闻
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
title新闻
</title>
<style type="text/css">
.it {
font-style: italic;
font-size: 24px;
font-weight: bold;
color: black;
text-decoration:none;
}
span {
color: red;
font-weight: bold;
text-decoration: underline;
}
.mydiv {
/* position:absolute; */
/* z-index: 0; */
background-color: #3BFF00;
/* border:2px solid black; */
width: 500px;
height: 380px;
}
.mysubdiv {
/* position: absolute; */
/* z-index: 1; */
top: 15px;
left: 15px;
}
</style>
</head>
<body>
<div class="mydiv">
<img src="https://source.acexy.cn/view/YPFg5qJ" >
<div class="mysubdiv">
<ul>
<li>2017<span class="red">央视</span>综艺节目发力 彰显公益大爱</li>
<li>继北京、上海后，2017年<span class="red">腾讯</span>视频推介会昨又在广州隆重举行</li>
<li>“<span class="red">跨界融合 开放共赢</span>”移动互联网营销峰会</li>
<li>首届<span class="it">“联建杯”</span>户外LED显示屏媒体大赛评审圆满落幕</li>
</ul>
</div>
</div>
</body>
</html>
web前端开发工程师的工作内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端开发工程师工作内容</title>
<style type="text/css">
h1,
h3,
ul {
color: blue;
font-family: 楷体
}
#ul0 {
font-style: italic;
font-weight: bold;
font-size: 24px;
font-family: 黑体
}
#ul1 {
background-color: #99c;
letter-spacing: 1px
}
#ul2 {
color: red;
font-size: 18px
}
#ul3 {
color: #00c;
background-color: #c0c0c0;
font-family: 隶书
}
</style>
</head>
<body>
<h1>Web前端开发工程师工作内容</h1>
<h3>web前端工程师在不同的公司，会有不同的职能，但称呼都是类似的。</h3>
<ul>
<li id="ul0">做网站设计、网页界面开发</li>
<li id="ul1">做网页界面开发</li>
<li id="ul2">做网页界面开发、前台数据绑定和前台逻辑的处理</li>
<li id="ul3">设计、开发、数据处理</li>
</ul>
</body>
</html>
古诗排版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
古诗排版
</title>
<style type="text/css">
p {
font-family: "隶书";
}
body {
text-align: center;
}
.id1{
font-size: 100%;
}
.id2{
font-size:150%;
}
#id3{
font-size:200%;
}
#id4{
font-size:250%;
}
</style>
</head>
<body>
<h3>早发白帝城</h3>
<h6>李白</h6>
<p class="id1">朝辞白帝彩云间，
<p class="id2">千里江陵一日还。
<p id="id3">两岸猿声啼不住，
<p id="id4">轻舟已过万重山。
</body>
</html>
牌匾设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>匾牌设计</title>
<style>
#div0 {
width: 800px;
height: 100px;
border: 20px outset red;
list-style: outside;
/* color: #ff0000; */
padding: 20px;
margin: 100px;
/* position: absolute;
z-index: 0; */
text-align: center;
/* background:#efedee; */
}
p {
font: italic bolder 70px/1.5em 隶书;
/* weight: */
/* line-height: 1.5%; */
/* font-family: ""; */
text-align: center;
/* font-size: 70px; */
/* color: black; */
background-color: #efedee;
/* margin-top: 0%;margin-bottom: 0%;margin-left: 0%;margin-right: 0%; */
margin: 0%;
}
body {
/* text-align: center; */
align-content: center;
}
</style>
</head>
<body>
<div id="div0">
<div>
<p>海纳百川 有容乃大</p>
</div>
</div>
</body>
</html>
实验5
DIV+CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV+CSS布局</title>
</head>
<style type="text/css">
* {
font: 24px/1.5em 黑体;
margin: 0 auto;
padding: 0px;
/* float: top; */
}
.Container {
width: 1006px;
margin: 0 auto;
}
.Header {
height: 120px;
background: #093;
}
.logo {
height: 80px;
background: #5f5;
border-bottom: 2px solid white;
}
.nav {
height: 40px;
background: #3f5;
border-bottom: 2px solid white;
}
.Content {
width: 100%;
height: 400px;
background: #00EEFF;
}
.Content-left {
height: 400px;
width: 250px;
float: left;
background: #66ff66;
border-right: 2px solid white;
border-top:2px solid white;
border-bottom: 2px solid white;
}
.Content-center-left {
height: 400px;
width: 250px;
float: left;
background: #77ff66;
border-right: 2px solid white;
border-top:2px solid white;
border-bottom: 2px solid white;
}
.Content-center-right {
height: 400px;
width: 250px;
float: left;
background: #88ffDD;
border-right: 2px solid white;
border-top:2px solid white;
border-bottom: 2px solid white;
}
.Content-right {
height: 400px;
width: 250px;
float: left;
background: #99ff66;
border-top:2px solid white;
border-bottom: 2px solid white;
}
.Footer {
height: 40px;
background: #6FC;
border-top: 2px solid white;
}
</style>
<body>
<div class="Container">
<div class="Header">
<div class="logo">logo</div>
<div class="nav">nav</div>
</div>
<div class="Content">
<div class="Content-left">Content-left</div>
<div class="Content-center-left">Content-center-left</div>
<div class="Content-center-right">Content-center-right</div>
<div class="Content-right">Content-right</div>
</div>
<div class="Footer">Footer</div>
</div>
</body>
</html>
HEAD LINE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Head Line</title>
<!-- todo：可能还需要调整 -->
<style>
h1 {
text-align: center;
color: white;
background-color: #678;
}
img {
float: left;
border: 1px dashed gray;
margin: 10px 10px 10px 0;
padding: 5px;
}
p:first-letter {
font-size: 3em;
float: left;
vertical-align: middle;
/* margin-top: -20px; */
}
p{
line-height: 1.7em;
}
</style>
</head>
<body>
<h1>Head Line</h1>
<div>
<!-- <span> -->
<img src="http://imgs.wpeu.cn/ccm/20231002/1tiyvjxdauq.jpg" alt="图片无法显示">
<p>Mobile
Widget使用的标准的Web技术，如HTML, CSS, javascript等。这些经典的Web技术规范是由W3C（万维网联盟）
的下属各个工作组指定并推进的。作为开发Widget之前的知识准备，在本章中我们将逐一介绍这些技术。</p>
<!-- </span> -->
</div>
</body>
</html>
欢度春节
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢度春节</title>
<style>
body {
font-size: 16px;
margin: 0;
text-align: center;
font-family: "Courier New";
}
h4 {
float: left;
margin: 45px auto;
padding-left: 50px;
}
p {
margin: 2px;
font-size: 14px;
}
span {
margin-top: 45px;
width: 50px;
height: 30px;
font-size: 20px;
padding: 45px 10px;
vertical-align: middle;
text-align: center;
}
a {
width: 48px;
height: 24px;
font-size: 20px;
text-align: center;
}
ul {
list-style-type: none;
margin: 0px;
padding: 35px;
text-align: center;
}
li {
width: 50px;
height: 30px;
font-size: 20px;
padding: 10px 35px;
}
h3 {
text-align: center;
line-height: 0px;
color: red;
font-size: 24px;
background: #CFF000;
}
h4 {
font-family: "宋体";
font-weight: bold;
}
a:link,
a:visited,
a:active {
text-decoration: none;
display: block;
}
a:hover {
border-bottom: 2px solid #FF0000;
background: #55A0FF;
color: #FFFFFF;
}
#PageBody {
height: 380px;
border-bottom: 5px solid #FFFFFF;
}
#SideBar {
float: left;
width: 200px;
height: 380px;
background: #Dff100;
text-align: center;
padding: 50px auto;
border-right: 5px solid #FFFFFF;
font-family: "宋体";
}
ul li a {
color: #1E08EC;
}
#MainBody {
float: right;
width: 695px;
height: 380px;
background: #cff000;
}
#Footer {
height: 60px;
background-color: rgb(230, 230, 230);
text-align: center;
font-size: 12px;
padding-top: 10px;
}
#Container {
margin: 0 auto;
width: 900px;
}
#Header {
height: 118px;
border-bottom: 5px;
background-color: rgb(230, 230, 230);
border-bottom: 5px solid #FFFFFF;
}
#Header img {
float: left;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<img src="http://imgs.wpeu.cn/ccm/20231002/gfr0ai5azpc.jpg" height="118px" alt="图片无法显示">
<h4>
<span>首页</span>
<span>|</span>
<span>博客</span>
<span>|</span>
<span>设计</span>
<span>|</span>
<span>论坛</span>
<span>|</span>
<span>关于</span>
</h4>
</div>
<div id="PageBody">
<div id="SideBar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">设计</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div id="MainBody">
<h3>欢  度  新  春  佳  节</h3>
<img src="http://imgs.wpeu.cn/ccm/20231002/ahpksh3tsjv.jpg" width="694" height="308"
alt="图片无法显示">
</div>
</div>
<div id="Footer">
<p>Copyrights 2015-2020 Web前端开发工作室© All rights reserved. 中国江苏</p>
</div>
</div>
</body>
</html>
木兰花令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>木兰花令</title>
<style type="text/css">
div {
text-align: center;
}
#wrap {
width: 900px;
height: 520px;
margin: 0 auto;
border: 2px red solid;
margin-top: 5px;
}
#pic {
width: 420px;
height: 300px;
background-image: url(http://imgs.wpeu.cn/ccm/20231002/itu5xoho2qu.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: #77A;
float: left;
}
#text {
background-image: url(http://imgs.wpeu.cn/ccm/20231002/itu5xoho2qu.jpg);
width: 420px;
height: 500px;
background-color: #77A;
padding: 10px;
font-weight: bold;
float: right;
}
#title {
font-family: 华文彩云;
font-size: 32px;
}
#author {
font-size: 12px;
font-family: 黑体;
text-align: right;
margin-bottom: 24px;
}
p {
font-family: 隶书;
font-size: 24px;
margin: 2px;
letter-spacing: 0.5em;
line-height: 1.5em;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="pic"></div>
<div id="text">
<div id="title">木兰花令.拟古决绝词</div>
<div id="author">纳兰性德</div>
<div id="content">
<p>人生若只如初见，</p>
<p>何事秋风悲画扇。</p>
<p>等闲变却故人心，</p>
<p>却道故心人易变。</p>
<p>骊山语罢清宵半，</p>
<p>泪雨霖铃终不怨。</p>
<p>何如薄幸锦衣郎，</p>
<p>比翼连枝当日愿。</p>
</div>
</div>
</div>
</body>
</html>
实验6
CASIO计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CASIO计算器</title>
<style type="text/css">
.output {
height: 60px;
width: 390px;
border: solid 1.5px;
z-index: 1;
position: absolute;
top: 50px;
left: 20px;
background-color: white;
}
#wrap {
width: 420px;
height: 460px;
background-color: rgb(230, 230, 130);
/* border: solid 1.5px; */
z-index: 0;
position: absolute;
}
#ops {
height: 330px;
width: 390px;
border: 1px;
z-index: 1;
position: absolute;
top: 115px;
left: 20px;
border: solid 1.5px;
border-color: grey black black grey;
/* border-left-color: ;
border-bottom: ; */
/* border-bottom: 5px black; */
}
td {
border: solid 1.4px black;
width: 58px;
height: 40px;
/* margin: 10px; */
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<img src="http://imgs.wpeu.cn/ccm/20231002/pno42zzsaqi.png"></img>
<div class="output"></div>
<div id="ops">
<table cellspacing="30">
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr align="center">
<td>0</td>
<td>=</td>
<td>CE</td>
<td>/</td>
</tr>
</table>
</div>
</div>
</body>
</html>
表格实验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格实验</title>
<style type="text/css">
table {
border: double 8px;
border-color: #0000FF;
}
td {
border: 1px solid black;
text-align: center;
}
#subtable1 {
background-color: #ffffee;
width: 80%;
border-spacing: 2;
/* align-content: center; */
}
#subtable2 {
background-color: #fefefe;
width: 80%;
border-spacing: 2;
}
</style>
</head>
<body>
<table width="300" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>
<table align="center" id="subtable1">
<tr>
<td>a</td>
<td rowspan="2">b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" id="subtable2">
<tr>
<td>a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
登录界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<style>
.box {
max-width: 270px;
text-align: left;
line-height: 1.5rem;
border: 1px solid blue;
}
.align-left {
text-align: left;
}
.input {
width: 160px;
border: solid gray;
border-radius: 1px;
}
.cbox {
display: flex;
width: 170px;
justify-content: space-between;
}
.subbox {
width: 170px;
line-height: 28px;
}
label {
display: inline-block;
width: 60px;
text-align: justify;
text-align-last: justify;
margin-right: 10px;
}
button {
margin-left: 60px;
margin-top: 5px;
border-radius: 1px;
border: solid gray;
}
div {
margin-bottom: 5px;
}
.flex-display {
display: "flex";
}
</style>
</head>
<body>
<form>
<fieldset class="box">
<legend class="align-left">登录页面</legend>
<div><label> 用户名:</label> <input type="text" class="input"></div>
<div><label>密码: </label> <input type="password" class="input"></div>
<div style="display: flex;">
<div><label>类型: </label></div>
<div class="cbox">
<div class="subbox">
<input type="radio">管理员 
<input type="checkbox">记住密码
</div>
<div class="subbox">
<input type="radio">普通用户
<input type="checkbox">自动登录
</div>
</div>
</div>
<button>提交</button> <button>重置</button>
</fieldset>
</form>
</body>
</html>
应聘页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应聘页面</title>
</head>
<style>
button {
margin-left: 8px;
}
select {
font-size: small;
}
.it {
text-align: left;
font-size: small;
}
.salary {
width: 100px;
}
.box {
max-width: 200px;
text-align: center;
display: inline-block;
border: 2px solid black;
border-radius: 5px;
}
#checked {
background-color: #1E9FFF;
color: #FFFFFF;
}
</style>
<body>
<form>
<b>希望工作地点：</b>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>，
<b>月薪要求：</b><input type="text" class="salary">
<input type="checkbox" name="auto" value="false">要求提供过渡住房<br />
<b>请选择应聘行业：</b><br />
<div class="box">
<option class="it">计算机软件 </option>
<option class="it">计算机硬件</option>
<option class="it" id="checked">计算机服务</option>
<option class="it" id="checked">通信/电信/网络设备</option>
<option class="it" id="checked">互联网/电子商务</option>
<option class="it">网络游戏</option>
<option class="it">电子技术/半导体/集成电路</option>
<option class="it">仪器仪表/工业自动化</option>
<!-- <select>
<option>苹果</option>
<option>香蕉</option>
<option>橘子</option>
</select> -->
</div>
<button>提交</button><button>重置</button>
</form>
<script>
const items = document.getElementsByClassName('it');
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
items[i].style.color = '#FFFFFF';
items[i].style.backgroundColor = '#1E9FFF';
}
}
</script>
</body>
</html>
实验7
CSS3动画-沿矩阵边框运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3动画-沿矩阵边框运动</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
color: white;
position: relative;
animation: myAnimation 5s infinite;
-webkit-animation: myAnimation 5s infinite;
}
hr {
color: #c9c9c9;
}
@keyframes myAnimation {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: green;
left: 200px;
top: 0px;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
@-webkit-keyframes myAnimation {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: green;
left: 200px;
top: 0px;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h3>CSS3动画-沿矩形边框运动</h3>
<hr>
<div>我在运动！</div>
</body>
</html>
HUAWEI CONNECT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HUAWEI CONNECT</title>
</head>
<style>
h1,
h3 {
text-align: center;
}
h1 {
text-shadow: 3px 3px 6px #ff0000;
background: #6699FF;
color: white;
margin: 10px auto;
height: 46px;
line-height: 46px;
}
.text {
text-indent: 2em;
font-size: 15px;
text-align: justify;
column-count: 4;
column-gap: 50px;
column-rule: 4px outset #ff0000;
}
p {
margin-top: 0%;
margin-bottom: 0%;
/* font-size: 110%; */
}
article {
margin: 20px auto;
width: 850px;
height: 900px;
background: #eeeeee;
padding: 30px;
}
/* header{
text-size-adjust: 200%;
} */
</style>
<body>
<article>
<header>
<hgroup>
<h1>提前探班：HUAWEI CONNECT 2016大透析</h1>
<h3>为什么华为要自主办HUAWEI CONNECT旗舰大会？</h3>
</hgroup>
<figure style="text-align:center;">
<img src="http://imgs.wpeu.cn/ccm/20231002/xrgyknpz4rp.png" width="450"
alt="图片无法显示"><br>
<figcaption>▲华为常务董事、战略Marketing总裁徐文伟</figcaption>
</figure>
<div class="text">
<p>徐文伟在采访中把HC2016大会的举办归结于华为历史的发展，他表示：“华为发展的过程，我认为可以分为三个阶段。第一个阶段，华为主要参加行业组织和外部机构举办的活动。比如每年的巴展、CeBIT和interop等等。第二个阶段，随着公司的发展，华为除了在继续参与这些活动之外，也开始自行组织一些有特定主题、面向特定受众的活动。比如HCC(华为云计算大会)、HNC(华为网络大会)、HDC(华为开发者大会)等。第三个阶段，华为开始筹划组织HUAWEI CONNECT这样的旗舰大会。华为希望通过构筑平台开放能力，最终释放整个ICT产业的生产力、推进社会进步。
</p>
<p>关于本次大会的定位，徐文伟也表示："华为认为作为一场旗舰大会应该拥有行业最前沿的内容，能吸引各类型、各层级的行业领袖和精英参会，成为企业高层商业与战略的交流平台。”</p>
<p>同时，徐文伟指出：“在这次HUAWEI
CONNECT全联接大会上，华为将系统阐述华为业务战略方向、关键举措和实践，分享行业最前瞻的洞察，为行业领袖和精英提供一个商业与战略对话平台，全方位构建华为的行业领导力。华为将这次大会打造成一次生态大会，与客户、合作伙伴、产业组织、开发者共同引领并推动产业发展，发布创新领先的ICT产品与解决方案。”
</p>
</div>
</header>
<footer>
<h3><strong>标签：华为，云计算 it168网站原创 ©2016-08-26 </strong></h3>
</footer>
</article>
</body>
</html>
实验8
九九乘法表
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九九乘法表</title>
</head>
<body>
<script>
document.write("<h5>九九乘法表</h5>");
// write your code here
// ...
// document.write("<p align=center>");
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= 9; j++) {
if (i >= j)
document.write(j + "*" + i + "=" + j * i + " ");
}
document.write("<br />");
}
// document.write("</p>");
</script>
</body>
</html>
找出符合条件的数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>找出符合条件的数</title>
</head>
<body>
<script>
// write your code here
document.write("<h3>找出1000-9999之间能够被17和13同时整除的整数的个数及累加和</h3>");
document.write("区间中符合条件的数有(输出格式：10个1行):<br />");
var cnt = 0;
var sum = 0;
for (let i = 1000; i <= 9999; i++) {
if (i % 221 == 0) {
document.write(i);
cnt++;
sum += i;
if (cnt % 10 != 0) {
document.write(" ");
} else {
document.write("<br />");
}
}
}
document.write("<br />");
document.write("区间中符合条件的数共有"+cnt+"个<br />");
document.write("区间中符合条件的数的累加和为"+sum+"<br />");
</script>
</body>
</html>
实验9
随机产生20个4位数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机产生20个4位整数</title>
</head>
<body>
<div>
<textarea name="num-area" id="num-area" cols="50" rows="10"></textarea>
</div>
<div>
<button id="random-btn" onclick="rand();">随机产生20个整数</button>
<button id="divide-btn" onclick="find();">找出能被5整除的整数</button>
<button id="reset-btn" onclick="reset();">重置</button>
</div>
<script>
// write your code here
// // 方式1
// dom.addEventListener("click", function () {...})
// // 方式2
// dom.onclick = function () {... }
var flag = 0;
var array_int = new Array(20);
function $(id) {
return document.getElementById(id);
}
function reset() {
$("num-area").value = "";
flag = 0;
}
window.reset = reset;
function rand() {
$("num-area").value = "随机产生20个4位整数，分别如下：\n";
var m = 1000;
var n = 9999;
for (let i = 0; i < array_int.length; i++) {
array_int[i] = Math.round(Math.random() * (n - m) + m);
}
$("num-area").value += array_int.join(",");
$("num-area").value += "\n";
array_int.sort();
$("num-area").value += "从小到大排序后结果为：\n";
$("num-area").value += array_int.join(",");
$("num-area").value += "\n";
flag = 1;
}
window.rand = rand;
function find() {
if (flag == 1) {
var array_tmp = new Array();
array_int.forEach(element => {
if (element % 5 == 0) {
array_tmp.push(element);
}
});
$("num-area").value += "能被5整除的整数有：\n";
$("num-area").value += array_tmp.join(",");
$("num-area").value += "\n";
}
}
window.find = find;
</script>
</body>
</html>
用户登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<style>
fieldset {
background-color: #663399;
width: 300px;
text-align: center;
}
h2 {
background-color: grey;
opacity: 0.7;
}
span {
color: white;
}
td {
text-align: center;
height: 38px;
}
.button-box {
display: flex;
margin: 0 auto;
justify-content: center;
margin-top: 20px;
}
.table-box {
width: 270px;
margin-left: 30px;
}
</style>
</head>
<body>
<!-- onsubmit返回false：禁止页面跳转 -->
<form onsubmit="return false;">
<fieldset>
<legend>
<h2>用户登录</h2>
</legend>
<div class="table-box">
<table>
<tr>
<td><span>用户名</span></td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td><span>密 码</span></td>
<td><input type="password" id="password"></td>
</tr>
</table>
</div>
<div class="button-box">
<input id="submit" type="submit" value="提交" onclick="submit1()">
<input id="reset" type="reset" value="重置" onclick="return reset1()">
</div>
</fieldset>
</form>
<script>
// write your code here
function $(id) {
return document.getElementById(id);
}
function submit1() {
var username = $("username").value;
var password = $("password").value;
var flag = 0;
var msg = "";
if (username == "") {
// alert("用户名不可为空！");
msg += "用户名不可为空！\n";
$("username").focus();
flag = 1;
} else if (username.length < 8) {
// alert("用户名过短，至少需要8个字符！");
msg += "用户名过短，至少需要8个字符！\n"
$("username").focus();
flag = 1;
} else if (username.length > 20) {
// alert("用户名过长，最多20个字符！");
msg += "用户名过长，最多20个字符！\n";
$("username").focus();
flag = 1;
}
if (password == "") {
// alert("密码不可为空！");
msg += "密码不可为空！\n";
if (!flag)
$("password").focus();
} else if (password.length < 8) {
// alert("密码过短，至少需要8个字符！");
msg += "密码过短，至少需要8个字符！\n";
if (!flag)
$("password").focus();
} else if (password.length > 20) {
// alert("密码过长，最多20个字符！");
msg += "密码过长，最多20个字符！\n";
if (!flag)
$("password").focus();
}
if (msg.length)
alert(msg);
}
window.submit1 = submit1;
function reset1() {
return confirm("数据将被清空");
// $("username").value = "";
// $("password").value = "";
}
window.reset1 = reset1;
</script>
</body>
</html>
实验10
该实验经过需求细化，要求支持模糊匹配，并初步保证在一些特殊样例（包括注入攻击）下的鲁棒性。
手机通讯录管理器（indexedDB)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机通讯录管理器</title>
<style>
.container {
width: 450px;
margin: 0 auto;
}
h2 {
text-align: center;
background-color: #EAEAEA;
}
fieldset {
text-align: center;
}
.button-box {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<!-- 请勿改动id、button数量及顺序,其他可视情况更改 -->
<header>
<h2>手机通讯录管理器</h2>
</header>
<form onsubmit="return false;">
<fieldset>
<legend>简易手机通讯录</legend>
姓名：<input type="text" name="name" id="name"> <br>
电话：<input type="text" name="phone" id="phone">
<div class="button-box">
<input type="button" value="添加" onclick="handleAdd()">
<input type="button" value="查询" onclick="handleSearch()">
<input type="button" value="删除" onclick="handleDelete()">
<input type="button" value="重置" onclick="handleReset()">
</div>
<textarea name="content" id="content" cols="35" rows="12" disabled></textarea>
</fieldset>
</form>
<div>
<h2>前端工作室设计 <br>版权所有©,2017-2020</h2>
</div>
</div>
<script>
// 参考如下：
// 创建数据库
function createDB() {
var request = window.indexedDB.open('phoneInfo', 1);
request.onerror = function (event) {
alert("数据库连接失败：" + event.target.errorCode);
}
request.onupgradeneeded = function (event) {
var db = request.result;
var store = db.createObjectStore("phone", { keyPath: "phone" });
console.log("create:" + db);
}
handleReset();
handleSearch();
}
// 处理添加
function handleAdd() {
var request = window.indexedDB.open('phoneInfo', 1);
request.onsuccess = function (event) {//捕获连接成功事件，并处理
var db = event.target.result; //连接成功时，获取数据库对象(也可用request.result)
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
var mes = "";
var reg = /^((?!\?|!|<|>|=|@|'|"|\(|\)).)*$/;
if (name == "") {
mes += "姓名不能为空!\n";
// return;
} else if (!reg.test(name)) {
mes += "姓名中不得含有特殊符号！\n";
}
if (phone == "")
mes += "电话号码不能为空！\n";
else if (!reg.test(phone))
mes += "电话号码不得包含特殊符号！\n";
if (mes != "") {
alert(mes);
return;
}
var req = db.transaction('phone', 'readwrite').objectStore('phone')
.add({ name: name, phone: phone, phone: phone });
req.onsuccess = function (event) {
// alert('添加成功');
// document.getElementById('content').value += name + " " + phone + "\n";
handleReset();
handleSearch();
}
req.onerror = event => {
if (confirm("是否覆盖，更新旧姓名")) {
db.transaction('phone', 'readwrite').objectStore('phone').put({ name: name, phone: phone, phone: phone });
alert("更新成功");
handleReset();
handleSearch();
}
}
}
}
// 处理查询
function handleSearch() {
var request = window.indexedDB.open('phoneInfo', 1);
request.onsuccess = event => {//捕获连接成功事件，并处理
var db = event.target.result; //连接成功时，获取数据库对象(也可用request.result)
var objectStore = db.transaction('phone', 'readwrite').objectStore('phone');
// let request = objectStore.openCursor()
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
document.getElementById('content').value = "";
objectStore.openCursor().onsuccess = event => {
let cursor = event.target.result;
if (cursor) {
if (
(name == "" && phone == "") ||
(cursor.value.name.search(name) != -1 && phone == "") ||
(cursor.value.phone.search(phone) != -1 && name == "") ||
(cursor.value.phone.search(phone) != -1 && cursor.value.name.search(name) != -1)
)
document.getElementById('content').value += cursor.value.name + " " + cursor.value.phone + "\n";
cursor.continue();
}
}
}
}
// 处理删除
function handleDelete() {
var request = window.indexedDB.open('phoneInfo', 1);
request.onsuccess = event => {//捕获连接成功事件，并处理
var db = event.target.result; //连接成功时，获取数据库对象(也可用request.result)
var objectStore = db.transaction('phone', 'readwrite').objectStore('phone');
// let request = objectStore.openCursor()
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
if (name == "" && phone == "") {
alert("删除条件为空，无法删除");
return;
}
var cursor_list = new Array();
objectStore.openCursor().onsuccess = event => {
let cursor = event.target.result;
if (cursor) {
if (
(name == "" && phone == "") ||
(cursor.value.name.search(name) != -1 && phone == "") ||
(cursor.value.phone.search(phone) != -1 && name == "") ||
(cursor.value.phone.search(phone) != -1 && cursor.value.name.search(name) != -1)
) {
cursor_list.push(cursor.value.phone);
}
cursor.continue();
} else {
if (cursor_list.length >= 2) {
alert("删除的内容匹配多项，删除失败！");
return;
} else if (cursor_list.length == 0) {
alert("未找到待删除信息！");
return;
} else {
objectStore.delete(cursor_list[0]);
alert("删除成功！\n");
handleReset();
handleSearch();
}
}
}
}
}
// 处理重置
function handleReset() {
document.getElementById('name').value = "";
document.getElementById('phone').value = "";
document.getElementById('content').value = "";
}
// 注意：如果出现误判（检测数据库失败、阻塞）。
// 可以尝试在handleXXX回调函数中调用createDB重新open数据库初始化。
// 页面加载时首先检测并创建数据库
createDB();
// 为了网站校验而需要额外设置的，正常情况下不需要
window.handleAdd = handleAdd;
window.handleSearch = handleSearch;
window.handleDelete = handleDelete;
window.handleReset = handleReset;
</script>
</body>
</html>
手机通讯录管理器（localStorage）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机通讯录管理器</title>
<style>
.container {
width: 450px;
margin: 0 auto;
}
h2 {
text-align: center;
background-color: #EAEAEA;
}
fieldset {
text-align: center;
}
.button-box {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<!-- 请勿改动id、button数量及顺序,其他可视情况更改 -->
<header>
<h2>手机通讯录管理器</h2>
</header>
<form onsubmit="return false;">
<fieldset>
<legend>简易手机通讯录</legend>
姓名：<input type="text" name="name" id="name"> <br>
电话：<input type="text" name="phone" id="phone">
<div class="button-box">
<input type="button" value="添加" onclick="handleAdd()">
<input type="button" value="查询" onclick="handleSearch()">
<input type="button" value="删除" onclick="handleDelete()">
<input type="button" value="重置" onclick="handleReset()">
</div>
<textarea name="content" id="content" cols="35" rows="12" disabled></textarea>
</fieldset>
</form>
<div>
<h2>前端工作室设计 <br>版权所有©,2017-2020</h2>
</div>
</div>
<script>
// 参考:
function loadData() {
$('content').value = "";
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
var phonet = localStorage.key(i);
if (phonet != "web-account" && phonet != "web-guide1") {
var namet = localStorage.getItem(phonet);
$('content').value += namet + " " + phonet + "\n";
}
}
}
}
function $(id) { return document.getElementById(id); }
// 处理添加
function handleAdd() {
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
var reg = /^((?!\?|!|<|>|=|@|'|"|\(|\)).)*$/;
var mes = "";
if (name == "") {
mes += "姓名不能为空！\n";
// return;
} else if (!reg.test(name)) {
mes += "姓名不能含有特殊字符！\n";
}
if (phone == "") {
mes += "电话号码不能为空！\n";
} else if (!reg.test(phone)) {
mes += "电话号码不能含有特殊字符！\n";
}
if (mes != "") {
alert(mes);
return;
}
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
var phone_tmp = localStorage.key(i);
if (phone_tmp == phone) {
if (confirm("是否覆盖，更新旧姓名")) {
localStorage.setItem(phone_tmp, name);
alert("更新成功");
loadData();
return;
} else {
return;
}
}
}
}
localStorage.setItem(phone, name);
handleReset();
handleSearch();
// document.getElementById('content').value += name + " " + phone + "\n";
}
// 处理查询
function handleSearch() {
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
document.getElementById('content').value = "";
var reg = /^((?!\?|!|<|>|=|@|'|"|\(|\)).)*$/;
if(!reg.test(name) || !reg.test(phone))
return;
for (var i = 0; i < localStorage.length; i++) {
var phone_tmp = localStorage.key(i);
if (phone_tmp != "web-account" && phone_tmp != "web-guide1") {
var name_tmp = localStorage.getItem(phone_tmp);
if
(
(name_tmp.search(name) != -1 && phone_tmp.search(phone) != -1) ||
(name_tmp.search(name) != -1 && phone == "") ||
(name == "" && phone_tmp.search(phone) != -1) ||
(name == "" && phone == "")
) {
$('content').value += name_tmp + " " + phone_tmp + "\n";
}
}
}
}
// 处理删除
function handleDelete() {
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
var mes = "";
if (name == "" && phone == "") {
alert("姓名和电话号码不能同时为空！");
return;
}
var phone_list = new Array();
for (var i = 0; i < localStorage.length; i++) {
var phone_tmp = localStorage.key(i);
if (phone_tmp != "web-account" && phone_tmp != "web-guide1") {
var name_tmp = localStorage.getItem(phone_tmp);
if
(
(name_tmp.search(name) != -1 && phone_tmp.search(phone) != -1) ||
(name_tmp.search(name) != -1 && phone == "") ||
(name == "" && phone_tmp.search(phone) != -1) ||
(name == "" && phone == "")
) {
phone_list.push(phone_tmp);
}
}
}
if (phone_list.length >= 2) {
alert("删除的内容匹配多项，删除失败！");
} else if (phone_list.length <= 0) {
alert("未找到符合删除条件的数据！");
} else if (confirm("确定删除吗")) {
localStorage.removeItem(phone_list[0]);
handleReset();
loadData();
}
}
// 处理重置
function handleReset() {
document.getElementById('name').value = "";
document.getElementById('phone').value = "";
document.getElementById('content').value = "";
}
// 页面加载时首先检测并初始化数据
loadData();
// 为了网站校验而需要额外设置的，正常情况下不需要
window.handleAdd = handleAdd;
window.handleSearch = handleSearch;
window.handleDelete = handleDelete;
window.handleReset = handleReset;
</script>
</body>
</html>
- 程序开发学习排行
-
- 1鸿蒙HarmonyOS：Web组件网页白屏检测
- 2HTTPS协议是安全传输，为啥还要再加密？
- 3HarmonyOS鸿蒙应用开发——数据持久化Preferences
- 4记解决MaterialButton背景颜色与设置值不同
- 5鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）
- 6鸿蒙HarmonyOS实战-ArkUI组件（Stack）
- 7鸿蒙HarmonyOS实战-ArkUI组件（GridRow/GridCol）
- 8[Android][NDK][Cmake]一文搞懂Android项目中的Cmake
- 9鸿蒙HarmonyOS实战-ArkUI组件（mediaquery）
- 最近发表
-
- WooCommerce最好的WordPress常用插件下载博客插件模块的相关产品
- 羊驼机器人最好的WordPress常用插件下载博客插件模块
- IP信息记录器最好的WordPress常用插件下载博客插件模块
- Linkly for WooCommerce最好的WordPress常用插件下载博客插件模块
- 元素聚合器Forms最好的WordPress常用插件下载博客插件模块
- Promaker Chat 最好的WordPress通用插件下载 博客插件模块
- 自动更新发布日期最好的WordPress常用插件下载博客插件模块
- WordPress官方最好的获取回复WordPress常用插件下载博客插件模块
- Img to rss最好的wordpress常用插件下载博客插件模块
- WPMozo为Elementor最好的WordPress常用插件下载博客插件模块添加精简版