网页设计与制作实验九Javascript 高级应用

小孙同学1024

已于 2023-11-21 15:46:46 修改

阅读量453

点赞数

分类专栏：网页设计与制作实验报告文章标签： javascript 前端开发语言 css html

于 2023-06-21 00:08:07 首次发布

本文链接：https://blog.csdn.net/Annzz123/article/details/131317404

版权

网页设计与制作实验报告专栏收录该内容

10 篇文章 5 订阅

订阅专栏

本文通过三个实验展示了JavaScript在HTML5中的应用，包括使用canvas进行图形绘制，实现走马灯图片滚动效果，以及焦点图的自动轮播功能，涉及到JavaScript事件响应、定时器以及DOM操作等技术。

摘要由CSDN通过智能技术生成

一、实验目的

1．掌握 JavaScript 对象模型。

2．掌握 JavaScript 事件响应。

3．掌握 JavaScript 高级用法。

二、实验环境

1．硬件：计算机。操作系统： Windows；

2．软件：HBuilder；

三、实验内容

1、canvas 绘图

实验步骤

1）新建html文档

2）设置网页标题

3）创建canvas画布，再用js创建起始坐标点，设置点后连接而成。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas 绘图</title>
	</head>
	<body>
		<canvas id="myCanvasl" width="400px" height="300px"></canvas><!-- 设置画布 -->
		<script>
				var c=document.getElementById("myCanvasl");
				var cxt=c.getContext("2d");
				cxt.moveTo(10,100);
				cxt.lineTo(50,200);
				cxt.lineTo(350,50);
				cxt.stroke();
		</script>
	</body>
</html>

2、走马灯

实验步骤

1）新建html文档

2）设置网页标题

3）分别新建html、css、js文件，在html文件中用无序列表添加照片，在css文件中修改和添加样式，在js文件中引用相应的函数使达到图片向左移动，鼠标悬浮时停止的效果。

html中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>走马灯</title>
		<link href="./2.css" type="text/css"  rel="stylesheet"/>
	</head>
	<body>
		<div>
			<ul id="box">
				<li><img src="img/04.jpg"></li>
				<li><img src="img/05.jpg"></li>
				<li><img src="img/06.jpg"></li>
				<li><img src="img/07.jpg"></li>
				<li><img src="img/04.jpg"></li>
				<li><img src="img/05.jpg"></li>
			</ul>
		</div>
		<script src="2.js" type="text/javascript"></script>
	</body>
</html>

css中：

*{
	padding: 0px;
	margin: 0px;
}
body{
	background-color:#ffffff ;
}
div{
	width: 620px;/* 根据图片设置宽度 */
	height: 465px;/* 根据图片设置高度 */
	border: 1px solid black;
	overflow: hidden;/* 溢出隐藏 */
	margin: 0 auto;
	position: relative;/* 相对定位 */
}
ul{
	list-style: none;/* 去除列表项 */
	width: 1860px;/* 四个图片的宽度 */
	height: 465px;
	position: absolute;/* 绝对定位 */
	left: 0;
	top: 0;
}
li{
	float: left;
}

js中：

window.onload=function(){
	var box=document.getElementById("box");
	var num=0;//偏移量
	var timer=null;
	function autoplay(){
	timer=window.setInterval(function(){
		num-=5;
		if(num<-1240){
			num=0;
			}
		box.style.left=num+'px';//js修改css
		},55);
	}
	autoplay();
	//鼠标移动到走马灯停
	box.onmouseover=function(){
		window.clearInterval(timer);
		}
	//鼠标移开走马灯继续
	box.onmouseout=function(){
		autoplay();
		}
}

3、焦点图自动轮播

实验步骤

1）新建html文档

2）设置网页标题

3）分别新建html、css、js文件

4）在html文件中，首先创建一个大的div，在大的div中再创建div，再这个div中创建无序列表用于要存放轮播的图片。再创建第二个div里面创建span标签用于存放轮播图左右按钮。再创建第三个div，里面添加无序列表用于实现轮播图左下方的小圆点。

5）在css文件中，分别对各个模块进行样式的设置。

6）在js文件中，创建与效果相应的函数，实现图片的自动轮播和手动点击轮播等功能。

html中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>焦点图自动轮播</title>
		<link href="./3.css" type="text/css" rel="stylesheet">
		<script src="./3.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="container">
			<div id="tupian">
				<ul id="tupianul">
					<li class="current"><a href="#"><img src="img/0.jpg" alt="狮子" /></a></li>
					<li><a href="#"><img src="img/1.jpg" alt="外滩" /></a></li>
					<li><a href="#"><img src="img/2.jpg" alt="湖水" /></a></li>
					<li><a href="#"><img src="img/3.jpg" alt="印度" /></a></li>
					<li><a href="#"><img src="img/4.jpg" alt="山羊" /></a></li>
				</ul>
			</div>
			<div id="anniu">
				<span id="zuoanniu"></span>
				<span id="youanniu"></span>
			</div>
			<div id="heikuang">
				<ul id="xiaoyuandianul">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li class="current"></li>
				</ul>
			</div>
		</div>
		
	</body>
</html>

css中：

*{
	padding: 0px;
	margin: 0px;
}
#container {
	width: 560px;
	height: 300px;
	margin: 100px auto;
	position: relative;
}
#tupian ul {
	list-style: none;
}
#tupianul li {
	display: none;
}
#tupianul li.current {
	display: block;
}
#zuoanniu {
	position: absolute;
	top: 130px;
	left: 10px;
	background: url(img/png24.png) 0 0 no-repeat;
	width: 45px;
	height: 45px;
}
#youanniu {
	position: absolute;
	top: 130px;
	right: 10px;
	background: url(img/png24.png) 0 -48px no-repeat;
	width: 45px;
	height: 45px;
}
#heikuang{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background: url(img/hei.png);
}
#heikuang ul{
	list-style: none;
	float: right;
	width: 142px;
	padding-top: 14px;
}
#heikuang ul li{
	float: left;
	width: 14px;
	height: 14px;
	margin-right: 10px;
	background: url(img/png24.png) no-repeat -23px -125px;
}
#heikuang ul li.current{
	background-position:  -9px -125px;
}

js中：

window.onload = function() {
	var myimgs = document.getElementById("tupianul").getElementsByTagName("img");
	var mytulis = document.getElementById("tupianul").getElementsByTagName("li");
	var nowimg = 0;
	var mytimer = 0;
	var myleftbut = document.getElementById("zuoanniu");
	var myrightbut = document.getElementById("youanniu");
	var mydianlis =  document.getElementById("xiaoyuandianul").getElementsByTagName("li");
	mytimer = window.setInterval(dong, 2000);
	myrightbut.onclick = dong;
	myleftbut.onclick = function(){
		if(nowimg > 0){
			nowimg --;
		}else{
			nowimg = mytulis.length - 1;
		}			
		huantu();	//调用换图函数
		shezhixiaoyuandian();
	}
	function dong() {
					//先折腾信号量
		if (nowimg < mytulis.length - 1) {
			nowimg++;
		} else {
			nowimg = 0;
		}
		huantu(); //调用换图函数
		shezhixiaoyuandian();
	}
	function huantu() {
		//让所有的li都去掉cur
		for (var i = 0; i <= mytulis.length - 1; i++) {
			mytulis[i].className = "";
		}
		//信号量是几，就把cur交给第几个li
		mytulis[nowimg].className = "current";
	}		
	function shezhixiaoyuandian(){
		//让所有的li都去掉cur
		for(var i = 0 ; i <= mytulis.length - 1 ; i++){
			mydianlis[i].className = "";
		}
		//信号量是几，就把cur交给第几个li
		mydianlis[nowimg].className = "current";
	}
}