js中的定時器和麵向物件
阿新 • • 發佈:2019-01-06
1. 定時器的使用
1. 定時器:用以指定在一段特定的時間後執行某段程式。 1.1.倒計定時器:timename=setTimeout("function();",delaytime); // 只執行一次 1.2.迴圈定時器:timename=setInterval("function();",delaytime); // 無線迴圈倒計時定時器是在指定時間到達後觸發事件,而迴圈定時器就是在間隔時間到來時反覆觸發事件,兩者的區別在於:前者只是作用一次,而後者則不停地作用。 1.3. clearInterval(物件): 清除已設定的setInterval物件 2. (1.) offset這個單詞本身是--偏移,補償,位移的意思。 o f f s e t W i d t h和offsetHight (檢測盒子自身寬高+padding+border)這兩個屬性,他們繫結在了所有的節點元素上。獲取之後,只要呼叫這兩個屬性,我們就能夠獲取元素節點的寬和高。 offset寬/高 = 盒子自身的寬/高 + padding +border; offsetWidth = width+padding+border; offsetHeight = Height+padding+border;
2.(2) offsetLeft和offsetTop(檢測距離父盒子有定位的左/上面的距離)返回距離上級盒子(帶有定位)左邊s的位置如果父級都沒有定位則以body為準offsetLeft 從父親的padding 開始算,父親的border 不算。在父盒子有定位的情況下,offsetLeft ==style.left(去掉px)。
無縫滾動例項:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title></title>
<style>
* {margin: 0;padding: 0;}
#div1 {width: 472px;height: 71px;margin: 100px auto;
position : relative;background: red;overflow: hidden;}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 108px;
height: 71px;
list-style: none;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
// var oUl = oDiv.getElementsByTagName('ul')[0]; // 如果通過標籤名獲取元素,就要在標籤後面增加[0]
var oUl = document.getElementById('ul'); // 如果通過標Id獲取元素和標籤,就不用在後面增加[0];
var aLi = oUl.getElementsByTagName('li');
var oBtn1= document.getElementById('btn1');
var oBtn2= document.getElementById('btn2');
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; // 複製多一份圖片
// console.log(oUl0.innerHTML)
oUl.style.width = aLi[0].offsetWidth *aLi.length + 'px'; // aLi[0].offsetWidth *aLi.length 這是圖片的寬度乘以圖片個數
//console.log(oUl.style.width )
var speed=-2; // 定義一個數,正負號代表方向,數值代表轉速的快慢
function move() { // 建立函式
oBtn1.onclick=function(){ // 往左邊滾動
speed=-2;
}
oBtn2.onclick=function(){ // 往右邊滾動
speed=2;
}
if(oUl.offsetLeft < -oUl.offsetWidth / 2) { // 判斷當經過超過圖片長度1/2後,就重新滾動
oUl.style.left ='0px'; // 當他向左滾動完後重新清零再次滾動
}
else if(oUl.offsetLeft > 0) { // 判斷當經過大於0 ,向右滾動,這時候的長度全部圖片的寬度,(-)表示在左超出的一半
oUl.style.left = -oUl.offsetWidth / 2+ 'px';
}
oUl.style.left = oUl.offsetLeft +speed+ 'px';
// console.log(oUl.style.left);
}
setInterval(move, 30); // 開啟定時器, move表示自定義的函式名,後面是時間值
}
</script>
</head>
<body>
<input type="button" id="btn1" value="左" />
<input type="button" id="btn2" value="右" />
<div id="div1">
<ul id="ul">
<li><img src="img/1_r2_c2.jpg" /></li>
<li><img src="img/1_r2_c3.jpg" /></li>
<li><img src="img/pic.jpg" /></li>
<li><img src="img/1_r2_c3.jpg" /></li>
</ul>
</div>
</body>
</html>
3.什麼是DOM?
文件物件模型。賦予js操作節點的能力。當網頁被載入時,瀏覽器會建立頁面的文件物件模型(Document ObjectModel)。
3.1. 節點分為兩種:文字節點和元素節點
獲取子節點:childNodes nodeType 和 children
獲取子節點例子:
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');// 通過id名獲取標籤
for(var i=0;aLi.length;i++){ // 設定迴圈
console.log(oUl.children.length); //檢驗ul裡面裡的標籤個數
}
}
</script>
</head>
<body>
<ul id="ul">
<li></li>
<li></li>
<li></li>
</ul>
</body>
3.2. 獲取父節點:parentNode
例:點選刪除,隱藏li
獲取子節點例子:
<script type="text/javascript">
window.onload = function() {
var oList = document.getElementById('list');
var aLi = oList.getElementsByTagName('li');
var aA = oList.getElementsByTagName('a');
// chlidren 父節點,子節點
//console.log(oList.children.lengtht);
//nodeType==3 -> 文字節點
//nodeType==1 -> 元素節點
for(var i = 0; i < aLi.length; i++) {
aA[i].onclick = function() {
this.parentNode.style.display = 'none'; //this.parentNode 指當前標籤裡面的父節點
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>社會<a href="javascript:;">刪除</a></li>
</ul>
</body>
3.3.首尾子節點,有相容性問題
firstElementChild //一般拿來判斷相容的問題
firstChild // 首節點 只在IE下面相容
firstElementChild // 在非IE下面相容
lastChild 、 // 尾節點
lastElementChild
3.4.兄弟節點 ,有相容性問題
nextSibling、// 本身節點的下一個節點 只在IE下面相容
nextElementSibling
previousSibling、
reviousElementSibling // 本身節點的上一個節點
3.4. DOM方式操作元素屬性:
獲取:getAttribute(名稱)
設定:setAttribute(名稱, 值)
刪除:removeAttribute(名稱)
3.5. DOM的增刪改查:
例子:
<body>
<ul id="ul">
<li id="apple">1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById('ul');
var oAp=document.getElementById('apple');
var oXi=document.createElement('li');// 建立節點
oXi.innerHTML='4'; //插入內容
oUl.appendChild(oXi); //插入節點
var oYt=document.createElement('li'); // 建立節點
oYt.innerHTML='0'; //插入內容
oUl.insertBefore(oYt,oAp) //在第一個節點前面插入節點
</script>
4.面向物件:
4. 1.什麼是面向物件:物件是一個整體,對外提供一些操作。
2. 什麼是面向物件:使用物件時,只關注物件提供的功能,不關注其內部細節比如JQuery 面向物件是一種通用思想,並非只有程式設計中能用,任何事情都可以用。
4.2、js中的面向物件
面向物件程式設計(OOP)的特點
抽象:抓住核心問題
封裝:不考慮內部實現,只考慮功能使用
繼承:從已有物件上,繼承出新的物件
多重繼承
多型
物件的組成:
方法——函式:過程、動態的
屬性——變數:狀態、靜態的
4.3、寫一個面向物件程式
為物件新增方法和屬性
this詳解,事件處理中this的本質
windowthis——函式屬於誰
不能在系統物件中隨意附加方法、屬性,否則會覆蓋已有方法、屬性 object物件
4.4.工廠方式:用建構函式建立一個類。
4.5.6、原型——prototype
什麼是原型:原型是class,修改他可以影響一類元素
在已有物件中加入自己的屬性、方法
原型修改對已有物件的影響為Array新增sum方法
給物件新增方法,類似於行間樣式
給原型新增方法,類似於class
原型的小缺陷
無法限制覆蓋