JavaScript 第二课笔记
JavaScript第二课.png
特殊的循环
for-in循环：既可以循环数组也可以循环对象
//循环数组
var arr = ['a','b','c','d','e','f'];
for (var i in arr){
console.log(arr[i]);
}
//循环对象属性
var o = {
name:"张三",
age:20,
sex:"男"
};
for (var i in o){
console.log(o[i]);
}
函数的应用带参应用
(function minus(num1,num2) {
return function (num3) {
return num3-num1-num2
}
})
//普通调用方式
var d = minus(1,2);
var e = d(3);
//连接调用方式
// var f = (minus(1,2))(3);
//直接调用方式
(function minus(num1,num2) {
return function (num3) {
return num3-num1-num2
}
})(1,2)(3);//(1,2)直接进入第一个函数式,(3)进入第二个函数式
点击事件
单击出现窗口
body标签里设置的id 需要用document.getElementById("a").onclick方法标锚，也就是说<script></script>标签里发生的事件需要通过document.getElement...方法来获取
点击延迟出现窗口
setTimeout(函数, 时间); 延迟弹出是一个这样的方法，里面可以放入函数。
- 先把单击打开窗口做成一个函数
function show()
function show() {
window.open("countdown.html","","width=400,height = 200");
}
-
再利用单击锚链接到单击事件
docdocument.getElementById("a").onclick -
然后在函数里面写入
setTimeout(打开窗口函数, 时间)
document.getElementById("a").onclick = function () {
setTimeout(show, 5000);
};
这样就做出一个单击延时事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window</title>
</head>
<body>
<a href="#" id = "a">开启新窗口</a>
</body>
<script>
//打开新窗口
document.getElementById("a").onclick = function () {
window.open("CSS.html","","width=400,height = 200");
};
//疯狂弹出窗口
var count = 0;
var a = 0;
document.getElementById("a").onclick = function () {
a = setInterval(show,2000);
};
function show(){
window.open("countdown.html","","width=400,height = 200");
count++;
//设置开6个窗口就停止
if(count > 5){
clearInterval(a);
}
}
//延时打开窗口
setTimeout(function(){
alert('hello world');
},1200);
//单击延时事件
document.getElementById("a").onclick = function () {
setTimeout(show, 5000);
};
function show() {
window.open("countdown.html","","width=400,height = 200");
}
</script>
</html>
图片的轮播
首先先想好思路，第一张图片是先演示所以要先默认，演示过后就不见了，用到了display的none和block方式
思路：
1.先导入图片
2.在script标签里定义下标为0，因为轮换的话需要把下标重新清零
3.在script中利用标锚的方法找到图片标签，返回一个图片数组，用一个变量接收。（标锚方法自动返回一个数组）
4.在图片标签中设置属性为图片全部不可见，在图片中设置第一张图片可见,这样有利于之后来回切换。
5.因为要体现轮播的效果，刚才在图片中设置了第一张图片可以见之后，在script标签里要写 imgs[index].style.display = "none";这句话，表示过去了的图片不可见
6.利用if语句进行判断，如果 数组下标===数组长度-1 就表示数组已经走到了最后一个元素，将index重置为0。如果不是index++
7.要设置下一张图片可见就得用imgs[index].style.display = "block"这句话。
8.要将轮播函数写入setInterval(changeDisplay,1000);周期调用函数方法中
先贴代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<!--将所有图片设置不可见-->
<style>
img{
display: none;
}
/*设置编号的属性*/
ul>li{
list-style: none;
float: left;
width: 25px;
height: 25px;
margin-left: 25px;
font-size: 25px;
border-radius: 25px;
background: orange;
text-align: center;
line-height: 25px;
}
</style>
</head>
<body>
<div>
<!--显示第一张图片-->
<img src="image/11.jpg" style="display: block"/>
<img src="image/2.jpg"/>
<img src="image/22.jpg"/>
<img src="image/33.jpg"/>
</div>
<div>
<ul id="abc">
<li style="background: red">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script>
//定义一个下标
var index = 0;
//将变量imgs定位到body中的图片标签，返回带有img标签的对象集合
var imgs = document.getElementsByTagName("img");
var sss = document.getElementsByTagName("li");
//定义一个函数更换图片
function changeDisplay() {
sss[index].style.background = "orange";
//开头第一张的图片数组[下标].样式.显示方式 = 不可见
imgs[index].style.display = "none";
//如果下标等于数组长度-1（数组的最后元素）
if(index === imgs.length-1){
//下标重置为0
index = 0;
} else {
//如果不是下标继续增加
index++;
}
//下一张图片设置成为可见
imgs[index].style.display = "block";
sss[index].style.background ="red";
}
//实现轮转图片
setInterval(changeDisplay,1000);
</script>
</html>
总结：图片轮播逻辑很重要，要多想
