JS裏的DOM在網頁中的實際操作
阿新 • • 發佈：2017-10-27
星期 str 下拉菜單 line 讓其 margin solid 星空 ext
<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在網頁中的實際操作