定时器和函数封装
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>
本文含有隐藏内容，请 开通VIP 后查看