JS里的DOM在网页中的实际操作
Posted 左剃头
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS里的DOM在网页中的实际操作相关的知识，希望对你有一定的参考价值。
<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在网页中的实际操作的主要内容，如果未能解决你的问题，请参考以下文章