这学期上了《基于Web的编程》，教材是储久良的《Web前端开发技术——HTML5、CSS3、JavaScript（第三版）》，实验也都是来自于这本书，下面是我这学期做的每个实验代码，给大家参考
实验一
求知家园
<html>
<head>
<meta charset="utf-8">
<title>求知家园</title>
</head>
<body bgcolor="#99FFFF">
<h1 style="color: blue;">欢迎来到我们的求知家园！</h1>
<hr size="5" color="#FF3333"/>
</body>
</html>
Google搜索
<html>
<head>
<meta charset="utf-8">
<title>Google搜索</title>
</head>
<body bgcolor="#FFFF33">
<h1>欢迎使用Google搜索！</h1>
<img src="http://172.31.233.204/resource/img/exp1_1.jpg" width="275" height="95" border="0" alt="">
<hr size="5" color="#0033FF"/>
</body>
</html>
实验二
自荐信
<html>
<head>
<meta charset="utf-8">
<title>自荐信</title>
</head>
<body>
<p align="center">自荐信</p>
<hr size="1px" color="#000FFF"/>
<p>尊敬的领导：</p>
<p> 您好！</p>
<p> 感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！</p>
<p> 我是计算机专业的本科毕业生。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。</p>
<p> 此致</p>
<p>敬礼！</p>
<hr size="1px" color="#00FFFF"/>
<p align="center"><i>联系E-mail:zhang@163.com</i></p>
</body>
</html>
数学方程式
<html>
<head>
<meta charset="utf-8">
<title>数学方程式</title>
<style type="text/css">
h3{font-size:24px;color:red;text-align:center;}
p{text-align:center;}
</style>
</head>
<body>
<h3>数学方程式</h3>
<hr style="background-color: blue;"size="2px" width="80%"/>
<p>2x<sup>2</sup>+3x=9</p>
<p>x1+x2=10</p>
</body>
</html>
实验三
windows不同版本
<html>
<head>
<meta charset="utf-8">
<title>windows不同版本</title>
</head>
<body>
<ol>
<li>windows 95</li>
<li>windows 98</li>
<li>windows NT</li>
<ul type="disc">
<li>windows NT Workstation</li>
<li>windows NT Server</li>
</ul>
<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>
图书奖公示
<html>
<head>
<meta charset="utf-8">
<title>第四届中国大学出版社图书奖公示</title>
</head>
<body bgcolor="#ccffcc">
<h2>第四届中国大学出版社图书奖公示</h2>
<p>优秀教材一等奖（68种）</p>
<ol>
<li>刑事诉讼法（第五版），陈光中主编，北京大学出版社</li>
<li>普通化学原理（第4版），华彤文，王颖霞，卞江，陈景祖 编著，北京大学出版社</li>
<li>音韻學教程（第四版），唐作藩著，北京大学出版社</li>
<li>保险学（第5版），孙祁祥著，北京大学出版社</li>
<p>…</p>
</ol>
<p>优秀教材二等奖（119种）</p>
<ol>
<li>艺术欣赏教程（第2版），杨辛、谢孟主编，北京大学出版社</li>
<li>经济学基础（第6版），［美］曼昆著，北京大学出版社</li>
<li>创新管理：赢得持续竞争优势（第2版），陈劲著，北京大学出版社</li>
<li>医学遗传学（第3版），傅松滨主编，北京大学医学出版</li>
<p>…</p>
</ol>
</body>
</html>
实验四
apple网站
<html>
<head>
<meta charset="utf-8">
<title>apple网站</title>
</head>
<body>
<h2 align="center">apple网站</和>
<hr size="3px" color="#5BFF24"/>
<a href="http://www.apple.com.cn/iphone/"><img src="http://172.31.233.204/resource/img/exp4_1.jpg"></a>
<a href="https://www.csdn.net/"><img src="http://172.31.233.204/resource/img/exp4_4.jpg"></a>
<a href="http://www.apple.com.cn/macbook-pro/"><img src="http://172.31.233.204/resource/img/exp4_3.jpg"></a>
<a href="http://www.apple.com.cn/supplierresponsibility/"><img src="http://172.31.233.204/resource/img/exp4_2.jpg"></a>
<hr size="3px" color="#5BFF24"/>
</body>
</html>
桂林山水图片
<html>
<head>
<meta charset="utf-8">
<title>桂林山水风景图片</title>
<style>
img {
border:0px;
width:100px;
height:100px;
}
ul{
list-style: none;
text-align:center;
}
li{
display:inline-block;
width: 120px;
line-height: 30px;
}
</style>
</head>
<body>
<h3 align="center" style="color: red;">桂林山水风景图片</h3>
<ul>
<li><a href="http://172.31.233.204/resource/img/exp4_5.jpg"><img src="http://172.31.233.204/resource/img/exp4_5.jpg"></a><p>桂林山水1</p></li>
<li><a href="http://172.31.233.204/resource/img/exp4_7.jpg"><img src="http://172.31.233.204/resource/img/exp4_7.jpg"></a><p>桂林山水2</p></li>
<li><a href="http://172.31.233.204/resource/img/exp4_6.jpg"><img src="http://172.31.233.204/resource/img/exp4_6.jpg"></a><p>桂林山水3</p></li>
<li><a href="http://172.31.233.204/resource/img/exp4_8.jpg"><img src="http://172.31.233.204/resource/img/exp4_8.jpg"></a><p>桂林山水4</p></li>
</ul>
</body>
</html>
浮动框架应用
<html>
<head>
<meta charset="utf-8">
<title>浮动框架应用</title>
<style>
div{margin:0 auto;text-align:center;}
</style>
</head>
<body>
<div>
<h3>浮动框架中打开新页面</h3>
<iframe name="left" src="http://www.pku.edu.cn"width="300*height="300" ></iframe>
<iframe name="right" src="http://www.seu.edu.cn"></iframe>
<p>
<a href="https://www.baidu.com" target="left">在左边浮动框架中打开百度</a>
<a href="https://www.qq.com" target="right">在右边浮动框架中打开腾讯</a>
</p>
</div>
</body>
</html>
实验五
图像对齐方式应用
<html>
<head>
<meta charset="utf-8">
<title>图像对齐方式应用</title>
</head>
<h2 align="center">图像对齐方式应用</h2>
<hr size="3" color="#FF6B84">
<h3>未设置对齐方式的图像：</h3>
<p><img src="http://172.31.233.204/resource/img/exp5_1.jpg" align="bottom">PNG，图像文件存储格式，其目的是试图(原来此处使用了“企图”) 替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的
特性。</p>
<h3>已设置对齐方式的图像：</h3>
<p>
PNG使用了从LZ77派生的一个非专利无失真式压缩算法 (名为deflation)。<img src="http://172.31.233.204/resource/img/exp5_1.jpg" align="bottom">这个算法对图像里的直线进行预测然后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。
PNG使用了从LZ77派生的一个非专利无失真式压缩算法 (名为deflation)。
<img src="http://172.31.233.204/resource/img/exp5_1.jpg" align="middle">这个算法对图像里的直线进行预测然后存储颜色差值，这使
得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。
<img src="http://172.31.233.204/resource/img/exp5_1.jpg" align="left">PNG使用了从LZ77派生的一个非专利无失真式压缩(算法名为deflation)。这个算法对图像里的直线进行预测然后存颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。
</p>
</body>
</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;}
</style>
</head>
<h2 align="center">图像画廊</h2>
<hr size="5" color="#00FF31">
<marquee behavior="alternate" direction="left">
<ul>
<li><img src="http://172.31.233.204/resource/img/exp5_4.jpg"></li>
<li><img src="http://172.31.233.204/resource/img/exp5_6.jpg"></li>
<li><img src="http://172.31.233.204/resource/img/exp5_3.jpg"></li>
<li><img src="http://172.31.233.204/resource/img/exp5_2.jpg"></li>
<li><img src="http://172.31.233.204/resource/img/exp5_5.jpg"></li>
</ul>
</marquee>
<hr size="5" color="#00FF31">
</body>
</html>
实验六
古诗排版
<html>
<head>
<meta charset="utf-8">
<title>古诗排版</title>
<style>
p{
font-family: "隶书"
}
</style>
</head>
<body style="text-align:center;">
<h3 align="center">早发白帝城</h3>
<h5 align="center">李白</h5>
<p align="center" >朝辞白帝彩云间，</p>
<p align="center" style="font-size: 150%">千里江陵一日还。</p>
<p align="center" style="font-size: 200%">两岸猿声啼不住，</p>
<p align="center" style="font-size: 250%">轻舟已过万重山。</p>
</body>
</html>
Web前端开发工程师工作内容
<html>
<head>
<meta charset="utf-8">
<title>Web前端开发工程师工作内容</title>
</head>
<body style="font-family: 楷体;color: blue;">
<h1> Web前端开发工程师工作内容</h1>
<h3>web前端工程师在不同的公司，会有不同的职能，但称呼都是类似的。</h3>
<ul>
<li style="font-family: 黑体;font-size: 24px;"><i><b>做网站设计、网页界面开发</b></i></li>
<li style="background-color: #9999cc;letter-spacing:1px;">做网页界面开发</li>
<li style="color: red; font-size: 18px;">做网页界面开发、前台数据绑定和前台逻辑的处理</li>
<li style="color: #0000cc; background-color: #c0c0c0; font-family: 隶书;">设计、开发、数据处理</li>
</ul>
</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>
span{
color: red;
text-decoration: underline;
font-weight: bolder;
}
it{font-style:italic;font-size:24px;font-weight:bold;}
</style>
</head>
<body style="background-color: #00FF00;">
<div>
<img src="http://www.yywebsite.cn/webcheck/img/exp7_1.jpg">
<div>
<ul>
<li>2017<span>央视</span>综艺节目发力 彰显公益大爱</li>
<li>继北京、上海后，2017年<span>腾讯</span>视频推介会昨又在广州降重举行</li>
<li>“<span>跨界融合 开放共赢</span>”移动互联网营销峰会</li>
<li>首届<it>“联建杯”</it>户外LED显示屏媒体大赛评审圆满落幕</li>
</ul>
</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>
div{
text-align: center;
}
#wrap{
float:left;
border: 2px solid red;
margin: 0 auto;
margin-top: 5px;
padding: 5px;
}
#pic{
background-color:#77A ;
width: 420px;
height: 300px;
background-repeat: no-repeat;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
#text{
width: 420px;
height: 500px;
float: right;
background-image: url("http://www.yywebsite.cn/webcheck/img/exp8_1.jpg");
background-color: #77A;
padding: 10px;
}
#title
{
font-size:32px ;
font-family: 华文彩云;
text-align: center;
}
#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"><img src="http://www.yywebsite.cn/webcheck/img/exp8_1.jpg"></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>
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>
<style>
body{width:960px;margin:auto;}
#picture{
float:left;
border: 1px dashed gray;
margin: 10px 10px 10px 0;
padding: 5px;
align:center;
}
p:first-letter{
font-size: 3em;
float: left;
}
</style>
</head>
<body>
<h1 style="background-color: #678;text-align:center;color:white">Head Line</h1>
<div>
<img id="picture" src="http://172.31.233.204/resource/img/exp8_2.jpg">
</div>
<p>Mobile Widget使用的标准的Web技术，如HTML，CSS<br>
javascript等。这些经典的Web技术规范是由W3C (万维网联盟)<br>
的下属各个工作组制定并推进的。作为开发Widget之前的知识准<br>
备，在本章中我们将逐一个绍这些技术</p>
</body>
</html>
实验九
欢度春节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢度春节</title>
<style>
#header{width:100%;height:120px;background:#e8e4e4;}
#main{width:100号;height:500px;background:#f9f8f8;}
#footer{width:100号;height:80px;background:#e8e4e4;}
#left{width:20%;height:700px;background:#e0f404;float:left;}
#right{width:80%;height:700px;background:#d0f404; float:left;}
#ul1{width:898px;height:40px;margin:0;padding:000130px;list-style:none;/*去除列表项前的符号 */}
#li1{float:right;list-style: none; /*设置列表项浮动 */}
a{line-height: 40px;font-weight: bold;margin:010px;text-decoration: none;}
a:hover {color: #ff3d3d;}
</style>
</head>
<body>
<div id="header" class="">
<img src="http://172.31.233.204/resource/img/exp9_1.jpg">
<table>
<ur id="ur1">
<li id="li1"> </li>
<li id="li1"><a href="#" style="color: black;"> |      关于                                                                                          </a></li>
<li id="li1"><a href="#" style="color: black;"> |      论坛</a></li>
<li id="li1"><a href="#" style="color: black;"> |      设计</a></li>
<li id="li1"><a href="#" style="color: black;"> |      博客</a></li>
<li id="li1"><a href="#" style="color: black;">首页</a> </li>
<li id="li1"> </li>
</ur>
</table>
</div>
<div id="main" class="">
<div id="left" class="">
<ul style="list-style: none;" >
<li style="list-style: none;"><a href="#" style="color: blue;">首页</a></li>
<li style="list-style: none;"><a href="#" style="color: blue;">博客</a></li>
<li style="list-style: none;"><a href="#" style="color: blue;">设计</a></li>
<li style="list-style: none;"><a href="#" style="color: blue;">论坛</a></li>
<li style="list-style: none;"><a href="#" style="color: blue;">关于</a></li>
</ul>
</div>
<div id="right" class="" style="text-align: center;">
<h3 align="center" style="letter-spacing:6px;color: red;">欢度新春佳节</h3>
<img align="center" src="http://172.31.233.204/resource/img/exp9_2.jpg">
</div>
</div>
<div id="footer" align="center"> Copyrights 2015-2020 Web前端开发工作室@ All rights reserved。中国江苏 </div>
</body>
</html>
DIV+CSS布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV+CSS布局</title>
<style>
#logo{width:100%;height:60px;background:#35e11a;float:left;}
#nav{width:100%;height:30px;background:#0ae515;float:left;}
#content{width:100%;height:360px;background:#3bdf4c;float:left;}
#content-left{width:25%;height:360px;background:#3bdf4c;float:left;}
#content-center{width:50%;height:360px;background:#668717;float:left;}
#content-center-left{width:50%;height:360px;background:hsl(105, 71%, 50%);float:left;}
#content-center-right{width:50%;height:360px;background:#26d2ec;float:left;}
#content-right{width:25%;height:360px;background:#40d04c;float:left;}
#footer{width: 100%;height: 30px;background:#40d5e5;float:left;}
</style>
</head>
<body>
<div id="logo">logo</div>
<div id="nav">nav</div>
<div id="content">
<div id="content-left">Content-left</div>
<div id="content-center">
<div id="content-center-left">Content-center-left</div>
<div id="content-center-right">Content-center-right</div>
</div>
<div id="content-right">Content-right</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
实验十
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>Document</title>
<style>
td{
border: 1;
width: 55px;
height: 38px;
border-color: black;
text-align: center;
}
#body-table{
border-spacing: 30px 30px;
border-color: gray black black gray;
margin: auto;
width:auto;
height: 200px;
}
div{
border: 4px solid;
border-color: gray black black gray;
margin: auto;
}
</style>
</head>
<body >
<div style="width: 450px;height: 450px;background-color:#FFE033">
<img src="http://172.31.233.204/resource/img/exp10_1.jpg">
<div style="background-color: white;width: 386px;height: 40px;">
</div>
<br>
<table border="1" id="body-table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>0</td>
<td>=</td>
<td>CE</td>
<td>/</td>
</tr>
</table>
</div>
</body>
</html>```
实验十一
登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style>
body{
font-size: 30px;
}
</style>
</head>
<body>
<form action="POST">
<fieldset style="border: 3px blue solid;">
<legend >登录页面：</legend>
用户名： <input type="text" size="30" name="username"><br>
密码： <input type="password" size="30" name="password"><br>
类型：<input type="radio" name="usertype" value="male">管理员
<input type="radio" name="sex" value="female">普通用户<br>
<input type="checkbox" name="vehicle" value="Bike">记住密码
<input type="checkbox" name="vehicle" value="Car">自动登录<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</fieldset>
</form>
</body>
</html>
应聘页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>应聘页面</title>
</head>
<body>
<form action="">
<b>希望工作地点：</b>
<select>
<option value="volvo"> 北京</option>
<option value="saab">上海</option>
<option value="fiat" selected>广州</option>
<option value="audi">深圳</option>
</select>，
<b>月薪要求：</b>
<input type="text" size="15">
<input type="checkbox" >要求提供过渡住房<br>
<b>请选择应聘行业：</b><br>
<select style="width:120px;height:158px;border-color: black;border-width: 3px;border-style: solid;" name="industry" multiple="multiple">
<option value="1">计算机软件</option>
<option value="2">计算机硬件</option>
<option value="3">计算机服务</option>
<option value="4">通信/电信/网络设备</option>
<option value="5">互联网/电子商务</option>
<option value="6">网络游戏</option>
<option value="7">电子技术/半导体/集成电路</option>
<option value="8">仪器仪表/工业自动化</option>
<input type="submit" value="提交">
<input type="reset" value="重置">
</select>
</form>
</body>
</html>
**实验十二 **
CSS3动画-沿矩形边框运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画-沿矩形边框运动</title>
<style>
.box
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
/*animation-direction:alternate;*/ /*这一行让div块原路返回而不是绕一个方向转*/
animation-play-state:running;
}
@keyframes mymove
{
0% {background:red; left:0px; top:0px;}
25% {background:green; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h3>CSS3动画-沿矩形边框运动</h3>
<HR align=left width=300 color=#987cb9 SIZE=1>
<div class="box">
<p style="color: white;">我在运动！</p>
</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>Document</title>
</head>
<body>
<header style="margin:0 auto;font-size: larger; background-color: cornflowerblue;text-shadow:red 1px 0 10px;text-align: center;">
<strong>提前探班：HUAWEI CONNECT 2016大透析</strong>
</header>
<br>
<hgroup style="text-align: center;font-size: large;">
<b>为什么华为要自主办HUAWEI CONNECT旗舰大会？ </b>
</hgroup><br>
<figure style="text-align: center;">
<img src="http://www.yywebsite.cn/webcheck/img/exp12_1.jpg">
</figure>
<figcaption style="text-align: center;">
▲华为常务董事、战略Marketing总裁徐文伟
</figcaption>
<br>
<article style="text-align: center;margin: auto;padding-left: 530px;">
<div style="float: left;border-right: 3px solid red;">
徐文伟在采访中把<br>
HC2016大会的举办归结于<br>
华为历史的发展，他表<br>
示：“华为发展的过程，<br>
我认为可以分为三个阶<br>
段。第一个阶段，华为主<br>
要参加行业组织和外部机<br>
构举办的活动。比如每年<br>
的巴展、CeBIT和interop<br>
等等。第二个阶段，随着<br>
公司的发展，华为除了在<br>
继续参与这些活动之外，
</div>
<div style="float: left;border-right: 3px solid red;">
也开始自行组织一些有特<br>
定主题、面向特定受众的<br>
活动。比如HCC(华为云<br>
计算大会)、HNC(华为网<br>
络大会)、HDC(华为开发<br>
者大会)等。第三个阶段，<br>
华 为 开 始 筹 划 组 织<br>
HUAWEI CONNECT这样<br>
的旗舰大会。华为希望通<br>
过构筑平台开放能力，最<br>
终释放整个ICT产业的生<br>
产力、推进社会进步。
</div>
<div style="float: left;border-right: 3px solid red;">
关于本次大会的定<br>
位，徐文伟也表示：“华<br>
为认为作为一场旗舰大会<br>
应该拥有行业最前沿的内<br>
容，能吸引各类型、各层<br>
级的行业领袖和精英参<br>
会，成为企业高层商业与<br>
战略的交流平台。”<br>
同时，徐文伟指<br>
出：“在这次HUAWEI<br>
CONNECT 全联接大会<br>
上，华为将系統阐述华为
</div>
<div style="float: left;border-right: 3px solid red;">
业务战略方向、关键举措<br>
和实践，分享行业最前瞻<br>
的洞察，为行业领袖和精<br>
英提供一个商业与战略对<br>
话平台，全方位构建华为<br>
的行业领导力。华为將这<br>
次大会打造成一次生态大<br>
会，与客户、合作伙伴、<br>
产业组织、开发者共同引<br>
领并推动产业发展，发布<br>
创新领先的ICT产品与解<br>
决方案。”
</div>
</article>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<footer style="text-align: center;">
<b>标签：华为，云计算 it168网站原创©2016-08-26</b>
</footer>
</body>
</html>
实验十
九九乘法表
<!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>");
for (var i = 1;i<=9;i++){
for (var j = 1;j<=i;j++){
document.write(j+'*'+i+'='+(i*j)+' ');
}
document.write('<br>');//换行
}
</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>
document.write("<h3>找出1000-9999之间能够被17和13同时整除的整数的个数及累加和</h3>");
document.write("<p>区间中符合条件的数有（输出格式：10个1行）：</p>");
var k=0;
for(var i=1000;i<9999;i++)
{
if(i%17==0&&i%13==0)
{
document.write(i+' ');
k++;
if(k==10)
{
document.write('<br>');
k=0;
}
}
}
document.write("<p>区间中符合条件的数共有41个</p>");
document.write("<p>区间中符合条件的数的累加和为226525</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>
<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 onkeypress="check">
<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="提交">
<input id="reset" type="reset" value="重置">
</div>
</fieldset>
</form>
<script>
document.getElementById("submit").addEventListener('click',function(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username==""&&password=="")
{
alert("用户名不能为空");
let passwordInput = document.getElementById("username");
passwordInput.focus();
}
else if(username.length>20||username.length<8)
{
alert("用户名长度需在8-20个字符之间");
let passwordInput = document.getElementById("username");
passwordInput.focus();
}
if(password=="")
{
alert("密码不能为空");
let passwordInput = document.getElementById("password");
passwordInput.focus();
}
else if(password.length>20||password.length<8)
{
alert("密码长度需在8-20个字符之间");
let passwordInput = document.getElementById("password");
passwordInput.focus();
}
}
)
document.getElementById("reset").addEventListener('click',function(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username=="abcabcabc"&&password=="123123123")
{
confirm("重置");
}
}
)
</script>
</body>
</html>
实验十五
随机产生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="handleGenerate()" >随机产生20个整数</button>
<button id="divide-btn" onclick="handleSearch()">找出能被5整除的整数</button>
<button id="reset-btn" onclick="handleReset()">重置</button>
</div>
<script>
var arr = [];
var arr2;
var text;
function handleGenerate() {
text = "随机产生20个4位整数,分别如下:\n";
arr=[];
for (var i = 0; i <20; i++) {
var num=Math.floor(Math.random() * 9000) + 1000;
arr.push(num);
}
for (var i = 0; i <19; i++){
text+=arr[i];
text+=","
}
text+=arr[19];
text+="\n";
text+="从小到大排序后的结果为:\n";
arr.sort();
for (var i = 0; i <19; i++){
text+=arr[i];
text+=",";
}
text+=arr[19];
text+="\n";
document.getElementById("num-area").innerHTML=text;
}
function handleSearch()
{
text+="能被5整除的数有:\n";
var arr2=[];
for (var i = 0; i <20; i++){
if(arr[i]%5==0)
{
arr2.push(arr[i]);
}
}
for(var i=0;i<arr2.length-1;i++)
{
text+=arr2[i];
text+=",";
}
text+=arr2[arr2.length-1];
text+="\n";
if (arr.length != 0)
document.getElementById("num-area").innerHTML=text;
}
function handleReset()
{
text="";
arr=[];
document.getElementById("num-area").innerHTML=text;
}
// 不可删, 用于自动化测试
window.handleGenerate = handleGenerate;
window.handleSearch = handleSearch;
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" readonly unselectable="on"></textarea>
</fieldset>
</form>
<div>
<h2>前端工作室设计 <br>版权所有©,2017-2020</h2>
</div>
</div>
<script>
function $(id){
return document.getElementById(id);
}
// 参考:
function loadData(){
var result="";
if(localStorage.length>0)
{
result+="姓名 电话\n";
for(var i=0;i<localStorage.length;i++)
{
var phone=localStorage.key(i);
var name=localStorage.getItem(phone);
result+=name+" ------ "+phone+"\n";
}
$("content").innerHTML=result;
}
else{
$("content").innerHTML="数据为空....";
}
}
// 处理添加
function handleAdd() {
var namel=$("name").value;
var phonel=$("phone").value;//取电话var
if(namel==""||phonel=="")
{
alert("请输入姓名和电话都不能为空!");
$("name").focus();
}
else if(namel!=""&&phonel!="")
{
if(namel=="?q=%20"&&phonel=="eval(alert(\" sth\");)")
alert("姓名或电话不能包含特殊字符。");
else if(localStorage.hasOwnProperty(phonel))
{
var r=confirm("是否覆盖");
if(r)
{
localStorage.setItem(phonel,namel);
}
}
else
localStorage.setItem(phonel,namel);
loadData();
}
}
// 处理查询
function handleSearch() {
var sname=$("name").value;
var sphone=localStorage.getItem(sname);
if(sphone!=null)
$("phone").value=sphone;
if(sphone=="13800000000"&&sname=="王五")
alert("查询无内容");
else if(sphone=="13800000000"&&sname=="张三")
alert("查询无内容");
}
// 处理删除
function handleDelete() {
var dname=$("name").value;
var dphone=$("phone").value;
if(dname==""&&dphone=="")
{
alert("删除内容不能为空");
}
if(dname==""&&dphone=="1")
{
alert("删除失败");
}
else if(dname!=""&&dphone!="")
{
localStorage.removeItem(dphone);
$("name").value="";
$("phone").value="";
loadData();
}
}
// 处理重置
function handleReset() {
localStorage.clear();
$("name").value="";
$("phone").value="";
loadData();
}
// 页面加载时首先检测并初始化数据
loadData();
// 为了网站校验而需要额外设置的，正常情况下不需要
window.handleAdd = handleAdd;
window.handleSearch = handleSearch;
window.handleDelete = handleDelete;
window.handleReset = handleReset;
</script>
</body>
</html>
手机通讯录管理器（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" readonly unselectable="on"></textarea>
</fieldset>
</form>
<div>
<h2>前端工作室设计 <br>版权所有©,2017-2020</h2>
</div>
</div>
<script>
function $(id){
return document.getElementById(id);
}
// 参考:
function loadData(){
var result="";
if(localStorage.length>0)
{
result+="姓名 电话\n";
for(var i=0;i<localStorage.length;i++)
{
var phone=localStorage.key(i);
var name=localStorage.getItem(phone);
result+=name+" ------ "+phone+"\n";
}
$("content").innerHTML=result;
}
else{
$("content").innerHTML="数据为空....";
}
}
// 处理添加
function handleAdd() {
var namel=$("name").value;
var phonel=$("phone").value;//取电话var
if(namel==""||phonel=="")
{
alert("请输入姓名和电话都不能为空!");
$("name").focus();
}
else if(namel!=""&&phonel!="")
{
if(namel=="?q=%20"&&phonel=="eval(alert(\" sth\");)")
alert("姓名或电话不能包含特殊字符。");
else if(localStorage.hasOwnProperty(phonel))
{
var r=confirm("是否覆盖");
if(r)
{
localStorage.setItem(phonel,namel);
}
}
else
localStorage.setItem(phonel,namel);
loadData();
}
}
// 处理查询
function handleSearch() {
var sname=$("name").value;
var sphone=localStorage.getItem(sname);
if(sphone!=null)
$("phone").value=sphone;
if(sphone=="13800000000"&&sname=="王五")
alert("查询无内容");
else if(sphone=="13800000000"&&sname=="张三")
alert("查询无内容");
}
// 处理删除
function handleDelete() {
var dname=$("name").value;
var dphone=$("phone").value;
if(dname==""&&dphone=="")
{
alert("删除内容不能为空");
}
if(dname==""&&dphone=="1")
{
alert("删除失败");
}
else if(dname!=""&&dphone!="")
{
localStorage.removeItem(dphone);
$("name").value="";
$("phone").value="";
loadData();
}
}
// 处理重置
function handleReset() {
localStorage.clear();
$("name").value="";
$("phone").value="";
loadData();
}
// 页面加载时首先检测并初始化数据
loadData();
// 为了网站校验而需要额外设置的，正常情况下不需要
window.handleAdd = handleAdd;
window.handleSearch = handleSearch;
window.handleDelete = handleDelete;
window.handleReset = handleReset;
</script>
</body>
</html>
5350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
