JS：完善轮播图，追加,控制台查看节点方法，购物车部分，position 详解，CSS表格
将轮播图完善掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*allDivId:所有div的ID*/
#allDivId{
/*
relative: 相对的*/
/* absolute:绝对的;
position: 位置;
position: absolute;(绝对定位,可设置具体左右上下坐标位置)*/
width: 600px; height: 400px; margin: 0px auto;
position: relative;
}
#allDivId div{
position: absolute;right: 20px; bottom: 10px;
width: 200px;height: 60px;
}
/*
display 属性规定元素应该生成的框的类型。
使段落生出行内框：
p.inline
{
display:inline;
}
display: inline-block; 意思是用来处理行内非替换元素的高宽问题的！
行内非替换元素，比如span、a等标签，正常情况下是不能设置宽高的，
加上该属性之后，就可以触发让这类标签表现得如块级元素一样，可以设置宽高。
将对象呈现为inline对象，但是对象的内容作为block对象呈现。
之后的内联对象会被排列在同一行内。比如我们可以给一个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%;个人理解:将角度矩形的四个角的弧度都设置为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代表每次获取数组的下标
//用getElementByIallDiv外层的allDivId
window.allDiv=document.getElementById("allDivId");
window.imgShuZuVar=allDiv.getElementsByTagName("img")[0];
//用getElementsByTagName获取图片
window.start=null;
window.start=setInterval(lunBoFunction,666);
//onmouseout：鼠标移出事件
window.allDiv.onmouseout=function(){
window.start=setInterval(lunBoFunction,666);
}
//用onmouseover，clearInterval设置出鼠标移入的时候停止轮播的效果
window.allDiv.onmouseover=function(){
// Interval:间隔
clearInterval(window.start);
window.start=null;
}
//用.获取所有的span标签，spanXiaoYuanDianShuZuspan小圆点数组
window.spanXiaoYuanDianShuZu=window.allDiv.children[1].children;
//分别给4个span添加事件
for(var i of window.spanXiaoYuanDianShuZu){
i.onclick=function(){
//用.src和换数组下标的方法实现切换背景图片的效果
//得到点击的spanXiaoYuanDianShuZu的title，即下标（span的title默认为数字下标，
// 因为这里在html中给每个span设置了数字下标类型的title）。
var titleVar=this.title;
//点击span小圆点的时候将indexXiaBiao设置为titleVar
window.indexXiaBiao=titleVar;
// 用.src把变换后的图片内容赋值给现在的图片内容
window.imgShuZuVar.src=window.imgShuZu[indexXiaBiao];
//先用.style.backgroundColor将所有的span小圆点的背景颜色设置为白色,
// 点击的哪一个就将那个背景颜色设置为灰色
// xiaBiaoNeiRong和i在for......of......格式中都为下标(对应,代表的)内容。
for(var xiaBiaoNeiRong of spanXiaoYuanDianShuZu){
xiaBiaoNeiRong.style.backgroundColor="white";
}
this.style.backgroundColor="yellow";
}
}
//用getElementsByClassName获取两个耳朵，这里的leftErDuo在左右耳朵
// 都含有class="leftErDuo"，所以可当做allErDuo，这样写是为了css等处少写代码
// 比如 #allDivId .leftErDuo:hover只要设置一个,两只耳朵就都有效果了。
// allErDuoShuZu:所有的耳朵数组
var allErDuoShuZu=window.allDiv.getElementsByClassName("leftErDuo");
// xiaBiaoNeiRong和i在for......of......格式中都为下标(对应,代表的)内容。
for(var i of allErDuoShuZu){
//使用className区分是哪个耳朵
if(i.className=="leftErDuo rightErDuo"){
i.onclick=function(){
//因为传值的不是zuoErDuo，什么都没传，所以执行的是lunBoFunction(chuanZhi);中的
// else{}中的内容,点击右方耳朵耳朵的时候window.indexXiaBiao依次增加，
// 数组内容改变,即改变背景图片和span小圆点
//的背景颜色
lunBoFunction();
}
}else{
i.onclick=function(){
lunBoFunction("zuoErDuo");
}
}
}
}
// chuanZhi:传值,只有出现或需要XXX("xxx"),
// 那么xxx就是被传和要传的值,要设置XXX(xxx){}格式的函数
function lunBoFunction(chuanZhi){
// console.log(xxx);格式中的xxx会在谷歌
// 开发版按F12后在控制台中打印显现xxx内容,用于调试,
// 比如检查xxx是否为null等,是否有错误,
// 进而缩小错误在哪里的范围,更容易找到错误等
console.log(chuanZhi);
//用if语句判断传入的参数的内容，如果是“zuoerduo”就index依次--
if(chuanZhi=="zuoErDuo"){
// 在要循环效果的时候用两个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";
//如果下标和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.追加一级标签
<!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("请输入追加的内容哟");
//用inputs.onclick=function()设置点击事件，
//点击按钮后往ul中追加li，增加内容
//createElement创建li节点
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>关注类型管理</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创建节点
//利用document .可以创建元素节点，文本节点，属性节点
var imgVar=document . createElement("img");
//利用createTextNode可以创建文本节点
var wenBenVar=document . createTextNode("大家好，我是诗书画唱！");
//利用getElementsByTagName获取div
var divVar=document. getElementsByTagName("div")[0];
divVar. appendChild(imgVar);
divVar. appendChild(wenBenVar);
//利用appendChild追加一次元素节点后，实际上是追加一个是元素节点
//可用利用appendChild创建文本节点
console. log(divVar. childNodes);
console. log("谷歌浏览器开发版按F12后，控制台显示现在div下的子节点一共有 "
+divVar.childNodes.length+"个")
}
</script>
<body>
<div>请给
<p>诗书画唱</p>三连关注
<ul>
<li>点赞</li>
<li>投币</li>
<li>收藏</li>
</ul>请
<a href="#">点击我，关注我</a>
谢谢！
</div>
</body>
</html>
3.增加减少数量
<!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() {
//点击-号的时候获取文本框中的内容并且让文本框中的内容-1
//用nextElementSibling获取文本框
//nextElementSibling 属性返回指定元素之后的下一个兄弟元素
//（相同节点树层中的下一个元素节点）。
var wenBenKuang = this.nextElementSibling;
//用.value获取文本框的内容
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 属性返回指定元素的前一个兄弟元素
// （相同节点树层中的前一个元素节点）。
//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>关注</td>
</tr>
</table>
</body>
</html>
按Ctrl并滑动鼠标滑轮就会把界面放大。
