JS：完善輪播圖，追加,控制臺查看節(jié)點方法，購物車部分，position 詳解，CSS表格
將輪播圖完善掉
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style>
? ? /*allDivId:所有div的ID*/
?#allDivId{
?
?
/*?
relative: 相對的*/
/*? absolute:絕對的;
? position: 位置;
? position: absolute;(絕對定位,可設(shè)置具體左右上下坐標(biāo)位置)*/
? ? ? ? width: 600px; height: 400px; margin: 0px auto;
? ? ? ? position: relative;
? ? ? }
?#allDivId div{
? ? ? ? position: absolute;right: 20px; bottom: 10px;
? ? ? ? width: 200px;height: 60px;
? ? ? }
/*
display 屬性規(guī)定元素應(yīng)該生成的框的類型。
使段落生出行內(nèi)框：
p.inline
? {
? display:inline;
? }
??
?display: inline-block; 意思是用來處理行內(nèi)非替換元素的高寬問題的！
行內(nèi)非替換元素，比如span、a等標(biāo)簽，正常情況下是不能設(shè)置寬高的，
加上該屬性之后，就可以觸發(fā)讓這類標(biāo)簽表現(xiàn)得如塊級元素一樣，可以設(shè)置寬高。
將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。
之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）
inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。*/
?#allDivId div span{
? ? ? ? width:10px; height:10px; background-color: white;
? ? ? ? display: inline-block;
? ? ? ? margin-left: 8px;margin-top: 10px;border: 1px solid red;
? ? ? ? border-radius: 50%;
? ? ? ??
? ? ? /*? border-radius: 50%;個人理解:將角度矩形的四個角的弧度都設(shè)置為90度.*/
? ? ? ? cursor: pointer;
? ? ? }
?#allDivId div .xuanZhongYuanDian{
? ? ? ? background-color: yellow;
? ? ? }
#allDivId .leftErDuo{
/*margin-top: -40px;表示距離上邊界向上40px,
元素向頭部移動40px,也就是頭部距離相鄰元素減小40px。
margin-top: 40px的話，表示距離上邊界向下40px,
頭部的外邊距為40像素，就是頭部答距離相鄰元素為40px；*/
? ? ? ? width: 40px; height: 40px;opacity: 0.2;position: absolute;
? ? ? ? left: 40px; top:50%;margin-top: -40px;
? ? ? ? background-color: blue;cursor: pointer;border-radius:50%;
? ? ? ? text-align: center;line-height:40px;color: white;
? ? ? }
#allDivId .rightErDuo{
? /* position: absolute;left: 40px; top:50%;*/
? ? ?left: auto;right: 40px;
? ? ?border-radius: 50%;text-align: center;line-height: 40px;color: white;
? ? ? }
?#allDivId .leftErDuo:hover{
? ? ? ? opacity: 0.8;
? ? ? /*??
opacity:n.不透明性;
從 0.0 （完全透明）到 1.0（完全不透明）。*/
? ? ? }
? ? ?
? ? </style>
? ? <script>
? ? ? window.onload=function(){
?window.imgShuZu=["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg"];
? ? ? ??
? ? ? ? window.indexXiaBiao=0;//indexXiaBiao代表每次獲取數(shù)組的下標(biāo)
? ? ? ? //用getElementByIallDiv外層的allDivId
? ? ? ? window.allDiv=document.getElementById("allDivId");
? ? ? ? window.imgShuZuVar=allDiv.getElementsByTagName("img")[0];
? ? ? ? //用getElementsByTagName獲取圖片
? ? ? ? window.start=null;
? ? ? ? window.start=setInterval(lunBoFunction,666);
? ? ? ? //onmouseout：鼠標(biāo)移出事件
? ? ? ? window.allDiv.onmouseout=function(){
? ? ? ? ? ?window.start=setInterval(lunBoFunction,666);
? ? ? ? }
? ? ? ? //用onmouseover，clearInterval設(shè)置出鼠標(biāo)移入的時候停止輪播的效果
? ? ? ? window.allDiv.onmouseover=function(){
//? ? ? Interval:間隔
? ? ? ? ? ? clearInterval(window.start);
? ? ? ? ? window.start=null;
? ? ? ? }
? ? ? ? //用.獲取所有的span標(biāo)簽，spanXiaoYuanDianShuZuspan小圓點數(shù)組
? ? ? ? window.spanXiaoYuanDianShuZu=window.allDiv.children[1].children;
? ? ? ? //分別給4個span添加事件
? ? ? ? for(var i of window.spanXiaoYuanDianShuZu){
? ? ? ? ? i.onclick=function(){
?//用.src和換數(shù)組下標(biāo)的方法實現(xiàn)切換背景圖片的效果
?//得到點擊的spanXiaoYuanDianShuZu的title，即下標(biāo)（span的title默認(rèn)為數(shù)字下標(biāo)，
//? ? ? ? ? 因為這里在html中給每個span設(shè)置了數(shù)字下標(biāo)類型的title）。
? ? ? ? ? ? var titleVar=this.title;
? ? ? ? ? ? //點擊span小圓點的時候?qū)ndexXiaBiao設(shè)置為titleVar
? ? ? ? ? ? window.indexXiaBiao=titleVar;
//? ? ? ? ? 用.src把變換后的圖片內(nèi)容賦值給現(xiàn)在的圖片內(nèi)容
? ? ? ? ? ? window.imgShuZuVar.src=window.imgShuZu[indexXiaBiao];
? ? ? ? ? ? //先用.style.backgroundColor將所有的span小圓點的背景顏色設(shè)置為白色,
//? 點擊的哪一個就將那個背景顏色設(shè)置為灰色
?//? xiaBiaoNeiRong和i在for......of......格式中都為下標(biāo)(對應(yīng),代表的)內(nèi)容。
? ? ? ? ? ? for(var xiaBiaoNeiRong of spanXiaoYuanDianShuZu){
? ? ? ? ? ? ? xiaBiaoNeiRong.style.backgroundColor="white";
? ? ? ? ? ? }
? ? ? ? ? ? this.style.backgroundColor="yellow";
? ? ? ? ? }
? ? ? ? }
? ? ? ? //用getElementsByClassName獲取兩個耳朵，這里的leftErDuo在左右耳朵
//? ? ? 都含有class="leftErDuo"，所以可當(dāng)做allErDuo，這樣寫是為了css等處少寫代碼
//? ? ? 比如 #allDivId .leftErDuo:hover只要設(shè)置一個,兩只耳朵就都有效果了。
//? ? ? allErDuoShuZu:所有的耳朵數(shù)組
? ? ? ? var allErDuoShuZu=window.allDiv.getElementsByClassName("leftErDuo");
//? ? ? xiaBiaoNeiRong和i在for......of......格式中都為下標(biāo)(對應(yīng),代表的)內(nèi)容。
? ? ? ? for(var i of allErDuoShuZu){
? ? ? ? ? //使用className區(qū)分是哪個耳朵
? ? ? ? ? if(i.className=="leftErDuo rightErDuo"){
? ? ? ? ? ? i.onclick=function(){
? //因為傳值的不是zuoErDuo，什么都沒傳，所以執(zhí)行的是lunBoFunction(chuanZhi);中的
//? else{}中的內(nèi)容,點擊右方耳朵耳朵的時候window.indexXiaBiao依次增加，
//? ? ? ? ? ? 數(shù)組內(nèi)容改變,即改變背景圖片和span小圓點
? ? ? ? ? ? ? //的背景顏色
? ? ? ? ? ? ? lunBoFunction();
? ? ? ? ? ? }
? ? ? ? ? }else{
? ? ? ? ? ? i.onclick=function(){
? ? ? ? ? ? ? lunBoFunction("zuoErDuo");
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? }
//? ? chuanZhi:傳值,只有出現(xiàn)或需要XXX("xxx"),
//? ? 那么xxx就是被傳和要傳的值,要設(shè)置XXX(xxx){}格式的函數(shù)
? ? ? function lunBoFunction(chuanZhi){
//? ? console.log(xxx);格式中的xxx會在谷歌
//? ? 開發(fā)版按F12后在控制臺中打印顯現(xiàn)xxx內(nèi)容,用于調(diào)試,
//? ? 比如檢查xxx是否為null等,是否有錯誤,
//? ? 進而縮小錯誤在哪里的范圍,更容易找到錯誤等
? ? ? ? console.log(chuanZhi);
? ? ? ? //用if語句判斷傳入的參數(shù)的內(nèi)容，如果是“zuoerduo”就index依次--
? ? ? ? if(chuanZhi=="zuoErDuo"){
//? ? ? 在要循環(huán)效果的時候用兩個if,要二選一時用if和else if
? ? ? ? ? if(window.indexXiaBiao>=0){
? ? ? ? ? ? indexXiaBiao--;
? ? ? ? ? }
? ? ? ? ? if(window.indexXiaBiao<0){
? ? ? ? ? ? indexXiaBiao=3;
? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? ? ??
? ? ? ??
? ? ? ? else{
? ? ? ? ? if(window.indexXiaBiao<=3){
? ? ? ? ? ? indexXiaBiao++;
? ? ? ? ? }
? ? ? ? ? if(window.indexXiaBiao>3){
? ? ? ? ? ? indexXiaBiao=0;
? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? ? ??
? ? ? ? ? //輪播的時候也讓所有的span背景顏色改為白色，
? ? ? ? ? //讓index==title的span的背景顏色改為灰色
? ? ? ? ? ? for(var j of spanXiaoYuanDianShuZu){
? ? ? ? ? ? ? ? j.style.backgroundColor="white";
? //如果下標(biāo)和span的title相等的時候讓這個span背景顏色改為灰色
? ? ? ? ? ? ? ? if(j.title==indexXiaBiao){
? ? ? ? ? ? ? ? ? j.style.backgroundColor="yellow";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? window.imgShuZuVar.src=window.imgShuZu[indexXiaBiao];
? ? ? ??
? ? ? }
? ? </script>
? </head>
? <body>
? ? <!--用來固定輪播圖的位置-->?
? ? <div id="allDivId">
? ? ? <img src="./img/1.jpg" width="600px" height="400px" />
? ? ? <div>
<span title="0" class="xuanZhongYuanDian"></span><span title="1" ></span>
? ? ? ? <span title="2"></span><span title="3"></span>
? ? ? </div>
? ? ? <span class="leftErDuo">
? ? ? <
<!--? ?<代表<（小于：less than）， >代表>（大于：greater than）? ?-->
? ? ? </span>
? ? ? <span class="leftErDuo rightErDuo"> ></span>
? ? </div>
? </body>
</html>
2.追加一級標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style: none;width: 666px; margin: 0px auto;?
border: 1px solid red;height: 23px; line-height:23px;}
ul li{
float: left;height: 23px;line height: 23px;
width: 123px;text-align: center;}
</style>
<script>
window. onload=function(){
//用getElementsByTagName獲取按鈕
var inputShuZu =document. getElementsByTagName("input")[0];
inputShuZu.onclick=function(){
var neiRongVar=prompt("請輸入追加的內(nèi)容喲");
//用inputs.onclick=function()設(shè)置點擊事件，
//點擊按鈕后往ul中追加li，增加內(nèi)容
//createElement創(chuàng)建li節(jié)點
var liVar=document. createElement("li");
// getElementsByTagName獲取ul
liVar. innerHTML=neiRongVar;
var ulVar=document . getElementsByTagName("ul")[0];
//appendChild往ul中追加li
ulVar. appendChild(liVar);
}}
</script>
</head>
<body>
<ul>
<li>詩書畫唱首頁</li>
<li>三連商品管理</li>
<li>關(guān)注類型管理</li>
</ul>
<input type="button" value="點擊我追加ul列表喲"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window. onload=function(){
//利用createElement創(chuàng)建節(jié)點
//利用document .可以創(chuàng)建元素節(jié)點，文本節(jié)點，屬性節(jié)點
var imgVar=document . createElement("img");
//利用createTextNode可以創(chuàng)建文本節(jié)點
var wenBenVar=document . createTextNode("大家好，我是詩書畫唱！");?
//利用getElementsByTagName獲取div
var divVar=document. getElementsByTagName("div")[0];?
divVar. appendChild(imgVar);
divVar. appendChild(wenBenVar);
//利用appendChild追加一次元素節(jié)點后，實際上是追加一個是元素節(jié)點
//可用利用appendChild創(chuàng)建文本節(jié)點
console. log(divVar. childNodes);
console. log("谷歌瀏覽器開發(fā)版按F12后，控制臺顯示現(xiàn)在div下的子節(jié)點一共有 "
+divVar.childNodes.length+"個")
}
</script>
<body>
<div>請給
<p>詩書畫唱</p>三連關(guān)注
<ul>
<li>點贊</li>
<li>投幣</li>
<li>收藏</li>
</ul>請
<a href="#">點擊我，關(guān)注我</a>
謝謝！
</div>
</body>
</html>
3.增加減少數(shù)量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table{
width: 400px;height: 100px;margin: 0px auto;text-align: center;
border-top:solid 1px blue;border-left:solid 1px blue;
}
/*tr{border: 1px solid blue;}*/
td{border-bottom: 1px solid blue;border-right:1px solid blue;}
</style>
<title></title>
<script>
window.onload=function() {
//用getElementsByTagName獲取table
var tableShuZu = document.getElementsByTagName("table")[0];
//用getElementsByTagName獲取table下的所有的tr
var trShuZu = tableShuZu.getElementsByTagName("tr");
//用of遍歷所有的tr.獲取每個tr下的td ，i代表每個tr
for(var i of trShuZu) {
var tdShuZuVar = i.children[0];
//用children獲取td下的所有的input
var inputShuZu = tdShuZuVar.children;
//遍歷所有的input，給+和-添加點擊事件
//j為每個input
for(var j of inputShuZu) {
if(j.value == "-") {
j.onclick = function() {
//點擊-號的時候獲取文本框中的內(nèi)容并且讓文本框中的內(nèi)容-1
//用nextElementSibling獲取文本框
//nextElementSibling 屬性返回指定元素之后的下一個兄弟元素
//（相同節(jié)點樹層中的下一個元素節(jié)點）。
var wenBenKuang = this.nextElementSibling;
//用.value獲取文本框的內(nèi)容
var WenBenNeiRong = wenBenKuang.value;
//用if判斷文本框的丙容為1的時候
if(Number(WenBenNeiRong) > 1) {
var jieGuo = Number(WenBenNeiRong) - 1;
wenBenKuang.value = jieGuo;
}
}
}
if(j.value == "+") {
j.onclick = function() {
// previousElementSibling 屬性返回指定元素的前一個兄弟元素
// （相同節(jié)點樹層中的前一個元素節(jié)點）。
//previous先前的
// Sibling兄; 弟; 姐; 妹;
var wenBenKuang=this . previousElementSibling;
var WenBenNeiRong = wenBenKuang.value;
var jieGuo = Number(WenBenNeiRong) + 1;
wenBenKuang.value = jieGuo;
}
}
}
}
}
</script>
</head>
<body>
<!--border="1px"-->
<table cellspacing="0px">
<tr>
<td>
<input type="button" value="-" />
<input type="text" value="1" disabled="disabled" />
<input type="button" value="+" />
</td>
<td>三連</td>
</tr>
<tr>
<td><input type="button" value="-" />
<input type="text" value="1" disabled="disabled" />
<input type="button" value="+"/></td>
<td>關(guān)注</td>
</tr>
</table>
</body>
</html>
按Ctrl并滑動鼠標(biāo)滑輪就會把界面放大。
