本文介绍了JavaScript中的定时器，包括延时定时器和间歇定时器的使用，以及如何通过函数封装实现代码复用。同时讲解了如何获取元素的行间和非行间样式，并讨论了同步和异步的概念。最后，讨论了如何清除定时器以避免不必要的资源消耗。
定时器和函数封装
1.函数返回值
1.1return 返回值
- return 值 return一次只能返回一个值 多个值返回有数组或者对象
- return除了有返回值的作用 还有结束函数执行的作用
return [a,b]
console.log(123)
1.2 获取非行间样式
1.2.1获取行间样式
- 标签.style.样式名 如果样式名是-链接 使用驼峰命名 例如font-size fontSize
- 标签.style.样式名 只能获取行间样式
// 1.获取行间样式
// 标签.style.样式名 只能获取行间样式
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv.style.color);// "pink"
console.log(oDiv.style.width);//""
1.2.2获取非行间样式和行间样式
-
标准浏览器(火狐 谷歌 欧朋 safari IE(9-11))
- window.getComputedStyle(标签).样式名
// 标准浏览器 window.getComputedStyle(标签).样式名 var w = window.getComputedStyle(oDiv).width; console.log(w);// 300px var h = window.getComputedStyle(oDiv).height; console.log(h);// 300px var bgcolor = window.getComputedStyle(oDiv).backgroundColor console.log(bgcolor);//rgb(255, 0, 0) var color = window.getComputedStyle(oDiv).color; console.log(color);// rgb(255, 192, 203) var ftsize = window.getComputedStyle(oDiv).fontSize; console.log(ftsize);//50px -
IE低版本浏览器(IE5-8)
- 标签.currentStyle.样式名
// IE低版本 标签.currentStyle.样式名 var w1 = oDiv.currentStyle.width; console.log(w1);// 300px var h1 = oDiv.currentStyle.height; console.log(h1);// 300px var bgcolor1 = oDiv.currentStyle.backgroundColor; console.log(bgcolor1);// red var color1 = oDiv.currentStyle.color; console.log(color1);// pink var ftsize1 = oDiv.currentStyle.fontSize; console.log(ftsize1);// 50px -
兼容
-
判断方法1 window.getComputedStyle这个方法是否存在
// 1.判断浏览器 判断用户是运行在标准浏览器 还是IE低版本浏览器 /* 标准浏览器(谷歌 火狐 欧朋 safari ie(9-11)) window.getComputedStyle.样式名 IE低版本(ie5-8) 标签.currentStyle.样式名 window.getComputedStyle //这是js内置的一个方法(函数) */ console.log(window.getComputedStyle);//标准浏览器输出 ƒ getComputedStyle() { [native code] } IE低版本浏览器 undefined console.log(Boolean(window.getComputedStyle));// true console.log(Boolean(undefined));//false //判断方法1 window可以省略 但是作为判断条件的时候不能省略 if (window.getComputedStyle) {//true 会隐式转换成布尔类型 console.log("标准浏览器") var w = window.getComputedStyle(oDiv).width; console.log(w) } else {//false console.log("IE低版本浏览器"); var w = oDiv.currentStyle.width; console.log(w); } -
判断方法2 判断 标签.currentStyle 这个方法是否存在
<script> var oDiv = document.getElementsByTagName("div")[0]; /* 标准浏览器(谷歌 火狐 欧朋 safari ie(9-11)) window.getComputedStyle.样式名 IE低版本(ie5-8) 标签.currentStyle.样式名 */ //判断方法2 console.log(oDiv.currentStyle)//IE低版本输出 [object Object] 标准浏览器undefined if(oDiv.currentStyle){//true IE低版本浏览器 console.log("IE低版本") var w = oDiv.currentStyle.width; console.log(w); }else{//false 标准浏览器 console.log("标准浏览器") var w = window.getComputedStyle(oDiv).width; console.log(w); } </script>
-
2.函数封装与代码复用
2.1 函数封装
函数封装的步骤
- 声明一个函数 把主要代码放进去
- 找函数中可变的值作为参数 将参数带入函数中 并且返回出去
- 调用调试
<body>
<div style="color:pink;font-size: 50px;"></div>
<p style="width:500px"></p>
<script>
var oDiv = document.getElementsByTagName("div")[0];
/*
函数封装
1.声明一个函数 把主要代码放进去
2.找函数中可变的值作为参数 将参数带入函数中 并且返回出去
3.调用调试
*/
function getStyle(elem, attr) { //elem 标签元素 attr是样式名
// 1.判断浏览器
if (window.getComputedStyle) {//true 标准浏览器
var w = window.getComputedStyle(elem)[attr];
return w
} else {//false IE浏览器
var w = elem.currentStyle[attr];
return w;
}
}
//获取div的样式
var a = getStyle(oDiv, "width");
console.log(a);//300px
var b = getStyle(oDiv, "height")
console.log(b);//300px
//获取p的样式
var oP = document.getElementsByTagName("p")[0];
var a1 = getStyle(oP, "width");
console.log(a1);//500px
</script>
2.2 代码复用
- 什么时候使用代码复用
- 功能一样 结构一样的使用 用for循环不好实现的时候
- 代码复用的实现步骤
- 把这个功能先当成一组去实现 里面的标签都是通过父元素获取
- 先去实现一组的功能
- 把这一组功能放入到函数中 把父元素作为参数
- 调用测试
<script>
/*
- 把这个功能先当成一组去实现 里面的标签都是通过父元素获取
- 先去实现一组的功能
- 把这一组功能放入到函数中 把父元素作为参数
- 调用测试
*/
//1.获取元素
var list = document.getElementsByTagName("li");
// //第一个li
// add(list[0])
// add(list[1])
// add(list[2])
// add(list[3])
for (var i = 0; i < list.length; i++) {
add(list[i]);
}
// 5.声明一个函数
function add(parent) {
//2.通过父元素获取li里面的标签
var btn = parent.getElementsByTagName("button");
var oSpan = parent.getElementsByTagName("span");
// 3.点击+
btn[1].onclick = function () {
// 只要是从页面获取内容都是string类型
oSpan[0].innerHTML++;// ++ 会自动隐式转换
// oSpan[0].innerHTML = Number(oSpan[0].innerHTML)+1 + 不会隐式转换
oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2)
}
// 4.点击-
btn[0].onclick = function () {
oSpan[0].innerHTML--;//-- 也会隐式转换
if (oSpan[0].innerHTML < 0) {
oSpan[0].innerHTML = 0
}
oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2)
}
}
</script>
3.定时器
3.1 定时器介绍
- 定时器的分类
- 延时定时器
- 语法: setTimeout(函数，时间)
- 作用： 延迟一定的时间再去执行函数里面的代码，只会执行一次
- 使用场景 ：广告弹窗
- 间歇定时器
- 语法：setInterval(函数，时间)
- 作用：每隔一定的时间就去执行函数中的代码 会执行多次
- 使用场景：轮播图 倒计时 计时器 抽奖
- 延时定时器
- 注意:定时器的时间单位是ms 1s = 1000ms
3.2 延时定时器
- setTimeout(函数,时间)
<script>
// 1.延时定时器
console.log("开始");
setTimeout(function(){
console.log("3秒之后才会执行这里的代码")
},3000)
// 2.广告弹窗 3秒之后开始显示广告弹窗
var oDiv = document.getElementsByTagName("div")[0];
setTimeout(function(){
oDiv.style.display = "block";
},3000)
// 3.定时器中的函数可以提前定义
setTimeout(fn1,3000);
function fn1(){
console.log("你一会输出123");
}
</script>
3.3 间歇定时器
- setInterval(函数,时间)
<body>
<div>0</div>
<script>
// 1.间歇定时器
setInterval(function () {
console.log("我隔一会就执行")
}, 3000)
// 2.函数可以提前定义
function fn1() {
console.log(123);
}
setInterval(fn1, 3000);
// 3.页面数字累加 每隔1秒+1;
var oDiv = document.getElementsByTagName("div")[0];
setInterval(function () {
oDiv.innerHTML++;
}, 1000)
</script>
</body>
3.4 同步和异步(了解)
- 代码的执行执行顺序
<script>
/*
同步执行:在做一件事情的时候 如果这件事没有做完，后面的代码就只能等待
同步执行 alert() for
异步执行：在做一件事情的时候 如果这件事需要花费一定的时间 会先执行后面的代码，然后再回头执行处理这件事
*/
//同步执行
alert("提示");
console.log(123);
for(var i = 0;i<10000;i++){
}
console.log(456)
// 异步执行 setTimeout就是一个异步执行 无论时间是多少
console.log("开始");
setTimeout(function(){
console.log(123);
},0)
console.log("结束")
</script>
3.5清除定时器
- 定时器一旦开始就不会自动结束,必须手动清除
- clearTimeout(定时器id) 手动清除延时定时器(很少用)
- clearInterval(定时器id) 手动清除间歇定时器
- 定时器id: 每一个定时器在开始的时候，js都会返回一个能唯一标识当前定时器的id，默认都是从1开始
- 定时器一旦停止就没有了，如果后续需要定时器 需要再次定义
<body>
<script>
// 1 定时器id
var a = setInterval(function(){},1000);
console.log(a);
var b = setInterval(function(){},1000);
console.log(b);
var c = setInterval(function(){},1000);
console.log(c);
clearInterval(c);
// 2.倒计时效果 倒计时是从10开始 到0停止
var n = 10;
auto();//为了解决定时器第一次执行的延迟 可以提前调用函数
function auto(){
// 将结果显示在页面上 document.body快速获取body标签
document.body.innerHTML = n;
n--;
if(n<0){
clearInterval(timer);//清除定时器
}
}
var timer = setInterval(auto,1000)
</script>
</body>
- 自动切换图片
<body>
<img src="./img/1.jpg" alt="">
<script>
// 1.获取元素
var oImg = document.getElementsByTagName("img")[0];
var arr = [
"./img/1.jpg",
"./img/2.jpg",
"./img/3.jpg",
"./img/4.jpg",
]
var n = 0;
function auto() {
n++;
if (n > 3) {
n = 0;
}
oImg.src = arr[n];
}
// 每隔1秒切换一张图片
var timer = setInterval(auto, 1000)
// 2.滑入图片 停止定时器
oImg.onmouseover = function () {
// 停止定时器
clearInterval(timer)
}
// 2.滑出图片 开启定时器
oImg.onmouseout = function () {
// 定时器一旦停止就没有了，如果后续需要定时器 需要再次定义
timer = setInterval(auto, 1000) // 如果带var 就变成局部变量
}
</script>
</body>
扫一扫
1125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
