當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript-client、offset、scroll、定时器
生活随笔
收集整理的這篇文章主要介紹了
JavaScript-client、offset、scroll、定时器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
-
client
-
offset
-
scroll
client、offset、scroll系列
他們的作用主要與計(jì)算盒模型，盒子的偏移量和滾動(dòng)有關(guān)
clientTop 內(nèi)容區(qū)域到邊框頂部的距離， 說(shuō)白了， 就是邊框的高度 clientLeft 內(nèi)容區(qū)域到邊框左部的距離， 說(shuō)白了， 就是邊框的寬度 clientWidth 內(nèi)容區(qū)域+左右padding 可視寬度 clientHeight 內(nèi)容區(qū)域+上下padding 可視高度client演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{padding: 0;margin: 0;}.box{width: 200px;height: 200px;position: absolute;border: 10px solid red;padding: 80px;}</style> </head> <body><div class="box" id="box">專業(yè)豐富的課程體系，博學(xué)多聞的實(shí)力講師以及風(fēng)趣生動(dòng)的課堂，在路飛，不是灌輸知識(shí)，而是點(diǎn)燃你的學(xué)習(xí)火焰。專業(yè)豐富的課程體系，博學(xué)多聞的實(shí)力講師以及風(fēng)趣生動(dòng)的課堂，在路飛，不是灌輸知識(shí)，而是點(diǎn)燃你的學(xué)習(xí)火焰。專業(yè)豐富的課程體系，博學(xué)多聞的實(shí)力講師以及風(fēng)趣生動(dòng)的課堂，在路飛，不是灌輸知識(shí)，而是點(diǎn)燃你的學(xué)習(xí)火焰。專業(yè)豐富的課程體系，博學(xué)多聞的實(shí)力講師以及風(fēng)趣生動(dòng)的課堂，在路飛，不是灌輸知識(shí)，而是點(diǎn)燃你的學(xué)習(xí)火焰。</div></body> <script type="text/javascript">var oBox = document.getElementById("box");console.log(oBox.clientTop);console.log(oBox.clientLeft);console.log(oBox.clientWidth);console.log(oBox.clientHeight); </script> </html> View Code屏幕的可視區(qū)域
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">// 屏幕的可視區(qū)域window.onload = function(){// document.documentElement 獲取的是html標(biāo)簽 console.log(document.documentElement.clientWidth);console.log(document.documentElement.clientHeight);// 窗口大小發(fā)生變化時(shí)，會(huì)調(diào)用此方法window.onresize = function(){ console.log(document.documentElement.clientWidth);console.log(document.documentElement.clientHeight);} }</script> </html> View Codeoffset演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}</style></head><body style="height: 2000px"><div><div class="wrap" style=" width: 300px;height: 300px;background-color: green"><div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;"> </div></div></div></body><script type="text/javascript">window.onload = function(){var box = document.getElementById('box')/*offsetWidth占位寬 內(nèi)容+padding+borderoffsetHeight占位高 offsetTop: 如果盒子沒(méi)有設(shè)置定位 到body的頂部的距離,如果盒子設(shè)置定位，那么是以父輩為基準(zhǔn)的top值offsetLeft： 如果盒子沒(méi)有設(shè)置定位 到body的左部的距離，如果盒子設(shè)置定位，那么是以父輩為基準(zhǔn)的left值* */console.log(box.offsetTop)console.log(box.offsetLeft)console.log(box.offsetWidth)console.log(box.offsetHeight)}</script> </html> View Codescroll演示
實(shí)施監(jiān)聽滾動(dòng)事件
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}</style></head><body style="width: 2000px;height: 2000px;"><div style="height: 200px;background-color: red;"></div><div style="height: 200px;background-color: green;"></div><div style="height: 200px;background-color: yellow;"></div><div style="height: 200px;background-color: blue;"></div><div style="height: 200px;background-color: gray;"></div><div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;"><p>學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界學(xué)習(xí)新技能，達(dá)成人生目標(biāo)，開始用自己的力量影響世界</p></div></body><script type="text/javascript">window.onload = function(){//實(shí)施監(jiān)聽滾動(dòng)事件window.onscroll = function(){ // console.log(1111) // console.log('上'+document.documentElement.scrollTop) // console.log('左'+document.documentElement.scrollLeft) // console.log('寬'+document.documentElement.scrollWidth) // console.log('高'+document.documentElement.scrollHeight) }var s = document.getElementById('scroll');s.onscroll = function(){ // scrollHeight : 內(nèi)容的高度+padding 不包含邊框console.log('上'+s.scrollTop)console.log('左'+s.scrollLeft)console.log('寬'+s.scrollWidth)console.log('高'+s.scrollHeight)}}</script> </html> View Code?
定時(shí)器
-
setTimeout()
-
setInterval()
在js中有兩種定時(shí)器：
- 一次性定時(shí)器：setTimeout()
- 周期性循環(huán)定時(shí)器：setInterval()
setTimeout()
只在指定的時(shí)間后執(zhí)行一次
/定時(shí)器 異步運(yùn)行 function hello(){ alert("hello"); } //使用方法名字執(zhí)行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串執(zhí)行方法 window.clearTimeout(t1);//去掉定時(shí)器setInterval()
在指定時(shí)間為周期循環(huán)執(zhí)行
/實(shí)時(shí)刷新 時(shí)間單位為毫秒 setInterval('refreshQuery()',8000); /* 刷新查詢 */ function refreshQuery(){ console.log('每8秒調(diào)一次') }對(duì)于這兩個(gè)方法，需要注意的是如果要求在每隔一個(gè)固定的時(shí)間間隔后就精確地執(zhí)行某動(dòng)作，那么最好使用setInterval，而如果不想由于連續(xù)調(diào)用產(chǎn)生互相干擾的問(wèn)題，尤其是每次函數(shù)的調(diào)用需要繁重的計(jì)算以及很長(zhǎng)的處理時(shí)間，那么最好使用setTimeout
轉(zhuǎn)載于:https://www.cnblogs.com/Xuuuuuu/p/10510461.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript-client、offset、scroll、定时器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 机器视觉技术在表面缺陷检测方面的发展趋势
- 下一篇： BZOJ4327:[JSOI2012]玄