本文目录一览：

• 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