pzh-web前端学习汇总-大二_msptl-优快云博客

本文链接：https://blog.youkuaiyun.com/u014185088/article/details/106016535

pzh–web前端学习汇总（前端基础+demo+实验报告）

汇总实验包含实验报告，代码：

http://p65782152.gitee.io/web_learning/
GIT地址：https://gitee.com/P65782152/web_learning.git
pzh资料分享群：679512901

一:使用框架、仿写百度搜索、百度图片

预览网页1：http://www.pzhuweb.cn/program/2017website4/

预览网页2：http://p65782152.gitee.io/web_learning/package/sy1/index.html

<!-- 切割网页成3部分 -->
	<frameset rows="12%,*,6%" border="2">
		<!-- 顶部第一部分 -->
		<frame name="header" src="header.html"/>
		<!-- 中间导航和内容显示部分 -->
		<!-- 将中间部分再切割成两个水平的网页 -->
		<frameset cols="16%,*">
			<!-- 导航页 -->
			<frame name="nav" src="nav.html"/>
			<!-- 信息显示页 -->
			<frame name="show" src="nav/index.html" />
		</frameset>
		<!-- 底部网页，显示其他信息 -->
		<frame  name="footer" src="footer.html"/>
	</frameset>

百度图片

预览网页：http://p65782152.gitee.io/web_learning/package/sy1/index.html

<center>
<img src="../img/baidutimglogo.png"/>
	<form id="homeSearchForm" action="http://image.baidu.com/search/index" method="get">
		<div class="mui-input-row">
					<input type="hidden" name="tn" value="baiduimage" />
						<input type="text" id="kw" name="word" placeholder="请输入要搜索的内容" style="font-size: 20px;">
						<input type="submit" value="搜索" style="font-size: 20px;"/>
					</div>
					
				</form>
			</div>

百度搜索

<div style="text-align: center;">
			<img style="height: 200px;;" src="../img/baidulogo.png" title="即将百度"></br>
			<form action="https://www.baidu.com/s" style="margin-top: 20px;">
				<input type="text"  name="wd" style="font-size: 30px;"/>
					<input type="submit" value="百度一下" style="font-size: 30px; background-color: #38f;color: white; cursor: pointer;">
			</form>

		</div>

CSS选择器实操

地址：http://p65782152.gitee.io/web_learning/package/sy1/nav/csssy-1.htmlCss选择器demo

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/cssSy1.css" />
		<style>
			
			.Sy1_1 {
				background-color: salmon;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}

			#A-1 {
				/* id选择器 */
				background-color: sandybrown;
			}

			.A-2 {
				/* class选择器 */
				background-color: #20B2AA;
			}

			div.A-3 {
				/* 派生选择器 */
				background-color: firebrick;
			}

			.B-1 div {
				/* 后代选择器,选择B-1中的所有div */
				background-color: skyblue;
			}

			.B-2 div>div {
				/* 子元素选择器，只选择直系后代 */
				background-color: skyblue;
			}

			.B-3 div+div {
				/* 父亲相同的相邻元素 */
				background-color: skyblue;
			}
			.B-4 div~div{
				/* 普通兄弟选择器选中后续的所有兄弟 E~f */
				background-color: #20B2AA;
			}

			a.C-1:link {
				text-decoration: none;
			}

			a.C-2:visited {
				color: red;
			}

			a.C-3:hover {
				color: lime;
			}

			a.C-4:active {
				color: black;
				font-size: 150%;
			}
			input.focus:focus{
				background-color: blue;
			}
			input.enable:enabled{
				border: blue solid 1px;
			}
			input.disable:disabled{
				border: blue solid 1px;
			}
			input.check:checked{
				width: 50px;
				height: 50px;
			}
			p:empty{
				width: 100%;
				height: 50px;
				background:hotpink;
			}
			p.first-letter:first-letter{
				color: red;
			}
			p.first-line:first-line{
				color: red;
			}
			p.before:before{
				content: "我（“我”是通过content插入的）";
			}
			p.after:after{
				content: "猪（“猪”是通过content插入的）";
			}
			[value="panbin"]{
				border: blue solid 2px;
			}
			.table,tr,td{
				border: #000000 solid 1px;
				border-collapse: collapse;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<h1>Css</h1>
		<h2>目录</h2>
		<hr/>
		<div>
			<h3>CSS实验1.1：使用CSS三种不同的样式对网页进行装饰。</h3>


			<div style="background-color: lightblue; height: 40px;line-height: 40px;text-align: center;">内联样式</div>
			<div class="Sy1_1">内部样式</div>
			<div class="Sy1_1_out">外部样式</div>
		</div>
		<hr/>
		<div>
			<h3>CSS实验1.2：使用选择器(7选5)装饰网页，每组选择器至少使用三种。</h3>
			<div>
				<h4>A.常用选择器:</h4>

				<div id="A-1">id选择器：#A-1</div>
				<div class="A-2">class类选择器 .A-2</div>
				<div class="A-3">派生选择器 div.A-3</div>
			</div>
			<div>
				<h4>B.组合选择器:红框为F的div</h4>

				<div class="B-1">
					<h5>1.后代选择器：E F 匹配E后面的所有F ：这句话在E中,F背景色变成浅蓝色</h5>
					<div style="border: #FF0000 solid 1px;">
						<div> 后代选择器F1</div>
						<div> 后代选择器F2</div>
					</div>

				</div>
				
				
				<div class="B-2">
					<h5>2.子元素选择器:E>F 选中E的直系后代,不包括孙子</h5>
					<div style="border: #FF0000 solid 1px;">
						
						<div>子元素选择器F1</div>
						<span>
							<div>我不是直系的</div>
						</span>
						<div>子元素选择器F2</div>
					</div>
				</div>
				
				
				<div class="B-3">
					<h5>3.相邻兄弟选择器：E+F 父亲相同的相邻元素</h5>
					<div style="border: #FF0000 solid 1px;">
						<div>子元素选择器F1 </div>
						<span>我是span我在中间分开了F1和F2,所以选不中F2</span>
						<div>子元素选择器F2</div>
						<div>子元素选择器F3</div>
					</div>

				</div>
				<div class="B-4">
					<h5>4.普通兄弟选择器选中后续的所有兄弟 E~f</h5>
					<div style="border: #FF0000 solid 1px;">
						<div >
							老大
						</div>
						<div>
							老二
						</div>
						<div >
							老三
						</div>
						<div>
							老四
						</div>
					</div>
				</div>
			</div>
			<div>
				<h4>C.链接伪类选择器:</h4>
				
				<div><a class="C-1" href="https://www.baidu.com/">1:未访问链接去掉下划线:link </a></div>
				<div><a class="C-2" href="https://www.baidu.com/">2:访问过的链接变红：visited</a></div>
				<div><a class="C-3" href="https://www.baidu.com/">3:鼠标悬停变绿色:hover</a></div>
				<div><a class="C-4" href="https://www.baidu.com/">4:点击链接瞬间字体变黑并变大（激活）:active</a></div>
			</div>
			<div>
				<h4>D.用户操作伪类选择器:</h4>
				
				<div style="border: #FF0000 solid 1px;">
					1:input:focus选择具有输入焦点的文本框设置bgcolor为蓝色
					<input class="focus" type="text" name="focus" id="focus" value="focus" />
				</div>
				<div style="border: #FF0000 solid 1px;">
					2:input:enable选择被启用的文本框设置边框蓝色
				<input class="enable" type="text" name="enable" id="enable" value="enable我被启用了" />
				<input class="enable" type="text" name="enable" id="enable" value="disable" disabled="disabled:我是不被启用的"/>
				
				</div>
				<div style="border: #FF0000 solid 1px;">
					3:input:disable选择被禁用用的文本框设置边框为蓝色
				<input class="disable" type="text" name="enable" id="enable" value="enable我被启用了" />
				<input class="disable" type="text" name="enable" id="enable" value="disable" disabled="disabled:我是不被启用的"/>
				
				</div>
				<div style="border: #FF0000 solid 1px;">
					4:input:checked选择被选中的元素
					<input class="check" type="radio" name="sex" id="sex" value="man" checked="checked"/>男
					<input class="check" type="radio" name="sex" id="sex" value="woman" />女
					<input class="check" type="checkbox" name="check" id="check" value="car" />车
					<input class="check" type="checkbox" name="check" id="check" value="house" />房子
				</div>
				<div style="border: #FF0000 solid 1px;">
					5:p:empty选择每个没有任何子级的p元素（包括文本节点）
					<p class="empty1">
						6:我是p，我是文本，我只有我,下面的粉色框是p做的但是啥都没有
					</p>
						<p class="empty1"></p>
				</div>
			</div>
			<div>
					
				<h4>E.伪元素选择器:</h4>

				<div style="border: #FF0000 solid 1px;">p:first-letter选择p元素下的第一个字母：<p class="first-letter">i am student第一个变红</p></div>
				<div style="border: #FF0000 solid 1px;">p:first-line选择每个p元素的第一行：<p class="first-line">我是谁，我在哪里！第一行变红</p></div>
				<div style="border: #FF0000 solid 1px;">p:before在每个p元素之前插入内容用content:<p class="before">是猪</p></div>
				<div style="border: #FF0000 solid 1px;">p:after在每个p元素之前插入内容content:<p class="after">我是</p></div>
			</div>
			<div>
				<h4>F.属性选择器</h4>
				<div style="border: #FF0000 solid 1px;">
					通过[value=“panbin”]找到inpiut再修改边框<input type="text" name="" id="" value="panbin" />
					<br />
					其他：略
				<img src="../img/属性选择器.png" >
				</div>
				
			</div>
			<div>
				<h4>G.结构伪类选择器</h4>
				<div style="border: #FF0000 solid 1px;">
					<img src="../img/结构伪类选择器.png" >
				</div>
				
			</div>
		</div>
		选择器优先级：<img src="../img/选择器优先级.png" >
		<hr />
		<div>
			<h3>1.3使用样式(6选4)装饰网页</h3>
			<div style="border: #FF0000 solid 1px;">
				<div style="background-color: #87CEEB;"><h4>A.背景样式：</h4>背景颜色</div>
				<div style="color: blue; text-align: center; letter-spacing: 20px;"><h4>B.文本样式:</h4>颜色为蓝色居中字间距20px</div>
				<div style="font-family: '黑体'; font-weight: 700;font-style: italic;"><h4>C.字体样式:</h4>黑体加粗倾斜</div>
				<div><h4>D.列表样式</h4>
				无序：<ul>
					<li style="list-style-type: circle;">li1</li>
					<li style="list-style-type: square;">li2</li>
				</ul>
				有序：
				<ou>
					<li style="list-style-type: upper-alpha;">li1</li>
					<li style="list-style-type: lower-alpha;">li2</li>
					<li style="list-style-type: lao;">li3</li>
				</ou>
				</div>
				<div><h4>E.表格样式</h4>
				<table class="table">
					<tr>
						<td>1-1</td>
						<td>1-2</td>
						<td>1-3</td>
					</tr>
					<tr>
						<td>2-1</td>
						<td>2-2</td>
						<td>2-3</td>
					</tr>
					<tr>
						<td>3-1</td>
						<td>3-2</td>
						<td>3-3</td>
					</tr>
					<tr>
						<td  colspan="3" style="text-align: center;">4-1</td>
					
					</tr>
				</table>
				</div>
				<div><h4>F.边框样式</h4>
				<p style="border: red solid 1px;outline: yellow dotted thick;"><a href="http://www.w3school.com.cn/css/css_outline.asp">我是菜鸟教程的连接</a></p>
				
				</div>
			</div>
		
		</div>
		<hr >
		<div>
			<h3>1.4使用浮动和定位技术</h3>
			<div style="width: 100%;border: #87CEEB solid 1px;">
				<div style="width: 50%; height: 100px;background-color: lightyellow;">
					我是块级元素默认定位为static
				</div>
				相对定位：
				<div style="border: #000000 solid 1px;margin-top: 20px;width: 100%;height: 120px;">
					<div style="display:inline-block; width: 20%; height: 100px;background-color: red;;top: 22px;left: 20px;"></div>
					<div style="display:inline-block; width: 20%; height: 100px;background-color: red;position: relative;top: 10px;left: 5px;"></div>
					<div style="display:inline-block; width: 20%; height: 100px;background-color: red;;top: 22px;left: 20px;"></div>
				</div>
				绝对定位：
				<div style="border: #000000 solid 1px;margin-top: 20px;width: 100%;height: 200px;position: relative;">
				
					<div style="display: inline-block; width: 60px;height: 80px;background-color: red;">
						我是第一个框
					</div>
					<div style=" position: absolute;top: 50px; display: inline-block; width: 500px;height: 80px;background-color: yellow;">
						我是第二个框，第三个框在我下面，因为我脱离李文档流,挡住了第三个框
					</div>
					<div style="display: inline-block;width: 60px;height: 80px;background-color: green;">
						我是第三个框
					</div>
				</div>
						<div style="position:fixed ;text-align: center;font-size: 30px; width: 100%;height: 50px;border: #00FF00 solid 2px;bottom: 0;background-color: greenyellow;">
							我是fixed定位
						</div>
				
					浮动：
					<div style="border: #000000 solid 1px;margin-top: 20px;width: 100%;height: 200px;position: relative;">
						<div style="float: right ;width: 80px;height: 100px;background-color: red;top: 0;">
							我是浮动的
						</div>
					
					</div>
			</div>
		</div>
		
	</body>
</html>

开机动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oBvOoyGL-1588998903352)(web前端学习汇总.assets/image-20200509115101127.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			html,
			body {
				margin: auto;
				width: 100%;
				height: 100%;
				background-color: skyblue;

			}

			.contrainer {
				margin:50px auto;
				text-align: center;
				width: 200px;
				height: 60px;
				/* background-color: beige; */
			}

			.contrainer div {
				display: inline-block;
				width: 12px;
				height: 70px;
				border-radius: 20px;
				background-color: red;
				/* animation: loading 1s infinite ease-in-out; */
				animation-name: loading;
				animation-duration: 2s;
				animation-timing-function: ease-in-out;
				animation-iteration-count: infinite;
			}

			@keyframes loading {
				0% {
					transform: scaleY(0.5);
				}

				20% {
					transform: scaleY(1);
				}

				40% {
					transform: scaleY(0.5);
				}

				100% {
					transform: scaleY(0.5);
				}
			}

			.contrainer div:nth-of-type(1) {
				animation-delay: 0.2s;
			}

			.contrainer div:nth-of-type(2) {
				animation-delay: 0.4s;
			}

			.contrainer div:nth-of-type(3) {
				animation-delay: 0.6s;
			}

			.contrainer div:nth-of-type(4) {
				animation-delay: 0.8s;
			}

			.contrainer div:nth-of-type(5) {
				animation-delay: 1s;
			}

			.contrainer2 {
				margin-top: 50px;
				width: 100%;
				height: 50px;
				background-color: darkgray;
			}

			.contrainer2 div {
				height: 50px;
				width: 20px;
				background-color: green;
				animation: down 3s infinite linear;
			}

			@keyframes down {
				0% {
					width: 0;
				}

				20% {
					width: 20%;
				}

				40% {
					width: 40%;
				}

				60% {
					width: 60%;
				}

				100% {
					width: 100%;
				}
			}
			.contrainer3{
				margin: auto;
				margin-top: 20px;
				width: 300px;
				height: 300px;
				background-color: black;
				position: relative;
			}
			.icon{
			
				width: 100px;
				height: 100px;
				position: absolute;
				left: calc(50% - 50px);
				top: calc(50% - 50px);
			}
			.icon>span{
				opacity: 0;
				width: 100%;
				height: 100%;
				/* border: white solid 1px; */
				position: absolute;
				animation: zhuan 6s infinite;
			}
			.icon>span:after{
				content: "";
				width: 10px;
				height: 10px;
				background-color: white;
				border-radius: 50%;
				display: block;
			}
			@keyframes zhuan{
				0%{
					transform: rotate(225deg);
					animation-timing-function: ease-out;
					opacity: 1;
				}
				10%{
					transform: rotate(360deg);
					animation-timing-function: linear;
					opacity: 1;
				}
				20%{
					transform: rotate(450deg);
					animation-timing-function: ease-in-out;
					opacity: 1;
				}
				50%{
					transform: rotate(720deg);
					animation-timing-function: linear;
					opacity: 1;
				}
				70%{
					transform: rotate(810deg);
					animation-timing-function: ease-out;
					opacity: 1;
				}
				80%{
					transform: rotate(945deg);
					animation-timing-function: ease-out;
					opacity: 0;
				}
				81%{
					transform: rotate(945deg);
					opacity: 0;
				}
				100%{
						transform: rotate(945deg);
						opacity: 0;
				}
			}
			.contrainer3 span:nth-child(2){
				animation-delay: 0.2s;
			}
			.contrainer3 span:nth-child(3){
				animation-delay: 0.4s;
			}
			.contrainer3 span:nth-child(4){
				animation-delay: 0.6s;
			}
			.contrainer3 span:nth-child(5){
				animation-delay: 0.8s;
			}
		</style>
	</head>
	<body>
		<div class="contrainer">
			<div class="rec1"></div>
			<div class="rec2"></div>
			<div class="rec3"></div>
			<div class="rec4"></div>
			<div class="rec5"></div>
			<div class="rec6"></div>
		</div>
		<div class="contrainer2">
			<div></div>
		</div>
		<div class="contrainer3">
			<div class="icon">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				
			</div>
		</div>
	</body>
</html>

乘法表

在这里插入图片描述

<script type="text/javascript">
			var i=1,j=1;
			for (i = 1; i <=9; i++){
				for (j=1;j<=i;j++) {
					document.write(j+"*"+i+"="+i*j+"\t");
					
				}
				document.write("<br/>")
			}
		</script>

四：

4.1 打印乘法表

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打印99乘法表---潘彬</title>
		<script type="text/javascript">
				var a;//计时器
				var i=1,j=1;//全局变量,没执行一次show函数,值改变
			function show(){
				a=setInterval(print,100);
			}
			function print(){
				if(i==1&&j==1){
						document.write("<table border='1' cellpadding='6'  style='border-collapse: collapse; color: white'>");
						//只打印一次
				}
				if(i==1){
					document.write("<tr>");//每行开头为j=1
				}
				//打印数据
				document.write("<td style='background-color: skyblue;'>"+i+"*"+j+"="+i*j+"</td>");
				if(i==j){
					document.write("</tr>");
					j++;
					i=1;//当j=i时,将i=1换行,否则i++不换行
				}else{
					i++;
				}
				if(j==10 ){
				document.write("</table>");
				document.write("<style>td{background-color: red !important;}</style>");
				clearInterval(a);//停止计时器
				}
			}
		</script>
	</head>
	<body>
		<div id="">
			<button type="button" onclick="show()">显示</button>
		</div>
		
	</body>
</html>

4.2 开关灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现开关灯</title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			var flag=0;
			function light(){
				var img=document.getElementById("img");
				var tip=document.getElementById("tip");
				if(flag==0){
				img.src="img/on.png"
				tip.innerHTML="灯亮了！！";
				flag=1;
				}else{
					img.src="img/off.png"
					tip.innerHTML="灯熄了！！";
					flag=0;
					
				}
				
				
			}
		</script>
	</head>
	<body onclick="light()">
			<div style="width: 200px; height: 300px;" >
				<img style="width: 200px; height: 300px;" id="img" src="img/off.png" >
			</div>
			<div id="tip" style="margin-top:20px ; font-size: 40px; "  >
					点击开关灯!
			</div>
	
		
	</body>
</html>

4.3简单计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现计算器</title>
		
	</head>
	<script type="text/javascript">
		function computer(obj){
			var oper=obj.value;
			var first=document.getElementById("firstNum").value;
			var second=document.getElementById("secondNum").value;
			var result=document.getElementById("result");
			var firstnum=parseFloat(first);
			var secondnum=parseFloat(second);
			if(first=="" || second=="" || firstnum.toString()=="NaN" || secondnum.toString()=="NaN"){
			// 当使用parseFloat后,string的typeof()也会是number,所以使用toString方法
			alert("数据输入错误");
			return;
			}
			
			switch (oper){
				case '+':result.value=firstnum+secondnum;
					break;
				case '-':result.value=firstnum-secondnum;
					break;
				case '*':result.value=firstnum*secondnum;
					break;
				case '/':
				secondnum!=0?result.value=firstnum/secondnum:alert("除数不能为零");
					break;
				default:alert("兄弟，你莫皮！")
					break;
			}
			
		}
	</script>
	<body>
		<form>
				<label>第一个数</label>
				<input type="text" id="firstNum"><br />
				<label>第二个数</label>
				<input type="text" id="secondNum"><br />
				<div style="margin-left: 80px;">
					<input id="comput" type="button" onclick="computer(this)" value="+"/>
					<input id="comput" type="button" onclick="computer(this)" value="-"/>
					<input id="comput" type="button" onclick="computer(this)" value="*"/>
					<input id="comput" type="button" onclick="computer(this)" value="/"/>
				</div>
				<label>计算结果</label>
				<input type="text" id="result" value="" />
		</form>
	</body>
</html>

4.4动态相册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#container {
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 200px;
				width: 600px;
				border: 1px dashed red ;
				background-color: antiquewhite;
			}

			#icon {
				width: 150px;
				height: 200px;
			}

			#icon img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				animation: imge_opacity 1.5s infinite;
			}
			td:hover{
				color: red;
				cursor: pointer;
			}
			#search {
				display: flex;
				align-items: center;
				flex-direction: column;
			}
			
			@keyframes imge_opacity {
				0% {
					opacity: 1;
					animation-timing-function: ease-in-out;
				}
			
				50% {
					opacity: 0.5;
				}
			
				100% {
					opacity: 1;
				}
			
			}
		</style>
		<script type="text/javascript">
			//获取事件
			function accident(){
				if (window.event)
					e = window.event;
				var ot;
				if (e.srcElement)
					ot = e.srcElement;//Ie兼容
				if (e.target)
					ot = e.target;
					// console.log(ot);
				return ot;
			}
			function nameClick(e) {
				var ot=accident();//拿到事件
				var name=ot.innerHTML;
				window.location.href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1555419748726_R&pv=&ic=&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word="+name;
			}
			function hover(){
				var ot=accident();//拿到事件
				// console.log(ot.innerHTML);
				var name=ot.innerHTML;
				// var name=this.innerHTML;
				img=document.getElementById("img");
				img.src="img/"+name+".jpg";//img/马里奥.jpg;
				clearInterval(a);
			}
			function mouseout(){
				a=setInterval(showimg,2000);
			}
			//显示动态图片
			function showimg(){
				var a=["渣渣辉","马里奥","范冰冰","杨幂","宋仲基","宋慧乔","张无忌","赵敏"];
				img=document.getElementById("img");
				var index =Math.floor(Math.random()*a.length);
				img.src="img/"+a[index]+".jpg";
			}
			
			function onlo(){
				a=setInterval(showimg,2000);
			}
			
		</script>
	</head>
	<body onload="onlo()">
		<div id="container">
			<div id="icon">
				<img id="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1054598549,1073845993&fm=111&gp=0.jpg">
			</div>

			<div id="search">
				<div>
					<form id="homeSearchForm" action="http://image.baidu.com/search/index" method="get">
						<div class="mui-input-row">
							<input type="hidden" name="tn" value="baiduimage">
							<input type="text" id="kw" name="word" placeholder="请输入要搜索的内容" style="font-size: 20px;">
							<input type="submit" value="搜索" style="font-size: 20px;">
						</div>

					</form>
				</div>
				<table cellspacing="16" cellpadding="5" style="text-align: center;">
					<tr>
						<td>马里奥</td>
						<td>渣渣辉</td>
					</tr>
					<tr>
						<td>范冰冰</td>
						<td>杨幂</td>
					</tr>
					<tr>
						<td>宋仲基</td>
						<td>宋慧乔</td>
					</tr>
					<tr>
						<td>张无忌</td>
						<td>赵敏</td>
					</tr>
				</table>
			</div>
		</div>

	</body>
</html>
<script type="text/javascript">
	var a = document.getElementsByTagName("td");
	for (var i = 0; i  < a.length; i++) {
			a[i].addEventListener("mouseover", hover, true);
			a[i].addEventListener("click", nameClick, true);
			a[i].addEventListener("mouseout", mouseout, true);
	}
	
</script>

4.5多彩时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多彩时钟</title>
		<style type="text/css">
			#container{
				width: 300px;
				height: 300px;
			}
			#container img{
				width: 300px;
				height: 300px;
			}
			#date{
				position: absolute;
				font-size: 40px;
				text-align: center;
				top: 130px;
				width: 300px;
				height: 30px;
			}
		</style>
		<script type="text/javascript">
			function randomColor(){
				var r=Math.round(Math.random()*255);
				var g=Math.round(Math.random()*255);
				var b=Math.round(Math.random()*255);
				return  "rgb("+r+","+g+","+b+")";
			}
			function showtime(){
				var nowDate=new Date();
				var dateid=document.getElementById("date");

				var hour=nowDate.getHours().toLocaleString();
				var minute=nowDate.getMinutes();
				var second=nowDate.getSeconds();
				if(hour<10){
					hour="0"+hour;
				}
				if(minute<10){
					minute="0"+minute;
				}
				if(second<10){
					second="0"+second;
				}
				var time=hour+":"+minute+":"+second;
				dateid.innerText=time;
				dateid.style.color=randomColor();
			}
			var timer=setInterval(showtime,1000);
		</script>
	</head>
	<body>
		<div id="container">
			<img src="img/time.jpg" >
			<div id="date" >
			</div>
		</div>
	</body>
</html>

4.6随机彩灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
				var timer;
				var fragement=document.createDocumentFragment();//创建fragement碎片
			function del(){
					var imgs=document.getElementsByTagName("img");//返回图片的数组
					for(var i=imgs.length-1;i>=0;i--){
						imgs[i].parentNode.removeChild(imgs[i]);
					}
					// console.log(fragement.firstChild);//没有孩子？
					clearInterval(timer);//将计时器停止
				}
			function show(){
				del();
				var count=document.getElementById("count").value;
				var countn=parseInt(count);
				// console.log(countn);//判断输入的值是什么,防止计数器运行
				if (count==""||countn.toString()=="NaN") {
					alert("输入错误");
					console.log("非数字");
					return;
				}
				var show=document.getElementById("show");
				
				for (var i=0;i<count;i++) {
					var e=document.createElement("img");
					e.setAttribute("src","img/off.png");
					e.setAttribute("title","0");
					e.setAttribute("width","120px");
					e.setAttribute("height","120px");
					fragement.appendChild(e);
				
				}
				show.appendChild(fragement);
				timer=setInterval(blink,100);
			}
			function blink(){
				var imgs=document.getElementsByTagName("img");//返回图片的数组
				var index=Math.floor(Math.random()*imgs.length);//获取随机图片index
				if (imgs[index].title=="0"){
					imgs[index].title="1";
					imgs[index].src="img/off.png";
				}else{
					imgs[index].title="0";
					imgs[index].src="img/on.png";
				}	
			}
		
		</script>
	</head>
	<body>
		
		输入显示的数量:
		<input type="text" id="count" />
		<input type="button" id="bt1" value="提交"  />
		<input type="button" id="bt2" value="清楚"  />
	
		<hr >
		<div id="show">

		</div>
	</body>
</html>
<script type="text/javascript">
	document.getElementById("bt1").addEventListener("click",show,true);
	document.getElementById("bt2").addEventListener("click",del,true);
</script>

4.7 金额转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function change(){
				 num=document.getElementById("num").value;
				if(num==""||isNaN(num) || num<0 ||num>=99999999999999){
					alert("输入错误");
					return;
				}
				 show1=document.getElementById("show1");
				 show2=document.getElementById("show2");
				var money=[];
				var money2=[];
				var left=[];
				var right=[];
				var str="";
				money=num.split(".");
				left=money[0];
				if(money[1]){right=money[1];}
				
			
				while(money[0].length>3){
					
				var	temp=money[0].substr(money[0].length-3);
					money[0]=money[0].substr(0,money[0].length-3);
					money2.push(temp);
				}
				if(money[0].length<=3){
					money2.push(money[0]);
				}
	
				while(money2.length>1){
					str+=money2.pop()+",";
				}
				str+=money2.pop();
				if(money.length<2){
					str+=".00";
				}else{
					str+="."+money[1];
				}
				
				show1.innerHTML=str;
					// 肆万伍仟肆佰伍拾贰元整
					var chinesenumber=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
					var a=["元","拾","佰","仟","万","十万","百万","千万","亿","拾亿"];
					var strRight="";
					var strLeft="";
				for(var i=0;i<right.length;i++){
					strRight+= chinesenumber[right[i]];
				}
				
				for(var i=0;i<left.length;i++){
					strLeft+=chinesenumber[left[i]];
				}
				
				show2.innerHTML=strLeft;
				
			}
			function flush(){
				console.log(num)
					document.getElementById("num").value="";
					show1.innerHTML="";
					show2.innerHTML="";
			}
		</script>
	</head>
	<body>
		<div id="">
			输入你要转换的金额：
			<input type="text" name="" id="num" value="" /><br />
			<button type="button" onclick="change()">转换</button>
			<button type="button" onclick="flush()">刷新</button><br />
				转换后的钱：		<span id="show1"></span><br />
				转换后的钱中文:<span id="show2"></span>
		</div>
	</body>
</html>

4.8留言板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arry=[];
			function ly(){
				var name=document.getElementById("name").value;
				var ly1=document.getElementById("ly1").value;
				var liuyan=document.getElementById("lycontent");
				var temp="["+name+"]在"+new Date().toLocaleString()+"说："+ly1+"\n";
				arry.unshift(temp);
				 liuyan.innerHTML=arry.join("");
				 if(arry.length>10){
					 arry.pop()
				 }
			}
		</script>
	</head>
	<body>
		<form action="" method="">
			<div class="">
			<label>姓名：</label>
			<input id="name" type="text" placeholder="姓名">
		</div>
		<div class="">
			<label>留言：</label>
			<textarea id="ly1" rows="4" cols="20">
			</textarea>
		</div>
			<input type="reset" value="重置"/>
			<input type="button" onclick="ly()" value="提交"/>
		</form>
		<textarea id="lycontent" rows="12" cols="50" disabled="disabled">
			
		</textarea>
		
		
		
	</body>
</html>

五：多级联动

多级联动

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var allprovinces;
			function onload(){
				province= document.getElementById("province");
				city= document.getElementById("city");
				county= document.getElementById("county");
				town= document.getElementById("town");
				village= document.getElementById("village");
				info=document.getElementById("info");
				var xhr=new XMLHttpRequest();
				xhr.open("get","js/area/area.xml",true);
				xhr.send();
				xhr.onreadystatechange=function(){
					if (xhr.readyState==4 && xhr.status==200) {
					area=xhr.responseXML;
					allprovinces=area.getElementsByTagName("province");
					for( var i=0;i<allprovinces.length;i++){
						province.options[i]=new Option(allprovinces[i].attributes.name.value);
					}
					changecity();
					info.innerHTML=provinceInfo+cityInfo+countyinfo+towninfo+villageinfo;
				}
				}
			}				

			function requestcity(id){
				var xhr=new XMLHttpRequest();
				xhr.open("get","js/area/"+id+".xml",false);
				xhr.send();
				cityarea=xhr.responseXML;
			}
			function changecity(){
				town.length=0;
				village.length=0;
				// 防止没有后面镇的显示
				provinceInfo=province.options[province.selectedIndex].value;//储存选择信息

				requestcity(allprovinces[province.selectedIndex].id);//调用函数获取当前城市
				citynames=cityarea.getElementsByTagName("city");
				for( var i=0;i<citynames.length;i++){
					city.options[i]=new Option(citynames[i].attributes.name.value);
				}
				changecounty();
			}
			function changecounty(){
				cityInfo=city.options[city.selectedIndex].value;

				countynames=citynames[city.selectedIndex].getElementsByTagName("county");
				for( var i=0;i<countynames.length;i++){
					county.options[i]=new Option(countynames[i].attributes.name.value);
				}
				changetown();
			}
			
			function changetown(){
				console.log("ddd")
				townnames=countynames[county.selectedIndex].getElementsByTagName("town");
				countyinfo=county.options[county.selectedIndex].value;
				//判断是否存在后面的信息
				if(townnames.length==0){
					towninfo="";
					villageinfo="";
					document.getElementById("other").style.display="none";
					return;
				}else{
						document.getElementById("other").style.display="";
				}
				for( var i=0;i<townnames.length;i++){
					town.options[i]=new Option(townnames[i].attributes.name.value);
				}
				changevillage();
			}
			function changevillage(){
				towninfo=town.options[town.selectedIndex].value;
				villagenames=townnames[town.selectedIndex].getElementsByTagName("village");
				for( var i=0;i<villagenames.length;i++){
					village.options[i]=new Option(villagenames[i].attributes.name.value);
				}
				villageinfo=village.options[village.selectedIndex].value;
			}
			function show(){
				info.innerHTML=provinceInfo+cityInfo+countyinfo+towninfo+villageinfo;
			}
		</script>
	</head>
	<body onload="onload()">
		请选择省：<select name="" id="province" onchange="changecity()"></select><br />
		请选择市：<select name="" id="city" onchange="changecounty()"></select><br />
		请选择县/区：<select name="" id="county" onchange="changetown()"></select><br />
		<div id="other">
			请选择镇/街道：<select name="" id="town" onchange="changevillage()"></select><br />
		请选择乡/村：<select name="" id="village" onchange=""></select><br />
		</div>

		你选择的住所的是：
		<span id="info" style="color: blue;"></span>
	</body>
	<script type="text/javascript">
		var sle=document.getElementsByTagName("select");
		for(var i=0;i<sle.length;i++){
			sle[i].addEventListener("change",show,true);
		}
	</script>
</html>

Json请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function fun() {
				var xhr = new XMLHttpRequest();
				xhr.open("get", "js/depart.json", false);
				xhr.send();
				var jsontxt = xhr.responseText;//储存同步请求到的数据
				schools = eval(jsontxt);//json数据转换成对象
				school = document.getElementById("school");
				//将school传到第一个下拉框中
				for (var i = 0; i < schools.length; i++) {
					school.options[i] = new Option(schools[i].school);
				}
				maj = document.getElementById("major");
				
				for (i = 0; i < schools[0].major.length; i++) {
					maj.options[i] = new Option(schools[0].major[i]);
				}
				document.getElementById("info").innerHTML=schools[0].school+"--"+schools[0].major[0];
			}

			function changMj() {
				index = school.selectedIndex;
				maj.length = 0;
				for (i = 0; i < schools[index].major.length; i++) {
					maj.options[i] = new Option(schools[index].major[i]);
				}
				document.getElementById("info").innerHTML=schools[index].school+"--"+schools[index].major[0];
			}
			
			function changInfo(){
				document.getElementById("info").innerHTML=schools[index].school+"--"+schools[index].major[maj.selectedIndex];
			}
		</script>
	</head>
	<body onload="fun()">
		<!-- <button type="button" onclick="fun()">11</button> -->
		学院：<select id="school" onchange="changMj()"></select>
		专业：<select id="major" onchange="changInfo()"></select><br />
		<hr />
		选择的专业:<span id="info"></span>
	</body>
</html>

7：国旗绘制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绘图</title>
		<script type="text/javascript">
			function createStart(g,x0,y0,r,angle){
				g.beginPath();
			var dig=Math.PI*2/5*2;
			for(var i=0;i<5;i++){
				var x=x0+Math.cos(Math.PI/2+dig*i+angle)*r;
				var y=y0-Math.sin(Math.PI/2+dig*i+angle)*r;
				g.lineTo(x,y)
			}
			g.closePath();
			g.fillStyle="yellow";
			g.fill();
			}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="600px" height="400px" style="background-color: red;"></canvas>
		<script type="text/javascript">
			var can=document.getElementById("canvas");
			var g=can.getContext("2d");
			createStart(g,100,100,60,0);
			createStart(g,200,40,20,Math.PI/2+Math.atan2(3,5));
			createStart(g,240,80,20,Math.PI/2+Math.atan2(1,7));
			createStart(g,240,140,20,Math.atan2(7,2));
			createStart(g,200,180,20,Math.atan2(5,4));
		</script>
	</body>
	
</html>

音乐播放器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/getXML.js"></script>
		<script src="js/jquery-3.4.0.min.js"></script>
		<style>
			#back{
				background-image: url(img/background.jpg);
				background-size: 800px 600px;
				width: 800px;
				height: 600px;
				border: 1px solid;
				position: absolute;
				left: 50%;
				margin-left: -400px;
			}
			#con{
				float: left;
				width: 380px;
				height: 400px;
			}
			audio{
				margin-top: 10px;
				margin-left: 10px;
				width: 360px;
				height: 50px;
			}
			button{
				margin-left: 15px;
				margin-top: 10px;
				margin-left: 35px;
				width: 80px;
				height: 30px;
				border-radius: 12%;
				border: 0;
			}
			form{
				margin-left: 20px;
				margin-top: 30px;
			}
	
			select{
				background:none;
				border: 1px solid #9194a7; 
				line-height: 40px; 
				font-size: 16px;
				width: 360px;
			}
			#right {
				position: absolute
				float: right;
				width: 400px;
				height: 400px;
			}
			#zhuan{
				position: absolute;
				width: 200px;
				height: 200px;
				right: 100px;
				z-index: 1;
				top: 100px;
			}
			.zhuan{
				animation: playmove 3s infinite linear;
				}
				@keyframes playmove{
					0%{
						transform: rotate(0deg);
					}
					100%{
						transform: rotate(360deg);
					}
				}
				#pointer{
					height: 200px;
					top: -10px;
					position: absolute;
					right: 100px;
					z-index: 2;
				}
				#pointer:hover{
					cursor: pointer;
				}
				.pointer-pause{
					animation: pointerpause 1s 1 linear;
					transform-origin: 38% 0%;
					transform: rotate(-30deg);
				}
				@keyframes pointerpause {
					0%{
						transform-origin: 38% 0%;
						transform: rotate(0deg);
					}
					100%{
						transform-origin: 38% 0%;
						transform: rotate(-30deg);
					}
				}
				.pointer-play{
					animation: pointerplay 1s 1 linear;
				}
				@keyframes pointerplay {
					0%{
						transform-origin: 38% 0%;
						transform: rotate(-30deg);
					}
					100%{
						transform-origin: 38% 0%;
						transform: rotate(0deg);
					}
				}
				#lrc1,#lrc5{
					opacity: 0.3;
					font-size: 12px;
					color: black;
					margin: 10px;
				}
				#lrc2,#lrc4{
					opacity: 0.6;
					font-size: 15px;
					color: black;
					margin: 10px;
				}
				#lrc3{
					opacity: 1;
					font-size: 18px;
					font-weight: bold;
					color: red;
					margin: 10px;
				}
				#down{
					text-align: center;
					height: 180px;
					width: 800px;
					position: absolute;
					top: 420px;
				}
		</style>
	</head>
	<body onload="loadMusic()">
		<div id="back">
			<div id="con">
				<audio id="audio" controls="controls" src="src/JC-说散就散.mp3" autoplay="autoplay" preload="auto">
				</audio><br />
				<button id="last">上一首</button>
				<button id="pp">暂停</button>
				<button id="next">下一首</button>
				<form>
					<input type="radio" name="playWay" onclick="playStyle(0)" checked="checked" />列表循环
					<input type="radio" name="playWay" onclick="playStyle(1)" />单曲循环
					<input type="radio" name="playWay" onclick="playStyle(2)" />随机播放<br /><br />
					播放进度：<input type="range" id="range" min="0" onchange="currentChange()" /><span id="time">当前/全部</span><br /><br />
					正在播放：<span id="number"></span><br /><br />
					<hr />
					<br />
					<select id="mus" size="5" onchange="clickMusic()"></select>
				</form>
			</div>
			<div id="right">
				<img src="img/play.png" id="zhuan" class="zhuan" />
				<img src="img/pointer.jpg" id="pointer" class="pointer" onclick="changepp()" />
			</div>
			<div id="down">
				<div id="lrc1"></div>
				<div id="lrc2"></div>
				<div id="lrc3"></div>
				<div id="lrc4"></div>
				<div id="lrc5"></div>
			</div>
		</div>
	</body>
	<script>
		var index = 0;
		var musics;
		var last = document.getElementById("last");
		var pp = document.getElementById("pp");
		var next = document.getElementById("next");
		var audio = document.getElementById("audio");
		var musicsel = document.getElementById("mus");
		var playindex = document.getElementById("number");
		var radioNum = document.getElementsByName("playWay");
		var time = document.getElementById("time");
		var lrcShowArray = new Array(document.getElementById("lrc1"),
			document.getElementById("lrc2"),
			document.getElementById("lrc3"),
			document.getElementById("lrc4"),
			document.getElementById("lrc5")
		);
		var timeArray = new Array(),
			lrcArray = new Array();
		last.addEventListener("click", changeLast, false);
		pp.addEventListener("click", changepp, false);
		next.addEventListener("click", changeNext, false);
		audio.addEventListener("timeupdate", showTime, true);
		audio.addEventListener('durationchange', function() {
			loadLyric();
			showTime();
		}, true);
		audio.addEventListener("pause", function() {
			$("#zhuan").removeClass("zhuan"); //JQuery属性,移除一个类
			$("#pointer").addClass("pointer-pause");
			$("#pointer").removeClass("pointer-play");
		}, true);
		audio.addEventListener("play", function() {
			$("#zhuan").addClass("zhuan"); //JQuery属性,添加一个类
			$("#pointer").addClass("pointer-play");
			$("#pointer").removeClass("pointer-pause");
		}, true)

		function changepp() {
			if (audio.paused) {
				audio.play();
				pp.innerHTML = "暂停";
			} else {
				audio.pause();
				pp.innerHTML = "播放";
			}
		}

		function changeLast() {
			index--;
			if (index < 0) {
				index = 11;
			}
			audio.setAttribute("src", "src/" + musics[index].innerHTML + "mp3");
			audio.load();
			renew();
		}

		function changeNext() {
			if (radioNum[0].checked) {
				index++;
			} 
			if (radioNum[1].checked) {
					index = index;
			} 
			 if (radioNum[2].checked) {
					randindex = Math.floor(Math.random() * musics.length);
					index=randindex;
			}
			if (index > musics.length) {
				index = 0;
			}
			audio.setAttribute("src", "src/" + musics[index].innerHTML + ".mp3");
			audio.load();
			renew();
		}

		function getMusic() {
			var musicXML = getXmlDoc("mymusic.xml");
			musics = musicXML.getElementsByTagName("name");
		}

		function loadMusic() {
			getMusic();
			for (var i = 0; i < musics.length; i++) {
				musicsel.options[i] = new Option(musics[i].innerHTML);
			}
			musicsel.selectedIndex = index;
			renew();
			loadLyric();
			audio.addEventListener("ended", changeNext, true);

		}

		function renew() {
			var str = index + 1 + "/" + musics.length + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" + musics[
				index].innerHTML + ".mp3";
			playindex.innerHTML = str;
		}

		function playStyle(i) {
			radioNum[i].checked = true;
		}

		function clickMusic() {
			index = musicsel.selectedIndex;
			audio.setAttribute("src", "src/" + musics[index].innerHTML + ".mp3");
			audio.load();
			renew();
			loadLyric();
		}

		function asTime(i) {
			i = Math.round(i);
			var min = Math.floor(i / 60);
			var sec = i % 60;
			if (min < 10) {
				min = "0" + min;
			}
			if (sec < 10) {
				sec = "0" + sec;
			}
			return min + ":" + sec;
		}

		function currentChange() {
			audio.currentTime = document.getElementById("range").value / 100 * audio.duration;
		}

		function loadLyric() {
			lrcline = 0;
			try {
				var lrcDoc = getTextDoc("lyric/" + musics[index].innerHTML + ".lrc");
				timeArray = lrcDoc.match(/\[(\d+)\:(\d+)\.(\d+)\]/g);
				lrcArray = lrcDoc.match(/\].{1,}/g);
				for (var i = 0; i < timeArray.length; i++) {
					timeArray[i] = timeArray[i].replace(/\[/g, "");
					timeArray[i] = timeArray[i].replace(/\.(\d+)\]/g, "");
					lrcArray[i] = lrcArray[i].replace(/\]/g, "");
				}
				updateLrc(lrcline);
			} catch (e) {
				$("td>div").html("");
				$("td>div").eq(2).html("没有歌词！");
			}
		}

		function updateLrc(i) {
			for (var k = 0; k < 5; k++, i++) {
				if (lrcArray[i - 2] == undefined) {
					lrcShowArray[k].innerHTML = "";
				} else {
					lrcShowArray[k].innerHTML = lrcArray[i - 2];
				}
			}
		}

		function showTime() {
			time.innerHTML = asTime(audio.currentTime) + "/" + asTime(audio.duration);
			for (var i = 0; i < lrcArray.length; i++) {
				if (asTime(audio.currentTime) >= timeArray[i]) {
					lrcline = i;
				} else if (asTime(audio.currentTime) < timeArray[i]) {
					lrcline = i - 1;
					break;
				}
			}
			document.getElementById("range").value = Math.floor(audio.currentTime / audio.duration * 100);
			updateLrc(lrcline);
		}
	</script>
</html>

dex = musicsel.selectedIndex;
			audio.setAttribute("src", "src/" + musics[index].innerHTML + ".mp3");
			audio.load();
			renew();
			loadLyric();
		}

		function asTime(i) {
			i = Math.round(i);
			var min = Math.floor(i / 60);
			var sec = i % 60;
			if (min < 10) {
				min = "0" + min;
			}
			if (sec < 10) {
				sec = "0" + sec;
			}
			return min + ":" + sec;
		}

		function currentChange() {
			audio.currentTime = document.getElementById("range").value / 100 * audio.duration;
		}

		function loadLyric() {
			lrcline = 0;
			try {
				var lrcDoc = getTextDoc("lyric/" + musics[index].innerHTML + ".lrc");
				timeArray = lrcDoc.match(/\[(\d+)\:(\d+)\.(\d+)\]/g);
				lrcArray = lrcDoc.match(/\].{1,}/g);
				for (var i = 0; i < timeArray.length; i++) {
					timeArray[i] = timeArray[i].replace(/\[/g, "");
					timeArray[i] = timeArray[i].replace(/\.(\d+)\]/g, "");
					lrcArray[i] = lrcArray[i].replace(/\]/g, "");
				}
				updateLrc(lrcline);
			} catch (e) {
				$("td>div").html("");
				$("td>div").eq(2).html("没有歌词！");
			}
		}

		function updateLrc(i) {
			for (var k = 0; k < 5; k++, i++) {
				if (lrcArray[i - 2] == undefined) {
					lrcShowArray[k].innerHTML = "";
				} else {
					lrcShowArray[k].innerHTML = lrcArray[i - 2];
				}
			}
		}

		function showTime() {
			time.innerHTML = asTime(audio.currentTime) + "/" + asTime(audio.duration);
			for (var i = 0; i < lrcArray.length; i++) {
				if (asTime(audio.currentTime) >= timeArray[i]) {
					lrcline = i;
				} else if (asTime(audio.currentTime) < timeArray[i]) {
					lrcline = i - 1;
					break;
				}
			}
			document.getElementById("range").value = Math.floor(audio.currentTime / audio.duration * 100);
			updateLrc(lrcline);
		}
	</script>
</html>