JavaScript-client、offset、scroll、定時器

client
offset
scroll

client、offset、scroll系列

他們的作用主要與計算盒模型，盒子的偏移量和滾動有關

clientTop 內容區域到邊框頂部的距離， 說白了， 就是邊框的高度
clientLeft 內容區域到邊框左部的距離， 說白了， 就是邊框的寬度
clientWidth 內容區域+左右padding        可視寬度
clientHeight 內容區域+上下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">專業豐富的課程體系，博學多聞的實力講師以及風趣生動的課堂，在路飛，不是灌輸知識，而是點燃你的學習火焰。專業豐富的課程體系，博學多聞的實力講師以及風趣生動的課堂，在路飛，不是灌輸知識，而是點燃你的學習火焰。專業豐富的課程體系，博學多聞的實力講師以及風趣生動的課堂，在路飛，不是灌輸知識，而是點燃你的學習火焰。專業豐富的課程體系，博學多聞的實力講師以及風趣生動的課堂，在路飛，不是灌輸知識，而是點燃你的學習火焰。</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

屏幕的可視區域

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">// 屏幕的可視區域window.onload = function(){// document.documentElement 獲取的是html標簽
            console.log(document.documentElement.clientWidth);console.log(document.documentElement.clientHeight);// 窗口大小發生變化時，會調用此方法window.onresize = function(){    console.log(document.documentElement.clientWidth);console.log(document.documentElement.clientHeight);}         }</script>
</html>

View Code

offset演示

<!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占位寬  內容+padding+borderoffsetHeight占位高 offsetTop: 如果盒子沒有設置定位 到body的頂部的距離,如果盒子設置定位，那么是以父輩為基準的top值offsetLeft： 如果盒子沒有設置定位 到body的左部的距離，如果盒子設置定位，那么是以父輩為基準的left值* */console.log(box.offsetTop)console.log(box.offsetLeft)console.log(box.offsetWidth)console.log(box.offsetHeight)}</script>
</html>

View Code

scroll演示

實施監聽滾動事件

<!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>學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界學習新技能，達成人生目標，開始用自己的力量影響世界</p></div></body><script type="text/javascript">window.onload = function(){//實施監聽滾動事件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 : 內容的高度+padding  不包含邊框console.log('上'+s.scrollTop)console.log('左'+s.scrollLeft)console.log('寬'+s.scrollWidth)console.log('高'+s.scrollHeight)}}</script>
</html>

View Code

定時器

setTimeout()
setInterval()

在js中有兩種定時器：

一次性定時器：setTimeout()
周期性循環定時器：setInterval()

setTimeout()

只在指定的時間后執行一次

/定時器 異步運行  
function hello(){  
alert("hello");  
}  
//使用方法名字執行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法  
window.clearTimeout(t1);//去掉定時器

setInterval()

在指定時間為周期循環執行

/實時刷新  時間單位為毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查詢 */  
function refreshQuery(){  console.log('每8秒調一次') 
}

對于這兩個方法，需要注意的是如果要求在每隔一個固定的時間間隔后就精確地執行某動作，那么最好使用setInterval，而如果不想由于連續調用產生互相干擾的問題，尤其是每次函數的調用需要繁重的計算以及很長的處理時間，那么最好使用setTimeout

轉載于:https://www.cnblogs.com/Xuuuuuu/p/10510461.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/279956.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/279956.shtml
英文地址，請注明出處：http://en.pswp.cn/news/279956.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！