0
0

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

实验题均来自储久良老师编著的《Web前端开发技术——HTML5、CSS3、JavaScript（第三版）》，深圳大学将其作为课程《基于Web的程序设计》实验题使用。现给出本人修读该课程期间编写的代码作为学习的参考。如有批评意见，请在评论区指出。
实验过程中的图片等资源可能用到网络路径。如果这些链接失效，更新路径或自建本地路径即可。

目录

实验1

求知家园

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>求知家园</title><styletype="text/css">body{background-color:#99FFFF;}p{color: blue;}</style></head><body><p>欢迎来到我们的求知家园！</p><hrsize="5"color="#FF3333"width="100%"/></body></html>

Google搜索

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Google搜索</title></head><bodystyle="background-color:#FFFF33;"><p>欢迎使用Google搜索！</p><ahref="https://www.google.com/"><imgsrc="https://img-blog.csdnimg.cn/d8474331cfd64236ad776b70516835ba.png"width="275"height="95"border="0"alt=""></a><hrsize="5"color="#0033FF"width="100%"/></body></html>

实验2

自荐信

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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><divclass="title">自荐信</div><hrsize=1pxcolor="#000FFF"width="100%"><div>尊敬的领导：</div><divclass="indent">您好！</div><br><divclass="indent">感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！</div><br><divclass="indent">
        我是计算机专业的本科毕业生。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。
    </div><br><divclass="indent">此致</div><div>敬礼!</div><hrsize=1pxcolor="#00FFFF"width="100%"><divclass="footnote">
        联系E-mail:[email protected]
    </div></body></html>

数学方程式

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>数学方程式</title><styletype="text/css">h3{font-size:24px;color:red;text-align:center;}</style></head><body><h3>数学方程式</h3><hrsize="2px"color="blue"width="80%"/><palign="center">
    2x<sup>2</sup>+3x=9 <br>
    x<sub>1</sub>+x<sub>2</sub>=10
</p></body></html>

第四届中国大学出版社图书奖公示

<!DOCTYPEhtml><html><head><metacharset="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不同版本

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>windows不同版本</title></head><body><ol><li>windows 95</li><li>windows 98</li><li>windows NT
            <ultype="disc"><li>windows NT Workstation</li><li>windows NT Server</li></ul></li><li>windows 2000</li><ultype="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网站

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>apple网站</title><styletype="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><hrsize="3px"color="#00ff00"width="100%"/><!-- todo: 图片大小等似有问题，必须处理之。 --><ul><li><ahref="http://www.apple.com.cn/iphone"><imgsrc="https://source.acexy.cn/view/YPVkPSA"alt="图片未显示"></a></li><li><ahref="http://www.apple.com.cn/iphone"><imgsrc="https://source.acexy.cn/view/YPVkedY"alt="图片未显示"></a></li><li><ahref="http://www.apple.com.cn/macbook-pro"><imgsrc="https://source.acexy.cn/view/YPVkSTv"alt="图片未显示"></a></li><li><ahref="http://www.apple.com.cn/supplierresponsibility"><imgsrc="https://source.acexy.cn/view/YPVkQpI"alt="图片未显示"></a></li></ul><hrsize="3px"color="#00ff00"width="100%"/></body></html>

浮动框架中打开新页面

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>浮动框架中打开新页面</title><styletype="text/css">body{text-align: center;}iframe{width: 350px;height: 250px;}</style></head><h2>
    浮动框架中打开新页面
</h2><iframesrc="http://www.pku.edu.cn"name="left"></iframe><iframesrc="https://www1.szu.edu.cn/"name="right"></iframe><p><ahref="https://www.bilibili.com/"target="left">在左边浮动框架中打开bilibili</a><ahref="https://blog.csdn.net/"target="right">在右边浮动框架中打开CSDN</a></p></body></html>

桂林山水

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>桂林山水</title><styletype="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><ahref="https://img-blog.csdnimg.cn/cd1b44f41c664b91b1342a028d853ccd.jpeg"><imgsrc="https://img-blog.csdnimg.cn/cd1b44f41c664b91b1342a028d853ccd.jpeg"alt="图片未显示"><br>桂林山水1</a></li><li><ahref="https://img-blog.csdnimg.cn/5e6e73b8c20c49eea4ab4117ac2d1598.jpeg"><imgsrc="https://img-blog.csdnimg.cn/5e6e73b8c20c49eea4ab4117ac2d1598.jpeg"alt="图片未显示"><br>桂林山水2</a></li><li><ahref="https://img-blog.csdnimg.cn/416704d5f907451da869b1d0182b826c.jpeg"><imgsrc="https://img-blog.csdnimg.cn/416704d5f907451da869b1d0182b826c.jpeg"alt="图片未显示"><br>桂林山水3</a></li><li><ahref="https://img-blog.csdnimg.cn/2512a28c5c1d47b5a40d47e481f85250.jpeg"><imgsrc="https://img-blog.csdnimg.cn/2512a28c5c1d47b5a40d47e481f85250.jpeg"alt="图片未显示"><br>桂林山水4</a></li></ul></body></html>

图像对齐方式应用

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>图像对齐方式应用</title><styletype="text/css">h2{text-align: center;}</style></head><h2>
  图像对齐方式应用
</h2><hrsize="2px"color="red"width="100%"/><h3>
  未设置对齐方式的图像：
</h3><p><imgsrc="https://img-blog.csdnimg.cn/a4eb949722164bf483cc2d38aee2d0db.png">PNG，图像文件存储格式，其目的是试图(原来此处使用了"企图")替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。
</p><h3>
  已设置对齐方式的图像：
</h3><p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。<imgsrc="https://img-blog.csdnimg.cn/a4eb949722164bf483cc2d38aee2d0db.png"align="bottom">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用合适的预测而造成过分臃肿的PNG文件。</p><p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。<imgsrc="https://img-blog.csdnimg.cn/a4eb949722164bf483cc2d38aee2d0db.png"align="middle">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用合适的预测而造成过分臃肿的PNG文件。</p><p><imgsrc="https://img-blog.csdnimg.cn/a4eb949722164bf483cc2d38aee2d0db.png"align="left">PNG使用了从LZ77派生的一个非专利无失真式压缩算法（名为deflation）。这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用合适的预测而造成过分臃肿的PNG文件。
</p></body></html>

图像画廊

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>图像画廊</title><styletype="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><hrsize="5"color="#00ff00"width="100%"/><marqueebehavior="alternate"><ul><li><imgsrc="https://img-blog.csdnimg.cn/173cb4a247344102924fe6713538310d.jpeg"alt="图片未显示"></li><li><imgsrc="https://img-blog.csdnimg.cn/1c09a12e314748f2bfc6f690f7ce37b7.jpeg"alt="图片未显示"></li><li><imgsrc="https://img-blog.csdnimg.cn/a01046f13fe1482699f77ad87f8ddece.jpeg"alt="图片未显示"></li><li><imgsrc="https://img-blog.csdnimg.cn/63e5327905f8483b9006e6e71b4313c5.jpeg"alt="图片未显示"></li><li><imgsrc="https://img-blog.csdnimg.cn/908e471f41394c21bd6ef87d48a4dfa2.jpeg"alt="图片未显示"></li></ul></marquee><hrsize="5"color="#00ff00"width="100%"/></body></html>

实验4

title新闻

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>
        title新闻
    </title><styletype="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><divclass="mydiv"><imgsrc="https://source.acexy.cn/view/YPFg5qJ"><divclass="mysubdiv"><ul><li>2017<spanclass="red">央视</span>综艺节目发力 彰显公益大爱</li><li>继北京、上海后，2017年<spanclass="red">腾讯</span>视频推介会昨又在广州隆重举行</li><li>“<spanclass="red">跨界融合 开放共赢</span>”移动互联网营销峰会</li><li>首届<spanclass="it">“联建杯”</span>户外LED显示屏媒体大赛评审圆满落幕</li></ul></div></div></body></html>

web前端开发工程师的工作内容

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Web前端开发工程师工作内容</title><styletype="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><liid="ul0">做网站设计、网页界面开发</li><liid="ul1">做网页界面开发</li><liid="ul2">做网页界面开发、前台数据绑定和前台逻辑的处理</li><liid="ul3">设计、开发、数据处理</li></ul></body></html>

古诗排版

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>
        古诗排版
    </title><styletype="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><pclass="id1">朝辞白帝彩云间，
    <pclass="id2">千里江陵一日还。
    <pid="id3">两岸猿声啼不住，
    <pid="id4">轻舟已过万重山。
</body></html>

牌匾设计

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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><divid="div0"><div><p>海纳百川&nbsp;&nbsp;有容乃大</p></div></div></body></html>

实验5

DIV+CSS

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>DIV+CSS布局</title></head><styletype="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><divclass="Container"><divclass="Header"><divclass="logo">logo</div><divclass="nav">nav</div></div><divclass="Content"><divclass="Content-left">Content-left</div><divclass="Content-center-left">Content-center-left</div><divclass="Content-center-right">Content-center-right</div><divclass="Content-right">Content-right</div></div><divclass="Footer">Footer</div></div></body></html>

HEAD LINE

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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> --><imgsrc="https://img-blog.csdnimg.cn/676e7f5638234a7696dda2b821491618.jpeg"alt="图片无法显示"><p>Mobile
            Widget使用的标准的Web技术，如HTML, CSS, javascript等。这些经典的Web技术规范是由W3C（万维网联盟）
            的下属各个工作组指定并推进的。作为开发Widget之前的知识准备，在本章中我们将逐一介绍这些技术。</p><!-- </span> --></div></body></html>

欢度春节

<!doctypehtml><htmllang="en"><head><metacharset="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><divid="Container"><divid="Header"><imgsrc="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><divid="PageBody"><divid="SideBar"><ul><li><ahref="#">首页</a></li><li><ahref="#">博客</a></li><li><ahref="#">设计</a></li><li><ahref="#">论坛</a></li><li><ahref="#">关于</a></li></ul></div><divid="MainBody"><h3>欢&thinsp;&thinsp;度&thinsp;&thinsp;新&thinsp;&thinsp;春&thinsp;&thinsp;佳&thinsp;&thinsp;节</h3><imgsrc="https://img-blog.csdnimg.cn/2f6dc3a5e9f94c68ac70c0a03c9107f8.jpeg"width="694"height="308"alt="图片无法显示"></div></div><divid="Footer"><p>Copyrights 2015-2020 Web前端开发工作室&copy; All rights reserved. 中国江苏</p></div></div></body></html>

木兰花令

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>木兰花令</title><styletype="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><divid="wrap"><divid="pic"></div><divid="text"><divid="title">木兰花令.拟古决绝词</div><divid="author">纳兰性德</div><divid="content"><p>人生若只如初见，</p><p>何事秋风悲画扇。</p><p>等闲变却故人心，</p><p>却道故心人易变。</p><p>骊山语罢清宵半，</p><p>泪雨霖铃终不怨。</p><p>何如薄幸锦衣郎，</p><p>比翼连枝当日愿。</p></div></div></div></body></html>

实验6

CASIO计算器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CASIO计算器</title><styletype="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><divid="wrap"><imgsrc="https://img-blog.csdnimg.cn/d9b456ef404a43628989fae0644d862a.png"></img><divclass="output"></div><divid="ops"><tablecellspacing="30"><tralign="center"><td>1</td><td>2</td><td>3</td><td>+</td></tr><tralign="center"><td>4</td><td>5</td><td>6</td><td>-</td></tr><tralign="center"><td>7</td><td>8</td><td>9</td><td>*</td></tr><tralign="center"><td>0</td><td>=</td><td>CE</td><td>/</td></tr></table></div></div></body></html>

表格实验

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>表格实验</title><styletype="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><tablewidth="300"align="center"cellspacing="0"cellpadding="0"><tr><td>1</td><tdrowspan="2">2</td><td><tablealign="center"id="subtable1"><tr><td>a</td><tdrowspan="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><tablealign="center"id="subtable2"><tr><td>a</td><tdcolspan="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>

登录界面

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><fieldsetclass="box"><legendclass="align-left">登录页面</legend><div><label> 用户名:</label><inputtype="text"class="input"></div><div><label>密码: </label><inputtype="password"class="input"></div><divstyle="display: flex;"><div><label>类型: </label></div><divclass="cbox"><divclass="subbox"><inputtype="radio">管理员&nbsp
                        <inputtype="checkbox">记住密码
                    </div><divclass="subbox"><inputtype="radio">普通用户
                        <inputtype="checkbox">自动登录
                    </div></div></div><button>提交</button><button>重置</button></fieldset></form></body></html>

应聘页面

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><inputtype="text"class="salary"><inputtype="checkbox"name="auto"value="false">要求提供过渡住房<br/><b>请选择应聘行业：</b><br/><divclass="box"><optionclass="it">计算机软件 </option><optionclass="it">计算机硬件</option><optionclass="it"id="checked">计算机服务</option><optionclass="it"id="checked">通信/电信/网络设备</option><optionclass="it"id="checked">互联网/电子商务</option><optionclass="it">网络游戏</option><optionclass="it">电子技术/半导体/集成电路</option><optionclass="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动画-沿矩阵边框运动

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><figurestyle="text-align:center;"><imgsrc="https://img-blog.csdnimg.cn/59864bf3d3f646f891d2473a986cee37.png"width="450"alt="图片无法显示"><br><figcaption>▲华为常务董事、战略Marketing总裁徐文伟</figcaption></figure><divclass="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

九九乘法表

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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>

找出符合条件的数

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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位数

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>随机产生20个4位整数</title></head><body><div><textareaname="num-area"id="num-area"cols="50"rows="10"></textarea></div><div><buttonid="random-btn"onclick="rand();">随机产生20个整数</button><buttonid="divide-btn"onclick="find();">找出能被5整除的整数</button><buttonid="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 =newArray(20);function$(id){return document.getElementById(id);}functionreset(){$("num-area").value ="";
            flag =0;}
        window.reset = reset;functionrand(){$("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;functionfind(){if(flag ==1){var array_tmp =newArray();
                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>

用户登录

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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：禁止页面跳转 --><formonsubmit="returnfalse;"><fieldset><legend><h2>用户登录</h2></legend><divclass="table-box"><table><tr><td><span>用户名</span></td><td><inputtype="text"id="username"></td></tr><tr><td><span>密 码</span></td><td><inputtype="password"id="password"></td></tr></table></div><divclass="button-box"><inputid="submit"type="submit"value="提交"onclick="submit1()"><inputid="reset"type="reset"value="重置"onclick="returnreset1()"></div></fieldset></form><script>// write your code herefunction$(id){return document.getElementById(id);}functionsubmit1(){var username =$("username").value;var password =$("password").value;var flag =0;var msg ="";if(username ==""){// alert("用户名不可为空！");
                msg +="用户名不可为空！\n";$("username").focus();
                flag =1;}elseif(username.length <8){// alert("用户名过短，至少需要8个字符！");
                msg +="用户名过短，至少需要8个字符！\n"$("username").focus();
                flag =1;}elseif(username.length >20){// alert("用户名过长，最多20个字符！");
                msg +="用户名过长，最多20个字符！\n";$("username").focus();
                flag =1;}if(password ==""){// alert("密码不可为空！");
                msg +="密码不可为空！\n";if(!flag)$("password").focus();}elseif(password.length <8){// alert("密码过短，至少需要8个字符！");
                msg +="密码过短，至少需要8个字符！\n";if(!flag)$("password").focus();}elseif(password.length >20){// alert("密码过长，最多20个字符！");
                msg +="密码过长，最多20个字符！\n";if(!flag)$("password").focus();}if(msg.length)alert(msg);}
        window.submit1 = submit1;functionreset1(){returnconfirm("数据将被清空");// $("username").value = "";// $("password").value = "";}
        window.reset1 = reset1;</script></body></html>

实验10

该实验经过需求细化，要求支持模糊匹配，并初步保证在一些特殊样例（包括注入攻击）下的鲁棒性。

手机通讯录管理器（indexedDB)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="container"><!-- 请勿改动id、button数量及顺序,其他可视情况更改 --><header><h2>手机通讯录管理器</h2></header><formonsubmit="returnfalse;"><fieldset><legend>简易手机通讯录</legend>
                姓名：<inputtype="text"name="name"id="name"><br>
                电话：<inputtype="text"name="phone"id="phone"><divclass="button-box"><inputtype="button"value="添加"onclick="handleAdd()"><inputtype="button"value="查询"onclick="handleSearch()"><inputtype="button"value="删除"onclick="handleDelete()"><inputtype="button"value="重置"onclick="handleReset()"></div><textareaname="content"id="content"cols="35"rows="12"disabled></textarea></fieldset></form><div><h2>前端工作室设计 <br>版权所有&copy;,2017-2020</h2></div></div><script>// 参考如下：// 创建数据库functioncreateDB(){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();}// 处理添加functionhandleAdd(){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;}elseif(!reg.test(name)){
                    mes +="姓名中不得含有特殊符号！\n";}if(phone =="")
                    mes +="电话号码不能为空！\n";elseif(!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();}}}}// 处理查询functionhandleSearch(){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();}}}}// 处理删除functionhandleDelete(){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 =newArray();
                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;}elseif(cursor_list.length ==0){alert("未找到待删除信息！");return;}else{
                            objectStore.delete(cursor_list[0]);alert("删除成功！\n");handleReset();handleSearch();}}}}}// 处理重置functionhandleReset(){
            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）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="container"><!-- 请勿改动id、button数量及顺序,其他可视情况更改 --><header><h2>手机通讯录管理器</h2></header><formonsubmit="returnfalse;"><fieldset><legend>简易手机通讯录</legend>
                姓名：<inputtype="text"name="name"id="name"><br>
                电话：<inputtype="text"name="phone"id="phone"><divclass="button-box"><inputtype="button"value="添加"onclick="handleAdd()"><inputtype="button"value="查询"onclick="handleSearch()"><inputtype="button"value="删除"onclick="handleDelete()"><inputtype="button"value="重置"onclick="handleReset()"></div><textareaname="content"id="content"cols="35"rows="12"disabled></textarea></fieldset></form><div><h2>前端工作室设计 <br>版权所有&copy;,2017-2020</h2></div></div><script>// 参考:functionloadData(){$('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);}// 处理添加functionhandleAdd(){var name = document.getElementById('name').value;var phone = document.getElementById('phone').value;var reg =/^((?!\?|!|<|>|=|@|'|"|\(|\)).)*$/;var mes ="";if(name ==""){
                mes +="姓名不能为空！\n";// return;}elseif(!reg.test(name)){
                mes +="姓名不能含有特殊字符！\n";}if(phone ==""){
                mes +="电话号码不能为空！\n";}elseif(!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";}// 处理查询functionhandleSearch(){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";}}}}// 处理删除functionhandleDelete(){var name = document.getElementById('name').value;var phone = document.getElementById('phone').value;var mes ="";if(name ==""&& phone ==""){alert("姓名和电话号码不能同时为空！");return;}var phone_list =newArray();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("删除的内容匹配多项，删除失败！");}elseif(phone_list.length <=0){alert("未找到符合删除条件的数据！");}elseif(confirm("确定删除吗")){
                localStorage.removeItem(phone_list[0]);handleReset();loadData();}}// 处理重置functionhandleReset(){
            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>
标签： 前端
本文转载自: https://blog.csdn.net/weixin_46655675/article/details/128337772
版权归原作者 曹无悔 所有， 如有侵权，请联系我们删除。
登录后发布评论

“深圳大学《基于Web的编程》实验参考代码”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航