document操作例题4

Posted 2020-10-30 w944372441

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了document操作例题4相关的知识，希望对你有一定的参考价值。

六.进度条
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		margin:auto
	 }
	#kuang{
		height:30px;
		border:2px solid #999}
	#tiao{
		height:30px;
		background-color:red;
		float:left}	
</style>
</head>

<body>
<div id="kuang" style="width:600px;">
	<div id="tiao" style="width:0px;"></div>
</div>
<input type="button" value="前进" onclick="Qian()"/>
<input type="button" value="后退" onclick="Hou()"/>
</body>
<script type="text/javascript">
	var x;													//定义变量x
	var y;
	function Qian()
	{	
		 x=window.setInterval("Jindu()",1);					//将间隔操作赋值给变量x，同时执行每隔1毫秒执行一次函数			
		 window.clearInterval(y);							//清除间隔变量y，在这可理解为当执行y操作时再执行x操作可以终止y操作
	}
	function Jindu()
	{
		var kuang=document.getElementById("kuang");				
		var tiao=document.getElementById("tiao");
		var kc=parseInt(kuang.style.width);					//将获取到的样式取整后赋值给变量kc
		var tc=parseInt(tiao.style.width);
		if(tc>=kc)											//条件判断
		{
			window.clearInterval(x);						//清除间隔变量x，此时x已存有间隔操作
			return;											//条件符合的话用return终止函数向下执行。	
		}
		tc=tc+2;											//将宽度样式累加																																														
		tiao.style.width=tc+"px";
	}
	function Hou()
	{
		y=window.setInterval("Houtui()",1);	
		window.clearInterval(x);
	}
	function Houtui()
	{
		var kuang=document.getElementById("kuang");
		var tiao=document.getElementById("tiao");
		var kc=parseInt(kuang.style.width);
		var tc=parseInt(tiao.style.width);
		if(tc<=0)
		{
			window.clearInterval(y);
			return;	
		}
		tc=tc-2;
		tiao.style.width=tc+"px";	
	}
</script>
</html>

此题思路为用间隔操作对宽度进行累加，当条件判断长度满足时用return来终止函数执行，需要注意宽度样式必须写在内联里。

七.单击选中后鼠标移动不变
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	margin:auto }
#biao{
	width:200px;
	height:40px;
	background-color:#999;
	text-align:center;
	line-height:40px;
	vertical-align:middle;
	border:1px solid #FFF}
.ming{
	width:200px;
	height:40px;
	background-color:blue;
	text-align:center;
	line-height:40px;
	vertical-align:middle;
	border:1px solid #FFF;
	display:block}
.ming,#biao:hover{
	cursor:pointer}		
</style>
</head>

<body>
<div id="biao">姓名</div>
<div class="ming" onclick="Xuan(this)" onmouseover="Shang(this)" onmouseout="Xia(this)">李四</div>
<div class="ming" onclick="Xuan(this)" onmouseover="Shang(this)" onmouseout="Xia(this)">王五</div>
<div class="ming" onclick="Xuan(this)" onmouseover="Shang(this)" onmouseout="Xia(this)">赵六</div>
</body>
<script type="text/javascript">
function Shang(a)													//鼠标放上显示为红色
{
	a.style.backgroundColor="red";	
}
function Xia(a)														//鼠标移出时恢复原色蓝色，如果该元素属性值为1，让其显示为红色。
{
	a.style.backgroundColor="blue";
	if(a.getAttribute("shu")==1)
	{
		a.style.backgroundColor="red";	
	}	
}
function Xuan(a)													//因为只能选中一个，需要先清除所有属性样式，让其恢复默认。										
{																	//然后让该选中元素显示为红色，添加一个自定义属性值为1。
	var ming=document.getElementsByClassName("ming");
	for(var i=0;i<ming.length;i++)
	{
		ming[i].removeAttribute("shu");
		ming[i].style.backgroundColor="blue";	
	}
		a.setAttribute("shu","1");
		a.style.backgroundColor="red";	
}	
</script>
</html>

此题思路在于需要设置一个自定义属性，用来保存选中状态，当进行其他操作时，再用条件判断，如果是选中状态则保留样式。

以上是关于document操作例题4的主要内容，如果未能解决你的问题，请参考以下文章