簡單js切換代碼簡化汗血寶馬的簡單介紹

本文目錄一覽：

• 1、js實現單一html頁面兩套css切換代碼
• 2、js代碼的JS代碼在優化中：
• 3、怎麼用JS下拉切換圖片，代碼寫法簡單點的
• 4、請大家幫看下這個簡單的js怎麼實現自動切換，知道用setInterval，但不知道怎麼加進去，試了很多種
• 5、如何優化js代碼
• 6、使用JS函數簡化代碼

js實現單一html頁面兩套css切換代碼

今天研究了一下JS的用setAttribute方法實現一個頁面兩份樣式表的效果，具體方法如下：

第一步：在連接樣式表的元素里定義一個id,例如

複製代碼

代碼如下:

link

href=”1.css”

rel=”stylesheet”

type=”text/css”

id=”css”

我定義的id是css。

第二步：寫一個js函數，代碼如下：

複製代碼

代碼如下:

script

type=”text/javascript”

function

change(a){

var

css=document.getElementById(“css”);

if

(a==1)

css.setAttribute(“href”,”1.css”);

if

(a==2)

css.setAttribute(“href”,”2.css”);

}

/script

這個函數的code可以放在頁面的任何地方。

第三步：為改變頁面的樣式表的連接添加一個函數的觸發事件，代碼如下：

複製代碼

代碼如下:

a

href=”#”

onClick=”change(1)”1.css/a

a

href=”#”

onClick=”change(2)”2.css/a

該效果在IE和FF下均測試通過，相信大家看完後因該非常明了，利用這個方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，比如年老者可以選擇一個字體較大的樣式表。這裡需要注意的兩點是：

在這個例子中函數名function後面的名字不能為links或者link，如果為links或者link，樣式表將不被改變，具體什麼原因我也不大清楚，可能是javascript的保留字符。

另外如果是改變整個頁面的樣式，你需要在樣式表文件里定義body的高度為100%

方法二：

第一步：導入兩套css文件

複製代碼

代碼如下:

link

rel=”stylesheet”

type=”text/css”

title=”樣式A”

href=”css/people1.css”

/

link

rel=”alternate

stylesheet”

type=”text/css”

title=”樣式B”

href=”css/people2.css”

/

第二步：寫切換的js函數

複製代碼

代碼如下:

script

type=”text/javascript”

var

title

=

“樣式A”;

function

setStyle(){

//只是樣式A

和樣式B切換

if(title==”樣式A”){

title

=

“樣式B”;

}else{

title

=

“樣式A”;

}

var

i,links;

//用dom方法獲取所有link元素

links

=

document.getElementsByTagName(“link”);

//判斷每個link元素中是否含有style字符串

，用來判斷此link元素為樣式表link

，同時判斷此link是否包含title屬性

for(i=0;

links[i];

i++){

if(links[i].getAttribute(“rel”).indexOf(“style”)

!=

-1

links[i].getAttribute(“title”)){

//把所有link設為disabled

links[i].disabled

=

true;

//再來判斷title中是否有指定的title字符串

有則把當前的link設為可視

即激活當前的link

if(links[i].getAttribute(“title”).indexOf(title)

!=

-1){

links[i].disabled

=

false;

//alert(“ok”);

}

}

}

}

/script

第三步：在html標籤中調用切換的js函數

複製代碼

代碼如下:

a

href=”#”

onclick=”setStyle();”

1/a

a

href=”#”

onclick=”setStyle();”2/a

a

href=”#”

onclick=”setStyle();”3/a

a

href=”#”

onclick=”setStyle();”4/a

a

href=”#”

onclick=”setStyle();”5/a

js代碼的JS代碼在優化中：

一、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化

eg：x=x+1;在不影響功能的情況下可以簡寫為x++;

二、 變量名方法名盡量在不影響語意的情況下簡單。（可以選擇首字母命名）

eg：定義數組的長度可以取名為：ArrLen而不需要取為ArrayLength。

三、 關於JS的循環，循環是一種常用的流程控制。

JS提供了三種循環：for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差，因為它需要查詢Hash鍵，因此應盡量少用for(in)循環，for(;;)、while()循環的性能基本持平。當然，推薦使用for循環，如果循環變量遞增或遞減，不要單獨對循環變量賦值，而應該使用嵌套的++或–運算符。

四、 如果需要遍曆數組，應該先緩存數組長度，將數組長度放入局部變量中，避免多次查詢數組長度。

因為我們常常要根據字符串、數組的長度進行循環，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var len=a.length，則就少了一次查詢。

五、 盡量選用局部變量而不是全局變量。

局部變量的訪問速度要比全局變量的訪問速度更快，因為全局變量其實是window對象的成員，而局部變量是放在函數的棧里的。

六、 盡量少使用eval。

每次使用eval需要消耗大量時間，這時候使用JS所支持的閉包可以實現函數模板。

七、 減少對象查找

因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重複出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變量，把它放入一個臨時的地方進行查詢。

八、 字符串連接。

如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要連接多個字符串，應該少使用+=，如s+=a;s+=b;s+=c;應該寫成s+=a + b + c；

而如果是收集字符串，比如多次對同一個字符串進行+=操作的話，最好使用一個緩存。怎麼用呢？使用JavaScript數組來收集，最後使用join方法連接起來，如下

var buf = new Array();for(var i = 0; i 100; i++){ buf.push(i.toString());}var all = buf.join(“”);

九、 類型轉換

1. 把數字轉換成字符串，應用”” + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：(“” +) String() .toString() new String()

盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。

String()屬於內部函數，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用於返回一個精確的副本。

2. 浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用於將字符串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。Math是內部對象，所以Math.floor()其實並沒有多少查詢方法和調用的時間，速度是最快的。

3. 對於自定義的對象，如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之後，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高

十、 盡量作用JSON格式來創建對象，而不是var obj=new Object()方法。

因為前者是直接複製，而後者需要調用構造器，因而前者的性能更好。

十一、 當需要使用數組時，也盡量使用JSON格式的語法，

使用JSON格式的語法即直接使用如下語法定義數組：[parrm,param,param…],而不是採用new Array(parrm,param,param…)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要調用Array的構造器。

十二、 對字符串進行循環操作，例如替換、查找，就使用正則表達式。

因為JS的循環速度比較慢，而正則表達式的操作是用C寫成的API，性能比較好。

十三、 插入HTML

很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。

十四、 對象查詢

使用[“”]查詢要比.items()更快

十五、 定時器

如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設置一個定時器。

十六、 盡量減少DOM調用

在Web開發中，JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的，因為這會導致瀏覽器執行迴流 （reflow）操作。我們應該儘可能的減少DOM操作。

怎麼用JS下拉切換圖片，代碼寫法簡單點的

ionic 手勢事件

on-drag-down

下拉觸發函數

函數寫切換圖片

如果你不用ionic，只能自己用js監聽touchstart，touchmove，touchend了。

請大家幫看下這個簡單的js怎麼實現自動切換，知道用setInterval，但不知道怎麼加進去，試了很多種

body

div id=’pup’ /div

div id=”div1″

div class=”box”

div class=”hd”a href=”#”11/a/div

div class=”bd”

img src=”a.jpg” width=”160″ height=”160″ /

span class=”info”哈哈/span

/div

/div

div class=”box”

div class=”hd”a href=”#”22/a/div

div class=”bd”

img src=”a.jpg” width=”160″ height=”160″ /

span class=”info”哈哈/span

/div

/div

div class=”box”

div class=”hd”a href=”#”33/a/div

div class=”bd”

img src=”a.jpg” width=”160″ height=”160″ /

span class=”info”哈哈/span

/div

/div

/div

/body

script type=”text/javascript”

function getByClass(oParent,sClass)

{

var oEle=oParent.getElementsByTagName(‘*’);

var aResult=[];

var i=0;

for(i=0;ioEle.length;i++)

{

if(oEle[i].className==sClass)

{

aResult.push(oEle[i]);

}

}

return aResult;

}

var tag = 0;

var oDiv=document.getElementById(‘div1’);

var oBox=getByClass(oDiv,’box’);

var oHd=getByClass(oDiv,’hd’);

var oBd=getByClass(oDiv,’bd’);

for(i=0;ioBox.length;i++)

{

oHd[i].className=’hd’;

oBd[i].style.display=’none’;

}

oHd[0].className=’active’;

oBd[0].style.display=’block’;

function autoChange(){

oHd[tag].className=’hd’;

oBd[tag].style.display=’none’;

if (tag (oBox.length-1 )){

tag = tag+1;

}else{

tag = 0;

}

oHd[tag].className=’active’;

oBd[tag].style.display=’block’;

}

var int=self.setInterval(“autoChange()”, 1000);

/script

如何優化js代碼

一、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化

eg：x=x+1;在不影響功能的情況下可以簡寫為x++;

二、 變量名方法名盡量在不影響語意的情況下簡單。（可以選擇首字母命名）

eg：定義數組的長度可以取名為：ArrLen而不需要取為ArrayLength。

三、 關於JS的循環，循環是一種常用的流程控制。

JS提供了三種循環：for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差，因為它需要查詢Hash鍵，因此應盡量少用for(in)循環，for(;;)、while()循環的性能基本持平。當然，推薦使用for循環，如果循環變量遞增或遞減，不要單獨對循環變量賦值，而應該使用嵌套的++或–運算符。

四、 如果需要遍曆數組，應該先緩存數組長度，將數組長度放入局部變量中，避免多次查詢數組長度。

因為我們常常要根據字符串、數組的長度進行循環，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var len=a.length，則就少了一次查詢。

五、 盡量選用局部變量而不是全局變量。

局部變量的訪問速度要比全局變量的訪問速度更快，因為全局變量其實是window對象的成員，而局部變量是放在函數的棧里的。

六、 盡量少使用eval。

每次使用eval需要消耗大量時間，這時候使用JS所支持的閉包可以實現函數模板。

七、 減少對象查找

因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重複出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變量，把它放入一個臨時的地方進行查詢。

八、 字符串連接。

如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要連接多個字符串，應該少使用+=，如s+=a;s+=b;s+=c;應該寫成s+=a + b + c；

而如果是收集字符串，比如多次對同一個字符串進行+=操作的話，最好使用一個緩存。怎麼用呢？使用JavaScript數組來收集，最後使用join方法連接起來，如下

var buf = new Array();for(var i = 0; i 100; i++){ buf.push(i.toString());}var all = buf.join(“”);

九、 類型轉換

1. 把數字轉換成字符串，應用”” + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：(“” +) String() .toString() new String()

盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。

String()屬於內部函數，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用於返回一個精確的副本。

2. 浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用於將字符串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。Math是內部對象，所以Math.floor()其實並沒有多少查詢方法和調用的時間，速度是最快的。

3. 對於自定義的對象，如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之後，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高

十、 盡量作用JSON格式來創建對象，而不是var obj=new Object()方法。

因為前者是直接複製，而後者需要調用構造器，因而前者的性能更好。

十一、 當需要使用數組時，也盡量使用JSON格式的語法，

使用JSON格式的語法即直接使用如下語法定義數組：[parrm,param,param…],而不是採用new Array(parrm,param,param…)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要調用Array的構造器。

十二、 對字符串進行循環操作，例如替換、查找，就使用正則表達式。

因為JS的循環速度比較慢，而正則表達式的操作是用C寫成的API，性能比較好。

十三、 插入HTML

很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。

十四、 對象查詢

使用[“”]查詢要比.items()更快

十五、 定時器

如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設置一個定時器。

十六、 盡量減少DOM調用

在Web開發中，JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的，因為這會導致瀏覽器執行迴流 （reflow）操作。我們應該儘可能的減少DOM操作。

使用JS函數簡化代碼

建議用jquery 一次性綁定事件 回調函數中再通過對象的index改變相應的背景圖，代碼會精簡很多

script src=””/script

script

    $(function() {

        $(“#myUl li”).on(“mouseover”, function () {

            $(this).addClass(“current”)

                .css(“background-image”, “url(img/0” + ($(this).index() + 1) + “big.jpg)”);

        }).on(“mouseout”, function () {

            $(this).removeClass(“current”)

                .css(“background-image”, “url(img/0” + ($(this).index() + 1) + “.jpg)”);

        })

    })

/script