[JavaScript知识库]2021-07-25 暑假学习1

暑假学习
完善华为官网
/轮播图/
var ImgListLi = document.getElementsByClassName(“ImgListLi”);
var leftBtn = document.getElementsByClassName(“leftBtn”)[0];
var rightBtn = document.getElementsByClassName(“rightBtn”)[0];
var imglistT = document.getElementsByClassName(“imglistT”);
var index = 0;
var timer = setInterval(function() {
index++;
if (index >= 3) {
index = 0;
ImgListLi[2].style.opacity = “0”;
ImgListLi[0].style.opacity = “1”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index - 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e667”;
}, 3000);
leftBtn.onclick = function() {
clearInterval(timer);
index–;
if (index <= -1) {
index = 2;
ImgListLi[index].style.opacity = “1”;
ImgListLi[0].style.opacity = “0”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index + 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e667”;
timer = setInterval(function() {
index++;
if (index >= 3) {
index = 0;
ImgListLi[2].style.opacity = “0”;
ImgListLi[0].style.opacity = “1”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index - 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e6667”;
}, 4000);
}
rightBtn.onclick = function() {
clearInterval(timer);
index++;
if (index >= 3) {
index = 0;
ImgListLi[index].style.opacity = “1”;
ImgListLi[2].style.opacity = “0”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index - 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e6667”;
timer = setInterval(function() {
index++;
if (index >= 3) {
index = 0;
ImgListLi[2].style.opacity = “0”;
ImgListLi[0].style.opacity = “1”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index - 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e6667”;
}, 4000);
}
var inde;
for (var i = 0; i < 3; i++) {
imglistT[i].num = i;
imglistT[i].onclick = function() {
clearInterval(timer);
inde = this.num;
for (var e = 0; e < 3; e++) {
ImgListLi[e].style.opacity = “0”;

		}
		ImgListLi[inde].style.opacity = "1";
		for (var i = 0; i < 3; i++) {
			imglistT[i].style.backgroundColor = "#dfdcd9";
		}
		imglistT[inde].style.backgroundColor = "#4e6667";
		timer = setInterval(function() {
			index++;
			if (index >= 3) {
				index = 0;
				ImgListLi[2].style.opacity = "0";
				ImgListLi[0].style.opacity = "1";
			} else {
				ImgListLi[index].style.opacity = "1";
				ImgListLi[index - 1].style.opacity = "0";
			}
			for (var i = 0; i < 3; i++) {
				imglistT[i].style.backgroundColor = "#dfdcd9";
			}
			imglistT[index].style.backgroundColor = "#4e6667";
		}, 4000);
	}
}
bootstrap复习
Width auto:加边界是往里面扣掉的  流体容器

Width 100%：边界是往外加的 固定容器

小于768 auto
3.栅格系统
4.Lg具有阈值的概念
！！栅格源码分析
container-fix：用来清除浮动 继承清除浮动的属性
bootstrap下载安装
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
网格系统布局（grid）
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
《/div>

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的

元素就不是项目。Grid 布局只对项目生效。
单元格
行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

网格线
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

排版
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式

我是标题1 h1

我是标题2 h2

我是标题3 h3

我是标题4 h4

我是标题5 h5

我是标题6 h6

实例

Jq引入方式

自己调用自己的循环被称为递归
Bootstrap中移动优先