博客

深圳大学《基于Web的编程》实验参考代码

  • Post author:
  • Post category:其他


实验题均来自

储久良老师编著的《Web前端开发技术——HTML5、CSS3、JavaScript（第三版）》

，深圳大学将其作为课程《基于Web的程序设计》实验题使用。现给出本人修读该课程期间编写的代码作为学习的参考。如有批评意见，请在评论区指出。

实验过程中的图片等资源可能用到网络路径。如果这些链接失效，更新路径或自建本地路径即可。

目录



实验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: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="https://img-blog.csdnimg.cn/cd1b44f41c664b91b1342a028d853ccd.jpeg"><img src="https://img-blog.csdnimg.cn/cd1b44f41c664b91b1342a028d853ccd.jpeg" alt="图片未显示"><br>桂林山水1</a></li>
    <li> <a href="https://img-blog.csdnimg.cn/5e6e73b8c20c49eea4ab4117ac2d1598.jpeg"><img src="https://img-blog.csdnimg.cn/5e6e73b8c20c49eea4ab4117ac2d1598.jpeg" alt="图片未显示"><br>桂林山水2</a></li>
    <li> <a href="https://img-blog.csdnimg.cn/416704d5f907451da869b1d0182b826c.jpeg"><img src="https://img-blog.csdnimg.cn/416704d5f907451da869b1d0182b826c.jpeg" alt="图片未显示"><br>桂林山水3</a></li>
    <li> <a href="https://img-blog.csdnimg.cn/2512a28c5c1d47b5a40d47e481f85250.jpeg"><img src="https://img-blog.csdnimg.cn/2512a28c5c1d47b5a40d47e481f85250.jpeg" 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="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">
    <!-- <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>海纳百川&nbsp;&nbsp;有容乃大</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&nbsp;Line</h1>
    <div>
        <!-- <span> -->
            <img src="https://img-blog.csdnimg.cn/676e7f5638234a7696dda2b821491618.jpeg" 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="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>欢&thinsp;&thinsp;度&thinsp;&thinsp;新&thinsp;&thinsp;春&thinsp;&thinsp;佳&thinsp;&thinsp;节</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前端开发工作室&copy; 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>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">管理员&nbsp
                        <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="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&nbsp;CONNECT这样的旗舰大会。华为希望通过构筑平台开放能力，最终释放整个ICT产业的生产力、推进社会进步。
                </p>
                <p>关于本次大会的定位，徐文伟也表示："华为认为作为一场旗舰大会应该拥有行业最前沿的内容，能吸引各类型、各层级的行业领袖和精英参会，成为企业高层商业与战略的交流平台。”</p>
                <p>同时，徐文伟指出：“在这次HUAWEI
                    CONNECT全联接大会上，华为将系统阐述华为业务战略方向、关键举措和实践，分享行业最前瞻的洞察，为行业领袖和精英提供一个商业与战略对话平台，全方位构建华为的行业领导力。华为将这次大会打造成一次生态大会，与客户、合作伙伴、产业组织、开发者共同引领并推动产业发展，发布创新领先的ICT产品与解决方案。”
                </p>
            </div>
        </header>
        <footer>
            <h3><strong>标签：华为，云计算&nbsp;&nbsp;&nbsp;it168网站原创 &copy;2016-08-26 &nbsp;</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>版权所有&copy;,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>版权所有&copy;,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>


版权声明：本文为weixin_46655675原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。