Web（3）JavaScript开发动态文档

最新推荐文章于 2024-03-04 01:36:32 发布

<千繁/>

最新推荐文章于 2024-03-04 01:36:32 发布

阅读量343

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44113772/article/details/116764415

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一基本概念

动态文档的定义：文档通过浏览器进行显示时，还可以通过用户交互或者浏览器事件对标签特性，标签内容，元素样式进行修改的文档。可通过嵌入式的脚本完成修改，脚本可以将文档元素作为相关文档对象模型结构的对象来访问。

二.元素定位

2.1绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.regtext{font-family: times;font-size: 1.2em;width: 500px;
					 position: absolute;top: 100px;left: 100px;}
			/*
			将position的值设置为absolute，表示元素的位置与其他元素的位置无关
			如果元素是在另一个定位元素内部进行绝对定位，那么left，top的属性值将从这个外部元素的左上角定位。
			 */
			.abstext{position: absolute;top: 25px;left: 25px;
					 font-family: times;font-size: 1.9em;
					 font-style: italic;letter-spacing: 1em;
					 color: blue; width: 450px;}
		</style>
	</head>
	<body>
		<p class="regtext">
			Relying on the advantages of Internet data resources and natural language processing technology, we are committed to helping users cross the language gap,
			
			Convenient access to information and services. It supports the translation of more than 200 languages around the world, including Chinese (Simplified), English and Chinese
			
			English, Japanese, Korean, Spanish, Thai, French and Arabic, covering more than 40000 translation directions,
			
			It supports more than 400000 enterprises and individual developers through the open platform, and is the first translation product in the domestic market share.
			<span class="abstext">
				bai du fan yi
			</span>
		</p>
	</body>
</html>

2.2相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
					.regtext{font: times 2em;}
					/*
					将position的值设置为absolute，表示元素的位置与其他元素的位置无关
					如果元素是在另一个定位元素内部进行绝对定位，那么left，top的属性值将从这个外部元素的左上角定位。
					 */
					.spectext{font: times 2em;color: blue; position: relative;top: 30px;}
				</style>
			<!--将position的值设置为absolute或者relative表示元素的位置可以移动，通过修改top和left-->
			
	</head>
	<body>
		<p class="regtext">
			Every day eat a 
			<span class="spectext">Apple</span>
		</p>
	</body>
</html>

2.3静止定位

position默认值是static,不可以设置top，left。

3.移动元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function moveIt(movee,newTop,newLeft){
				dom=document.getElementById(movee).style;
				dom.top=newTop+"px";
				dom.left=newLeft+"px";
			}
		</script>	
			//将position的值设置为absolute或者relative表示元素的位置可以移动，通过修改top和left
			//absolute,元素将移动到指定的位置。
			//relative，元素将移动距离指定属性值大小的位置。
	</head>
	<body>
		<form action="">
			<p>
				<label>
					x-coordinate:
					<input type="text" id="leftCoord" size="3" />
				</label>
				<br />
				<label>
					y-coordinate:
					<input type="text" id="topCoord" size="3" />
				</label>
				<br />
				<input type="button" value="Move it" onclick="moveIt('saturn',document.getElementById('topCoord').value,document.getElementById('leftCoord').value)" />
			</p>
		</form>
		<div id="saturn" style="position: absolute; top:130px;left:0;">
			<img src="images/error.jpg" alt="(Picture of Saturn)"/>
		</div>
	</body>
</html>

4.元素隐藏，显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
//显示和隐藏的奥秘就在这里
			function flipImg(){
				dom=document.getElementById("saturn").style;
				if(dom.vistbility=="visible")
					dom.visibility="hidden";
				else
					dom.visibility="visible";
			}
		</script>
	</head>
	<body>
		<form action="">
			<div id="saturn" style="position: relative; visibility: visible;">
				<img src="images/error.jpg" alt="(Picturn of saturn)" />
			</div>
			<p>
				<br />
					<input type="button" value="Move it" onclick="flipImg()" />
			</p>
		</form>
	</body>
</html>

或者还可以

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			function hideImg(){
				var img = document.getElementById("img1");
				img.style.display = "none";//就是这个语句
			}
			
			function showImg(){
				var img = document.getElementById("img1");
				img.style.display = "block";//还有这个语句
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示" onclick="showImg()" />
		<input type="button" value="隐藏" onclick="hideImg()" /><br />
		
		<img src="../img/1-161104143944.gif" id="img1" />

	</body>
</html>

5.修改字体和颜色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function setColor(where，newColor){
				if(where=="background")
					document.body.style.backgroundColor=newColor;
				else
					document.body.style.color=newColor;
			}
		</script>
	</head>
	<body>
		<p style="font-family: times; font-style: italic; font-size: 2em;">
			Relying on the advantages of Internet data resources and natural language processing technology, we are committed to helping users cross the language gap,
		</p>
		<form action="">
					<p>
						<label>
							Background color:
							<input type="text" name="background" size="10" onchange="setColor('background',this.value)" />
						</label>
						<br />
						<label>
							Foreground color:
							<input type="text" name="foreground" size="10" onchange="setColor('foreground',this.value)" />
						</label>
						<br />
					</p>
				</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.regText{font:1.1em 'Times New Roman';}
			.wordText{color:blue;}
		</style>
	</head>
	<body>
		<p class="regText">
			Relying on the advantages of Internet data resources and natural language processing technology,  
		<span class="wordText";
		 onmouseover="this.style.color='red';this.style.fontStyle='italic';
		              this.style.fontSize='2em';";
		 onmouseout="this.style.color='green';this.style.fontStyle='normal';
		              this.style.fontSize='1.1em';";>
		 we are committed to helping users cross the
		</span>
		language gap
		</p>
	</body>
</html>

6.动态内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script >
			function init(){
				//得到表格
				var tab = document.getElementById("tab");
				//得到表格中每一行
				var rows = tab.rows;
				//便利所有的行,然后根据奇数 偶数
				for(var i=1; i < rows.length; i++){
					var row = rows[i];  //得到其中的某一行
					if(i%2==0){
						row.bgColor = "yellow";
					}else{
						row.bgColor = "red"
					}
				}
			}
		</script>
	</head>
	<body onload="init()">
		<table border="1px" width="600px" id="tab">
			<tr >
				<td>
					<input type="checkbox" />
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>1</td>
				<td>手机</td>
				<td>oppo</td>
				<td>我用的</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>食品</td>
				<td>充气硬糖</td>
				<td>甜的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑</td>
				<td>联想</td>
				<td>跳楼价售卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>零食</td>
				<td>辣条</td>
				<td>辣的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>壁纸</td>
				<td>风景</td>
				<td>简约风格</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		</table>
	</body>
</html>

7.堆叠元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="application/javascript" >
				var topp="plane3";//使用topp，是因为JS中有关键字top
				function toTop(newTop){
					domTop=document.getElementById(topp).style;
					domNew=document.getElementById(newTop).style;
					domTop.zIndex="0";
					domNew.zIndex="10";
					topp=newTop;
				}
		</script>
		<style>
			.plane1{position: absolute;top: 0;left: 0;z-index: 0;}//z-index较大的在上方
			.plane2{position: absolute;top: 50;left: 50;z-index: 0;}//z-index较小的被隐藏
			.plane3{position: absolute;top: 100;left: 100;z-index: 0;}
		</style>
	</head>
	<body>
		<p >
				<img class="plane1" id="plane1" height="300" width="450" src="images/error.jpg" alt="picture" onclick="toTop('plane1')" />
				<img class="plane2" id="plane2" height="300" width="450" src="images/error.jpg" alt="picture" onclick="toTop('plane2')" />
				<img class="plane3" id="plane3" height="300" width="450" src="images/error.jpg" alt="picture" onclick="toTop('plane3')" />
		</p>
	</body>
</html>

8.定位鼠标光标

鼠标点击事件是Mouse_Event接口的实现。它定义了clientX，clientY以像素为单位的定位坐标。还有srceenX,srceenY，但是这两个是以相对计算机屏幕计算使用的。

9.响应鼠标点击

mousedown，mouseup

10.定时器

setInterval : 每隔多少毫秒执行一次函数
setTimeout: 多少毫秒之后执行一次函数
clearInterval
clearTimeout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		//定时弹出广告照片
		<script>
		
			function init(){
				setTimeout("showAD()",3000);
			}
			
			function showAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//显示广告
				img.style.display = "block";
				
				//再开启定时器,关闭广告
				setTimeout("hideAD()",3000);
			}
			
			function hideAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//隐藏广告
				img.style.display = "none";
			}
		</script>
	</head>
	<body onload="init()">
		<img id="img1" src="2c_g.jpg" width="100%" style="display: none;"/>
	</body>
</html>