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

目录

  • 实验1
    • 求知家园
    • Google搜索
  • 实验2
    • 自荐信
    • 数学方程式
    • 第四届中国大学出版社图书奖公示
    • windows不同版本
  • 实验3
    • apple网站
    • 浮动框架中打开新页面
    • 桂林山水
    • 图像对齐方式应用
    • 图像画廊
  • 实验4
    • title新闻
    • web前端开发工程师的工作内容
    • 古诗排版
    • 牌匾设计
  • 实验5
    • DIV+CSS
    • HEAD LINE
    • 欢度春节
    • 木兰花令
  • 实验6
    • CASIO计算器
    • 表格实验
    • 登录界面
    • 应聘页面
  • 实验7
    • CSS3动画-沿矩阵边框运动
    • HUAWEI CONNECT
  • 实验8
    • 九九乘法表
    • 找出符合条件的数
  • 实验9
    • 随机产生20个4位数
    • 用户登录
  • 实验10
    • 手机通讯录管理器（indexedDB)
    • 手机通讯录管理器（localStorage）

实验1

求知家园

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

Google搜索

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Google搜索</title> </head><body style="background-color:#FFFF33;"><p>欢迎使用Google搜索！</p><a href="https://www.google.com/"><img src="https://img-blog.csdnimg.cn/d8474331cfd64236ad776b70516835ba.png" width="275" height="95" border="0" alt=""> </a><hr size="5" color="#0033FF" width="100%"/></body></html>

实验2

自荐信

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>自荐信</title><style>.title {font-weight: 400;text-align: center;}.indent {text-indent: 1em;}.footnote {font-style: italic;text-align: center;}</style></head><body><div class="title">自荐信</div><hr size=1px color="#000FFF" width="100%"><div>尊敬的领导：</div><div class="indent">您好！</div><br><div class="indent">感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！</div><br><div class="indent">我是计算机专业的本科毕业生。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。</div><br><div class="indent">此致</div><div>敬礼!</div><hr size=1px color="#00FFFF" width="100%"><div class="footnote">联系E-mail: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%" /><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"><!--  --><!--  --><title>匾牌设计</title><style>#div0 {width: 800px;height: 100px;border: 20px outset red;list-style: outside;/* color: #ff0000; */padding: 20px;margin: 100px;/* position: absolute;z-index: 0; */text-align: center;/* background:#efedee; */}p {font: italic bolder 70px/1.5em 隶书;/* weight: *//* line-height: 1.5%; *//* font-family: ""; */text-align: center;/* font-size: 70px; *//* color: black; */background-color: #efedee;/* margin-top: 0%;margin-bottom: 0%;margin-left: 0%;margin-right: 0%; */margin: 0%;}body {/* text-align: center; */align-content: center;}</style></head><body><div id="div0"><div><p>海纳百川有容乃大</p></div></div></body></html>

实验5

DIV+CSS

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DIV+CSS布局</title></head><style type="text/css">* {font: 24px/1.5em 黑体;margin: 0 auto;padding: 0px;/* float: top; */}.Container {width: 1006px;margin: 0 auto;}.Header {height: 120px;background: #093;}.logo {height: 80px;background: #5f5;border-bottom: 2px solid white;}.nav {height: 40px;background: #3f5;border-bottom: 2px solid white;}.Content {width: 100%;height: 400px;background: #00EEFF;}.Content-left {height: 400px;width: 250px;float: left;background: #66ff66;border-right: 2px solid white;border-top:2px solid white;border-bottom: 2px solid white;}.Content-center-left {height: 400px;width: 250px;float: left;background: #77ff66;border-right: 2px solid white;border-top:2px solid white;border-bottom: 2px solid white;}.Content-center-right {height: 400px;width: 250px;float: left;background: #88ffDD;border-right: 2px solid white;border-top:2px solid white;border-bottom: 2px solid white;}.Content-right {height: 400px;width: 250px;float: left;background: #99ff66;border-top:2px solid white;border-bottom: 2px solid white;}.Footer {height: 40px;background: #6FC;border-top: 2px solid white;}</style><body><div class="Container"><div class="Header"><div class="logo">logo</div><div class="nav">nav</div></div><div class="Content"><div class="Content-left">Content-left</div><div class="Content-center-left">Content-center-left</div><div class="Content-center-right">Content-center-right</div><div class="Content-right">Content-right</div></div><div class="Footer">Footer</div></div></body></html>

HEAD LINE

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

欢度春节

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>欢度春节</title><style>body {font-size: 16px;margin: 0;text-align: center;font-family: "Courier New";}h4 {float: left;margin: 45px auto;padding-left: 50px;}p {margin: 2px;font-size: 14px;}span {margin-top: 45px;width: 50px;height: 30px;font-size: 20px;padding: 45px 10px;vertical-align: middle;text-align: center;}a {width: 48px;height: 24px;font-size: 20px;text-align: center;}ul {list-style-type: none;margin: 0px;padding: 35px;text-align: center;}li {width: 50px;height: 30px;font-size: 20px;padding: 10px 35px;}h3 {text-align: center;line-height: 0px;color: red;font-size: 24px;background: #CFF000;}h4 {font-family: "宋体";font-weight: bold;}a:link,a:visited,a:active {text-decoration: none;display: block;}a:hover {border-bottom: 2px solid #FF0000;background: #55A0FF;color: #FFFFFF;}#PageBody {height: 380px;border-bottom: 5px solid #FFFFFF;}#SideBar {float: left;width: 200px;height: 380px;background: #Dff100;text-align: center;padding: 50px auto;border-right: 5px solid #FFFFFF;font-family: "宋体";}ul li a {color: #1E08EC;}#MainBody {float: right;width: 695px;height: 380px;background: #cff000;}#Footer {height: 60px;background-color: rgb(230, 230, 230);text-align: center;font-size: 12px;padding-top: 10px;}#Container {margin: 0 auto;width: 900px;}#Header {height: 118px;border-bottom: 5px;background-color: rgb(230, 230, 230);border-bottom: 5px solid #FFFFFF;}#Header img {float: left;}</style></head><body><div id="Container"><div id="Header"><img src="https://img-blog.csdnimg.cn/696bcdb56bc0430cb8433d16645804fd.jpeg" height="118px" alt="图片无法显示"><h4><span>首页</span><span>|</span><span>博客</span><span>|</span><span>设计</span><span>|</span><span>论坛</span><span>|</span><span>关于</span></h4></div><div id="PageBody"><div id="SideBar"><ul><li><a href="#">首页</a></li><li><a href="#">博客</a></li><li><a href="#">设计</a></li><li><a href="#">论坛</a></li><li><a href="#">关于</a></li></ul></div><div id="MainBody"><h3>欢  度  新  春  佳  节</h3><img src="https://img-blog.csdnimg.cn/2f6dc3a5e9f94c68ac70c0a03c9107f8.jpeg" width="694" height="308"alt="图片无法显示"></div></div><div id="Footer"><p>Copyrights 2015-2020 Web前端开发工作室© All rights reserved. 中国江苏</p></div></div></body></html>

木兰花令

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>木兰花令</title><style type="text/css">div {text-align: center;}#wrap {width: 900px;height: 520px;margin: 0 auto;border: 2px red solid;margin-top: 5px;}#pic {width: 420px;height: 300px;background-image: url(https://img-blog.csdnimg.cn/a76a2b5d48204bf6af3bfde5b6a3ad9e.jpeg);background-repeat: no-repeat;background-position: center;background-color: #77A;float: left;}#text {background-image: url(https://img-blog.csdnimg.cn/a76a2b5d48204bf6af3bfde5b6a3ad9e.jpeg);width: 420px;height: 500px;background-color: #77A;padding: 10px;font-weight: bold;float: right;}#title {font-family: 华文彩云;font-size: 32px;}#author {font-size: 12px;font-family: 黑体;text-align: right;margin-bottom: 24px;}p {font-family: 隶书;font-size: 24px;margin: 2px;letter-spacing: 0.5em;line-height: 1.5em;text-align: center;}</style></head><body><div id="wrap"><div id="pic"></div><div id="text"><div id="title">木兰花令.拟古决绝词</div><div id="author">纳兰性德</div><div id="content"><p>人生若只如初见，</p><p>何事秋风悲画扇。</p><p>等闲变却故人心，</p><p>却道故心人易变。</p><p>骊山语罢清宵半，</p><p>泪雨霖铃终不怨。</p><p>何如薄幸锦衣郎，</p><p>比翼连枝当日愿。</p></div></div></div></body></html>

实验6

CASIO计算器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CASIO计算器</title><style type="text/css">.output {height: 60px;width: 390px;border: solid 1.5px;z-index: 1;position: absolute;top: 50px;left: 20px;background-color: white;}#wrap {width: 420px;height: 460px;background-color: rgb(230, 230, 130);/* border: solid 1.5px; */z-index: 0;position: absolute;}#ops {height: 330px;width: 390px;border: 1px;z-index: 1;position: absolute;top: 115px;left: 20px;border: solid 1.5px;border-color: grey blackblack 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><!-- 苹果香蕉橘子 --></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(华为开发者大会)等。第三个阶段，华为开始筹划组织HUAWEICONNECT这样的旗舰大会。华为希望通过构筑平台开放能力，最终释放整个ICT产业的生产力、推进社会进步。</p><p>关于本次大会的定位，徐文伟也表示："华为认为作为一场旗舰大会应该拥有行业最前沿的内容，能吸引各类型、各层级的行业领袖和精英参会，成为企业高层商业与战略的交流平台。”</p><p>同时，徐文伟指出：“在这次HUAWEICONNECT全联接大会上，华为将系统阐述华为业务战略方向、关键举措和实践，分享行业最前瞻的洞察，为行业领袖和精英提供一个商业与战略对话平台，全方位构建华为的行业领导力。华为将这次大会打造成一次生态大会，与客户、合作伙伴、产业组织、开发者共同引领并推动产业发展，发布创新领先的ICT产品与解决方案。”</p></div></header><footer><h3><strong>标签：华为，云计算it168网站原创 ©2016-08-26 </strong></h3></footer></article></body></html>

实验8

九九乘法表

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>九九乘法表</title></head><body><script>document.write("
九九乘法表
");// write your code here// ...// document.write("
");for (let i = 1; i <= 9; i++) {for (let j = 1; j <= 9; j++) {if (i >= j)document.write(j + "*" + i + "=" + j * i + " ");}document.write("
");}// document.write("
");</script></body></html>

找出符合条件的数

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>找出符合条件的数</title></head><body><script>// write your code heredocument.write("
找出1000-9999之间能够被17和13同时整除的整数的个数及累加和
");document.write("区间中符合条件的数有(输出格式：10个1行):
");var cnt = 0;var sum = 0;for (let i = 1000; i <= 9999; i++) {if (i % 221 == 0) {document.write(i);cnt++;sum += i;if (cnt % 10 != 0) {document.write(" ");} else {document.write("
");}}}document.write("
");document.write("区间中符合条件的数共有"+cnt+"个
");document.write("区间中符合条件的数的累加和为"+sum+"
");</script></body></html>

实验9

随机产生20个4位数

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机产生20个4位整数</title></head><body><div><textarea name="num-area" id="num-area" cols="50" rows="10"></textarea></div><div><button id="random-btn" onclick="rand();">随机产生20个整数</button><button id="divide-btn" onclick="find();">找出能被5整除的整数</button><button id="reset-btn" onclick="reset();">重置</button></div><script>// write your code here// // 方式1// dom.addEventListener("click", function () {...})// // 方式2// dom.onclick = function () {... }var flag = 0;var array_int = new Array(20);function $(id) {return document.getElementById(id);}function reset() {$("num-area").value = "";flag = 0;}window.reset = reset;function rand() {$("num-area").value = "随机产生20个4位整数，分别如下：\n";var m = 1000;var n = 9999;for (let i = 0; i < array_int.length; i++) {array_int[i] = Math.round(Math.random() * (n - m) + m);}$("num-area").value += array_int.join(",");$("num-area").value += "\n";array_int.sort();$("num-area").value += "从小到大排序后结果为：\n";$("num-area").value += array_int.join(",");$("num-area").value += "\n";flag = 1;}window.rand = rand;function find() {if (flag == 1) {var array_tmp = new Array();array_int.forEach(element => {if (element % 5 == 0) {array_tmp.push(element);}});$("num-area").value += "能被5整除的整数有：\n";$("num-area").value += array_tmp.join(",");$("num-area").value += "\n";}}window.find = find;</script></body></html>

用户登录

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户登录</title><style>fieldset {background-color: #663399;width: 300px;text-align: center;}h2 {background-color: grey;opacity: 0.7;}span {color: white;}td {text-align: center;height: 38px;}.button-box {display: flex;margin: 0 auto;justify-content: center;margin-top: 20px;}.table-box {width: 270px;margin-left: 30px;}</style></head><body><form onsubmit="return false;"><fieldset><legend><h2>用户登录</h2></legend><div class="table-box"><table><tr><td><span>用户名</span></td><td><input type="text" id="username"></td></tr><tr><td><span>密 码</span></td><td><input type="password" id="password"></td></tr></table></div><div class="button-box"><input id="submit" type="submit" value="提交" onclick="submit1()"><input id="reset" type="reset" value="重置" onclick="return reset1()"></div></fieldset></form><script>// write your code herefunction $(id) {return document.getElementById(id);}function submit1() {var username = $("username").value;var password = $("password").value;var flag = 0;var msg = "";if (username == "") {// alert("用户名不可为空！");msg += "用户名不可为空！\n";$("username").focus();flag = 1;} else if (username.length < 8) {// alert("用户名过短，至少需要8个字符！");msg += "用户名过短，至少需要8个字符！\n"$("username").focus();flag = 1;} else if (username.length > 20) {// alert("用户名过长，最多20个字符！");msg += "用户名过长，最多20个字符！\n";$("username").focus();flag = 1;}if (password == "") {// alert("密码不可为空！");msg += "密码不可为空！\n";if (!flag)$("password").focus();} else if (password.length < 8) {// alert("密码过短，至少需要8个字符！");msg += "密码过短，至少需要8个字符！\n";if (!flag)$("password").focus();} else if (password.length > 20) {// alert("密码过长，最多20个字符！");msg += "密码过长，最多20个字符！\n";if (!flag)$("password").focus();}if (msg.length)alert(msg);}window.submit1 = submit1;function reset1() {return confirm("数据将被清空");// $("username").value = "";// $("password").value = "";}window.reset1 = reset1;</script></body></html>

实验10

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

手机通讯录管理器（indexedDB)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手机通讯录管理器</title><style>.container {width: 450px;margin: 0 auto;}h2 {text-align: center;background-color: #EAEAEA;}fieldset {text-align: center;}.button-box {margin-top: 20px;}</style></head><body><div class="container"><header><h2>手机通讯录管理器</h2></header><form onsubmit="return false;"><fieldset><legend>简易手机通讯录</legend>姓名：<input type="text" name="name" id="name"> <br>电话：<input type="text" name="phone" id="phone"><div class="button-box"><input type="button" value="添加" onclick="handleAdd()"><input type="button" value="查询" onclick="handleSearch()"><input type="button" value="删除" onclick="handleDelete()"><input type="button" value="重置" onclick="handleReset()"></div><textarea name="content" id="content" cols="35" rows="12" disabled></textarea></fieldset></form><div><h2>前端工作室设计 <br>版权所有©,2017-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"><header><h2>手机通讯录管理器</h2></header><form onsubmit="return false;"><fieldset><legend>简易手机通讯录</legend>姓名：<input type="text" name="name" id="name"> <br>电话：<input type="text" name="phone" id="phone"><div class="button-box"><input type="button" value="添加" onclick="handleAdd()"><input type="button" value="查询" onclick="handleSearch()"><input type="button" value="删除" onclick="handleDelete()"><input type="button" value="重置" onclick="handleReset()"></div><textarea name="content" id="content" cols="35" rows="12" disabled></textarea></fieldset></form><div><h2>前端工作室设计 <br>版权所有©,2017-2020</h2></div></div><script>// 参考:function loadData() {$('content').value = "";if (localStorage.length > 0) {for (var i = 0; i < localStorage.length; i++) {var phonet = localStorage.key(i);if (phonet != "web-account" && phonet != "web-guide1") {var namet = localStorage.getItem(phonet);$('content').value += namet + " " + phonet + "\n";}}}}function $(id) { return document.getElementById(id); }// 处理添加function handleAdd() {var name = document.getElementById('name').value;var phone = document.getElementById('phone').value;var reg = /^((?!\?|!||=|@|'|"|\(|\)).)*$/;var mes = "";if (name == "") {mes += "姓名不能为空！\n";// return;} else if (!reg.test(name)) {mes += "姓名不能含有特殊字符！\n";}if (phone == "") {mes += "电话号码不能为空！\n";} else if (!reg.test(phone)) {mes += "电话号码不能含有特殊字符！\n";}if (mes != "") {alert(mes);return;}if (localStorage.length > 0) {for (var i = 0; i < localStorage.length; i++) {var phone_tmp = localStorage.key(i);if (phone_tmp == phone) {if (confirm("是否覆盖，更新旧姓名")) {localStorage.setItem(phone_tmp, name);alert("更新成功");loadData();return;} else {return;}}}}localStorage.setItem(phone, name);handleReset();handleSearch();// document.getElementById('content').value += name + " " + phone + "\n";}// 处理查询function handleSearch() {var name = document.getElementById('name').value;var phone = document.getElementById('phone').value;document.getElementById('content').value = "";var reg = /^((?!\?|!||=|@|'|"|\(|\)).)*$/;if(!reg.test(name) || !reg.test(phone))return;for (var i = 0; i < localStorage.length; i++) {var phone_tmp = localStorage.key(i);if (phone_tmp != "web-account" && phone_tmp != "web-guide1") {var name_tmp = localStorage.getItem(phone_tmp);if((name_tmp.search(name) != -1 && phone_tmp.search(phone) != -1) ||(name_tmp.search(name) != -1 && phone == "") ||(name == "" && phone_tmp.search(phone) != -1) ||(name == "" && phone == "")) {$('content').value += name_tmp + " " + phone_tmp + "\n";}}}}// 处理删除function handleDelete() {var name = document.getElementById('name').value;var phone = document.getElementById('phone').value;var mes = "";if (name == "" && phone == "") {alert("姓名和电话号码不能同时为空！");return;}var phone_list = new Array();for (var i = 0; i < localStorage.length; i++) {var phone_tmp = localStorage.key(i);if (phone_tmp != "web-account" && phone_tmp != "web-guide1") {var name_tmp = localStorage.getItem(phone_tmp);if((name_tmp.search(name) != -1 && phone_tmp.search(phone) != -1) ||(name_tmp.search(name) != -1 && phone == "") ||(name == "" && phone_tmp.search(phone) != -1) ||(name == "" && phone == "")) {phone_list.push(phone_tmp);}}}if (phone_list.length >= 2) {alert("删除的内容匹配多项，删除失败！");} else if (phone_list.length <= 0) {alert("未找到符合删除条件的数据！");} else if (confirm("确定删除吗")) {localStorage.removeItem(phone_list[0]);handleReset();loadData();}}// 处理重置function handleReset() {document.getElementById('name').value = "";document.getElementById('phone').value = "";document.getElementById('content').value = "";}// 页面加载时首先检测并初始化数据loadData();// 为了网站校验而需要额外设置的，正常情况下不需要window.handleAdd = handleAdd;window.handleSearch = handleSearch;window.handleDelete = handleDelete;window.handleReset = handleReset;</script></body></html>