深圳大学《基于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="https://img-blog.csdnimg.cn/d8474331cfd64236ad776b70516835ba.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:[email protected]
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>2sup>+3x=9 <br>
x<sub>1sub>+x<sub>2sub>=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 95li>
<li>windows 98li>
<li>windows NT
<ul type="disc">
<li>windows NT Workstationli>
<li>windows NT Serverli>
ul>
li>
<li>windows 2000li>
<ul type="disc">
<li>windows 2000 Professionalli>
<li>windows 2000 Serverli>
<li>windows 2000 Advance Serverli>
ul>
<li>windows xpli>
<li>windows vistali>
<li>windows 7li>
<li>windows 8li>
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%" />
<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">在左边浮动框架中打开bilibilia>
<a href="https://blog.csdn.net/" target="right">在右边浮动框架中打开CSDNa>
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="https://img-blog.csdnimg.cn/cd1b44f41c664b91b1342a028d853ccd.jpeg"><img src="https://img-blog.csdnimg.cn/cd1b44f41c664b91b1342a028d853ccd.jpeg" alt="图片未显示"><br>桂林山水1a>li>
<li> <a href="https://img-blog.csdnimg.cn/5e6e73b8c20c49eea4ab4117ac2d1598.jpeg"><img src="https://img-blog.csdnimg.cn/5e6e73b8c20c49eea4ab4117ac2d1598.jpeg" alt="图片未显示"><br>桂林山水2a>li>
<li> <a href="https://img-blog.csdnimg.cn/416704d5f907451da869b1d0182b826c.jpeg"><img src="https://img-blog.csdnimg.cn/416704d5f907451da869b1d0182b826c.jpeg" alt="图片未显示"><br>桂林山水3a>li>
<li> <a href="https://img-blog.csdnimg.cn/2512a28c5c1d47b5a40d47e481f85250.jpeg"><img src="https://img-blog.csdnimg.cn/2512a28c5c1d47b5a40d47e481f85250.jpeg" alt="图片未显示"><br>桂林山水4a>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="https://img-blog.csdnimg.cn/a4eb949722164bf483cc2d38aee2d0db.png">PNG，图像文件存储格式，其目的是试图(原来此处使用了"企图")替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。
p>
<h3>
已设置对齐方式的图像：
h3>
<p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。<img src="https://img-blog.csdnimg.cn/a4eb949722164bf483cc2d38aee2d0db.png"
align="bottom">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用合适的预测而造成过分臃肿的PNG文件。p>
<p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。<img src="https://img-blog.csdnimg.cn/a4eb949722164bf483cc2d38aee2d0db.png"
align="middle">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用合适的预测而造成过分臃肿的PNG文件。p>
<p><img src="https://img-blog.csdnimg.cn/a4eb949722164bf483cc2d38aee2d0db.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="https://img-blog.csdnimg.cn/173cb4a247344102924fe6713538310d.jpeg" alt="图片未显示">li>
<li><img src="https://img-blog.csdnimg.cn/1c09a12e314748f2bfc6f690f7ce37b7.jpeg" alt="图片未显示">li>
<li><img src="https://img-blog.csdnimg.cn/a01046f13fe1482699f77ad87f8ddece.jpeg" alt="图片未显示">li>
<li><img src="https://img-blog.csdnimg.cn/63e5327905f8483b9006e6e71b4313c5.jpeg" alt="图片未显示">li>
<li><img src="https://img-blog.csdnimg.cn/908e471f41394c21bd6ef87d48a4dfa2.jpeg" 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">
<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">logodiv>
<div class="nav">navdiv>
div>
<div class="Content">
<div class="Content-left">Content-leftdiv>
<div class="Content-center-left">Content-center-leftdiv>
<div class="Content-center-right">Content-center-rightdiv>
<div class="Content-right">Content-rightdiv>
div>
<div class="Footer">Footerdiv>
div>
body>
html>
HEAD LINE
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Head Linetitle>
<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 Lineh1>
<div>
<img src="https://img-blog.csdnimg.cn/676e7f5638234a7696dda2b821491618.jpeg" alt="图片无法显示">
<p>Mobile
Widget使用的标准的Web技术，如HTML, CSS, javascript等。这些经典的Web技术规范是由W3C（万维网联盟）
的下属各个工作组指定并推进的。作为开发Widget之前的知识准备，在本章中我们将逐一介绍这些技术。p>
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="https://img-blog.csdnimg.cn/696bcdb56bc0430cb8433d16645804fd.jpeg" 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="https://img-blog.csdnimg.cn/2f6dc3a5e9f94c68ac70c0a03c9107f8.jpeg" 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(https://img-blog.csdnimg.cn/a76a2b5d48204bf6af3bfde5b6a3ad9e.jpeg);
background-repeat: no-repeat;
background-position: center;
background-color: #77A;
float: left;
}
#text {
background-image: url(https://img-blog.csdnimg.cn/a76a2b5d48204bf6af3bfde5b6a3ad9e.jpeg);
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="https://img-blog.csdnimg.cn/d9b456ef404a43628989fae0644d862a.png">img>
<div class="output">div>
<div id="ops">
<table cellspacing="30">
<tr align="center">
<td>1td>
<td>2td>
<td>3td>
<td>+td>
tr>
<tr align="center">
<td>4td>
<td>5td>
<td>6td>
<td>-td>
tr>
<tr align="center">
<td>7td>
<td>8td>
<td>9td>
<td>*td>
tr>
<tr align="center">
<td>0td>
<td>=td>
<td>CEtd>
<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>1td>
<td rowspan="2">2td>
<td>
<table align="center" id="subtable1">
<tr>
<td>atd>
<td rowspan="2">btd>
<td>ctd>
tr>
<tr>
<td>dtd>
<td>ftd>
tr>
<tr>
<td>gtd>
<td>htd>
<td>itd>
tr>
table>
td>
tr>
<tr>
<td>
<table align="center" id="subtable2">
<tr>
<td>atd>
<td colspan="2">btd>
tr>
<tr>
<td>dtd>
<td>etd>
<td>ftd>
tr>
<tr>
<td>gtd>
<td>htd>
<td>itd>
tr>
table>
td>
<td>6td>
tr>
<tr>
<td>7td>
<td>8td>
<td>9td>
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>
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 CONNECTtitle>
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="https://img-blog.csdnimg.cn/59864bf3d3f646f891d2473a986cee37.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("九九乘法表
");
// write your code here
// ...
// document.write("");
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("
");
}
// document.write("");
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("找出1000-9999之间能够被17和13同时整除的整数的个数及累加和
");
document.write("区间中符合条件的数有(输出格式：10个1行):
");
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("
");
}
}
}
document.write("
");
document.write("区间中符合条件的数共有"+cnt+"个
");
document.write("区间中符合条件的数的累加和为"+sum+"
");
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>
<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">
<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-2020h2>
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">
<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-2020h2>
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>