資訊專(zhuān)欄INFORMATION COLUMN
摘要：普通寫(xiě)法轉(zhuǎn)換過(guò)程先變型盡量不要出現(xiàn)函數(shù)嵌套函數(shù)可以有全局變量把中不是賦值的語(yǔ)句放到多帶帶函數(shù)中改成面向?qū)ο笕肿兞烤褪菍傩院瘮?shù)就是方法中創(chuàng)建對(duì)象改指向事件或定時(shí)器問(wèn)題現(xiàn)要求再創(chuàng)建一個(gè)選項(xiàng)卡，自動(dòng)輪播，只需新增修改和新增一個(gè)方法
html:
111222333
css:
#div1 div{width: 200px; height: 200px;border:1px #000 solid; display: none;}
.active{background:#f00;}
js:
// 普通寫(xiě)法
window.onload = function () {
var oParent = document.getElementById("div1");
var aInput = oParent.getElementsByTagName("input");
var aDiv = oParent.getElementsByTagName("div");
for (var i = 0; i < aInput.length; i++) {
aInput[i].index = i;
aInput[i].onclick = function () {
for (var i = 0; i < aInput.length; i++) {
aInput[i].className = "";
aDiv[i].style.display = "none"
}
this.className = "active";
aDiv[this.index].style.display = "block"
}
}
}
轉(zhuǎn)換過(guò)程
-先變型 盡量不要出現(xiàn)函數(shù)嵌套函數(shù),可以有全局變量,把onload中不是賦值的語(yǔ)句放到多帶帶函數(shù)中
var oParent = null;
var aInput = null;
var aDiv = null;
window.onload = function () {
oParent = document.getElementById("div1");
aInput = oParent.getElementsByTagName("input");
aDiv = oParent.getElementsByTagName("div");
init();
}
function init() {
for (var i = 0; i < aInput.length; i++) {
aInput[i].index = i;
aInput[i].onclick = change;
}
}
function change() {
for (var i = 0; i < aInput.length; i++) {
aInput[i].className = "";
aDiv[i].style.display = "none"
}
this.className = "active";
aDiv[this.index].style.display = "block"
}
//改成面向?qū)ο?
全局變量就是屬性 函數(shù)就是方法 onload中創(chuàng)建對(duì)象 改this指向(事件或定時(shí)器問(wèn)題)
window.onload = function () {
var t1 = new Tab()
t1.init();
}
function Tab() {
this.oParent = document.getElementById("div1");
this.aInput = this.oParent.getElementsByTagName("input");
this.aDiv = this.oParent.getElementsByTagName("div");
}
Tab.prototype.init = function () {
var This = this;
for (var i = 0; i < this.aInput.length; i++) {
this.aInput[i].index = i;
this.aInput[i].onclick = function (){
This.change(this);
}
}
}
Tab.prototype.change = function (obj) {
for (var i = 0; i < this.aInput.length; i++) {
this.aInput[i].className = "";
this.aDiv[i].style.display = "none"
}
obj.className = "active";
this.aDiv[obj.index].style.display = "block"
}
現(xiàn)要求再創(chuàng)建一個(gè)選項(xiàng)卡，自動(dòng)輪播，只需新增div2 修改init和新增一個(gè)autoPlay方法
window.onload = function () {
var t1 = new Tab("div1")
t1.init();
var t2 = new Tab("div2")
t2.init();
t2.autoPlay();
}
function Tab(id) {
this.oParent = document.getElementById(id);
this.aInput = this.oParent.getElementsByTagName("input");
this.aDiv = this.oParent.getElementsByTagName("div");
this.iNow = 0;
}
Tab.prototype.autoPlay = function () {
var This = this;
setInterval(function () {
if(This.iNow == This.aInput.length-1) {
This.iNow = 0;
}else {
This.iNow++;
}
for (var i = 0; i < This.aInput.length; i++) {
This.aInput[i].className = "";
This.aDiv[i].style.display = "none"
}
This.aInput[This.iNow].className = "active";
This.aDiv[This.iNow].style.display = "block"
}, 2000)
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94079.html
摘要：普通寫(xiě)法轉(zhuǎn)換過(guò)程先變型盡量不要出現(xiàn)函數(shù)嵌套函數(shù)可以有全局變量把中不是賦值的語(yǔ)句放到單獨(dú)函數(shù)中改成面向?qū)ο笕肿兞烤褪菍傩院瘮?shù)就是方法中創(chuàng)建對(duì)象改指向事件或定時(shí)器問(wèn)題現(xiàn)要求再創(chuàng)建一個(gè)選項(xiàng)卡，自動(dòng)輪播，只需新增修改和新增一個(gè)方法 html: 111 222 333 css: #div1 div{width: 200px; heig...
摘要：其實(shí)的面向?qū)ο蠛芏嘣砗蜋C(jī)制還是的，只不過(guò)把語(yǔ)法改成類(lèi)似和老牌后端語(yǔ)言中的面向?qū)ο笳Z(yǔ)法一用封裝一個(gè)基本的類(lèi)是不是很向和中的類(lèi)其實(shí)本質(zhì)還是原型鏈，我們往下看就知道了首先說(shuō)下語(yǔ)法規(guī)則中的就是類(lèi)名，可以自定義就是構(gòu)造函數(shù)，這個(gè)是關(guān)鍵字，當(dāng)實(shí)例化對(duì) 其實(shí)es6的面向?qū)ο蠛芏嘣砗蜋C(jī)制還是ES5的，只不過(guò)把語(yǔ)法改成類(lèi)似php和java老牌后端語(yǔ)言中的面向?qū)ο笳Z(yǔ)法. 一、用es6封裝一個(gè)基本的類(lèi) ...
摘要：什么是面向?qū)ο缶幊逃脤?duì)象的思想去寫(xiě)代碼，就是面向?qū)ο缶幊踢^(guò)程式寫(xiě)法面向?qū)ο髮?xiě)法我們一直都在使用對(duì)象數(shù)組時(shí)間面向?qū)ο缶幊痰奶攸c(diǎn)抽象抓住核心問(wèn)題封裝只能通過(guò)對(duì)象來(lái)訪問(wèn)方法繼承從已有對(duì)象上繼承出新的對(duì)象多態(tài)多對(duì)象的不同形態(tài)對(duì)象的組成方法行為操作對(duì) 什么是面向?qū)ο缶幊? 用對(duì)象的思想去寫(xiě)代碼，就是面向?qū)ο缶幊? 過(guò)程式寫(xiě)法 面向?qū)ο髮?xiě)法 我們一直都在使用對(duì)象 數(shù)組Array 時(shí)間Dat...
插件顧名思義就是能在一個(gè)頁(yè)面多處使用, 各自按自己的參數(shù)配置運(yùn)行, 并且相互不會(huì)沖突.會(huì)寫(xiě)javascript插件是進(jìn)階js高級(jí)的必經(jīng)之路, 也是自己所學(xué)知識(shí)的一個(gè)典型的綜合運(yùn)用. 如果你還沒(méi)頭緒, 無(wú)從下手的話, 不用著急, 今天我們就一起來(lái)探討一下插件的一般寫(xiě)法.所需技能： 1.面向?qū)ο笥梅?2.閉包的理解 3.變量作用域的理解 以一個(gè)tab選項(xiàng)卡的為例: 第一步: 我們需要寫(xiě)html結(jié)...
閱讀 1717·2023-04-26 01:02
閱讀 4881·2021-11-24 09:39
閱讀 1816·2019-08-30 15:44
閱讀 2901·2019-08-30 11:10
閱讀 1795·2019-08-30 10:49
閱讀 993·2019-08-29 17:06
閱讀 619·2019-08-29 16:15
閱讀 910·2019-08-29 15:17
