码迷,mamicode.com
首页 > Web开发 > 详细

JS里的DOM在网页中的实际操作

时间:2017-10-27 01:16:21      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:建立   col   大图轮播   elements   top   ges   style   相对   字符   

 

<style type="text/css">
	/*大图轮播*/
			*{
				margin:0px auto;
				padding:0px;
				}
			#wai{
				width:500px;
				height:350px;
			    }
			.tu{
				width:500px;
				height:350px;
				display:none;
				}
			.k{
				width:60px;
				height:5px;
				float:left;
				background-color:#FC0;	     这里用到了相对定位,如果在图片这个大div的下面插入一个四个框的
				margin-left:10px;		     div,默认的是在这个图片的下方,用top时是距离上面图片的距离,用
				position:relative;		     负值的话就移到图片里面去了。
				top:-30px;
				
				}
				
				
				
				
				#dian{
					width:300px;
					height:5px;
					}

</style>

<body>
<div id="wai">
        		<img  class="tu" src="../../Pictures/壁纸.jpg" style="display:block;"/>
                <img   class="tu" src="../../Pictures/汉奸.jpg"/>
                <img class="tu" src="../../Pictures/星空.jpg" />
                <img class="tu" src="../../Pictures/淄博.jpg"/>
        </div>
        	<div id="dian">
            		<div class="k" style="background-color:#00F;" onclick="Dian(‘0‘)"></div>
                    <div class="k" onclick="Dian(‘1‘)"></div>
                    <div class="k" onclick="Dian(‘2‘)"></div>
                    <div class="k" onclick="Dian(‘3‘)"></div>
            
            </div>-->

</body>

<script type="text/javascript">
		var sy = 0; /* 定了一个索引值的变量*/
		window.setInterval("Lun()",3000); /*间隔是三秒出来一次图片*/
		function Lun()  /*赋这个函数,是让图片来轮播*/
		{ 	
			
			var tu = document.getElementsByClassName("tu");
			sy++;  // sy加1
			
			if(sy>=tu.length) //当sy那个索引值大于等于图片的总长度时,图片轮回到第一张图片
			{ 
				sy = 0;
			}
			//让图片循环显示,循环隐藏
			for( var i=0;i<tu.length;i++)
			{ 
				tu[i].style.display = "none";
			}
			
			tu[sy].style.display = "block";
			
			//框随着图片的轮播,变成蓝色。
			var k = document.getElementsByClassName("k");
			for( var j=0;j<k.length;j++)
			{ 
				k[j].style.backgroundColor = "#FC0";
			}
			k[sy].style.backgroundColor = "#00F";
		}
		//点哪个框,变蓝色,而且换成哪个图片
		function Dian(a)
		{ 	
			sy = a;     //a是形参,连着点击框,框里索引着图片
			var tu = document.getElementsByClassName("tu");
			for( var i=0;i<tu.length;i++)
			{ 
				tu[i].style.display = "none";   // 图片循环显示,循环隐藏
			}
			
			tu[a].style.display = "block";
			var k = document.getElementsByClassName("k");   //框里的颜色循环变颜色
			for( var j=0;j<k.length;j++)
			{ 
				k[j].style.backgroundColor = "#FC0";
			}
			k[a].style.backgroundColor = "#00F";
		
		}
		

</script>

 

 大图轮播:

出现如下图所示的效果:

技术分享嵌了四张图,有四张图,图片自动轮播,播到第几个图片,第几个框变成了蓝色,点第几个框,变蓝色,显示第几张图片。

 

总结:思路是,1.插入四张图片的话,先建一个大div,里面直接嵌入图片,div定好宽与高,只让第一张图片显示,其他隐藏。

       2.把四个图片看成一个数组,给一个索引值sy,定一个变量。

       3.赋两个函数,一个是让它轮播,一个是让其点击框,变色,显示出哪个图片;

 

点击事件要定一个形参

 

下拉列表选择项:

 

        要实现的效果:点击一项,出来下面几项,选择哪一项,哪一项跳到最上面的位置上。

 

<style type="text/css">

#cai{
					width:100px;
					height:50px;
					border:1px solid #F00;
					text-align:center;
					vertical-align:middle;
					line-height:50px;
					}
				.m{
					width:100px;
					height:50px;
					border:1px solid #F00;
					text-align:center;
					vertical-align:middle;
					line-height:50px;
					border-top-width:0px; /*去重合线*/
					display:none;
					}	


</style>


<body>

 <div id="wai" style="width:100px; height:100px; margin-top:10px;" >
            	
                <div id="cai"  onclick="Xian()">淄博</div>
                <div class="m" onclick="Xuan(this)">张店</div>
                <div class="m" onclick="Xuan(this)">周村</div>
                <div class="m" onclick="Xuan(this)">临淄</div>
            <!--在一个大的div嵌入四个小div,其中淄博是作为一个选择参考,要想实现的效果是这样的,点击淄博,出来下面的选项,点击张店,张店来到了淄博的位置。此时可以先添加一个淄博的点击事件,给其他的选项一个点击事件
            ,分为两个函数。下面的选项添加隐藏属性。Xuan里面的this是指的是本身,点击自己。-->
            
            </div>

</body>


<script type="text/javascript">


function Xian()  /*给淄博的点击事件*/
			{ 
				var m = document.getElementsByClassName("m");   //取出class名的值为m的,让其循环显示。
				for(var i=0;i<m.length;i++)
				{ 
					m[i].style.display = "block";
				}
				
			}
			function 	Xuan(a)      /*给下面的选项的点击事件,*/
			{ 
				var cai = document.getElementById("cai");
				
				cai.innerHTML=a.innerHTML;      /*以前淄博位置的内容成为了选择项的内容。*/
				var m = document.getElementsByClassName("m");   /*这一步是让其选择完选项之后其他的选项隐藏*/
				for(var i=0;i<m.length;i++)
				{ 
					m[i].style.display = "none";
				}
				
			}

</script>

 

 

获取时间: 

 

出现如下图所示的效果:

技术分享

<style type="text/css">

#time{width:400px; 
						height:20px;
						}

</style>


<body>

 <div  id="time" >
                   
                   </div>
                    
                    
                    
</body>


<script type="text/javascript">

window.setInterval("Shi()",1);       
		function Shi()
		{ 
			var date = new Date();		//注意这个地方new后面不要加  .
			var n = date.getFullYear();
			var y = date.getMonth()+1;
			var r = date.getDate();
			var x = date.getDay();
			var h = date.getHours();
			var f = date.getMinutes();
			var m = date.getSeconds();
			var str = "北京时间:"+n+"年"+y+"月"+r+"日"+","+"星期"+x+","+h+":"+f+":"+m;
			document.getElementById("time").innerHTML = str;
		
		}

</script>

 总结:先建立一个新的变量date,获取时间,再利用字符串的拼接,要注意的是,注意所有的标点符号都是英文的。之后在div里
  获取的内容与拼接的东西相等。

 

出现如下图中的效果:

技术分享

<style type="text/css">

.tou{
					width:50px;
					height:35px;
					
					float:left;
					text-align:center;
					vertical-align:middle;
					line-height:35px;
										
					}
					.xia{
						background-color:#F0F;
						}

</style>

<body>

 <!--点哪个菜单,出哪个下拉菜单,然后不点的话就隐藏。-->
        <div id="cai" style="width:100px; height:35px; background-color:#F00;">
        	<div class="tou" onclick="Dian(‘0‘)">企业</div>
        	<div class="tou" onclick="Dian(‘1‘)">员工</div>
        </div>
        
       		 <div class="xia" style="width:100px; height:50px; text-align:left;">
             <span>哈哈</span>
              <span>哈罗</span>
              <!--注意:如果说用<p>段落时,容易有空行,影响布局,尽量不要用。-->
             </div>
             	<div class="xia " style="width:100px; height:50px; text-align:left; display:none;">
                 <span>拜拜</span>
                  <span>再见</span>
                </div>

</body>


<script type="text/javascript">
function Dian(a)
		{ 
			var xia = document.getElementsByClassName("xia");
			
			for ( var i=0;i<xia.length;i++)
			{ 
				xia[i].style.display = "none";
			}
			xia[a].style.display = "block";
		}

</script>

 

JS里的DOM在网页中的实际操作

标签:建立   col   大图轮播   elements   top   ges   style   相对   字符   

原文地址:http://www.cnblogs.com/zuo72/p/7728428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!