发布于 2016-12-07 22:07:06 | 61 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


比较不错的用cookies实现的可记忆的样式切换效果,这个思路也在一定程序,方便客户的长期使用。
无刷新cookies切换样式示例代码实例主要用到的代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>styleswitcherphperz-www.phperz.com </title> 
<link title=red rel="stylesheet" type="text/css" href="red.css"> 
<LINK title=blue href="blue.css" type=text/css rel="alternate stylesheet"> 
<SCRIPT src="styleswitcher.js" type=text/javascript></SCRIPT> 
<style> 
<!-- 
#wrapper     { font-size: 10px;width:100px; } 
#left     { width:20px; height:100px; } 
#right     { width:80px;float:right;background-color:#000000;;height:100px;color:#FFFFFF } 
--> 
</style> 
</head> 

<body> 
<A onclick="setActiveStyleSheet('red');return false;" href="#">red</A> 
<A onclick="setActiveStyleSheet('blue');return false;" href="#">blue</A> 
<select name="changestyle" size="1"> 
<option value="red">red</option> 
<option value="blue">blue</option> 
</select><input type="button" value="变" onclick="setActiveStyleSheet(changestyle.value);return false;"> 
<div id="wrapper"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
</body> 

</html> 


styleswitcher.js 

// styleswitcher.js 

function setActiveStyleSheet(title) 
{ 
    var i, a, main; 

    for(i = 0; (a = document.getElementsByTagName("link")[i]); i++) 
    { 
        if (a.getAttribute("rel").indexOf("style") != -1 &&  
            a.getAttribute("title")) 
        { 
            a.disabled = true; 

            if (a.getAttribute("title") == title)  
                a.disabled = false; 
        } 
    } 
} 

function getActiveStyleSheet() 
{ 
    var i, a; 

    for(i = 0; (a = document.getElementsByTagName("link")[i]); i++) 
    { 
        if(a.getAttribute("rel").indexOf("style") != -1 &&  
           a.getAttribute("title") && ! a.disabled) 
            return a.getAttribute("title"); 
    } 

    return null; 
} 

function getPreferredStyleSheet() 
{ 
    var i, a; 

    for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) 
    { 
        if(a.getAttribute("rel").indexOf("style") != -1 && 
           a.getAttribute("rel").indexOf("alt") == -1 && 
           a.getAttribute("title")) 
            return a.getAttribute("title"); 
    } 

    return null; 
} 

function createCookie(name, value, days) 
{ 
    if (days) 
    { 
        var date = new Date(); 
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
        var expires = "; expires=" + date.toGMTString(); 
    } 

    else expires = ""; 
    document.cookie = name + "=" + value + expires + "; path=/"; 
} 

function readCookie(name) 
{ 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 

    for (var i = 0; i < ca.length; i++) 
    { 
        var c = ca[i]; 

        while (c.charAt(0) == ' ') 
            c = c.substring(1, c.length); 

        if (c.indexOf(nameEQ) == 0) 
            return c.substring(nameEQ.length, c.length); 
    } 

    return null; 
} 

window.onload = function(e) 
{ 
    var cookie = readCookie("style"); 
    var title = cookie ? cookie : getPreferredStyleSheet(); 

    setActiveStyleSheet(title); 
} 

window.onunload = function(e) 
{ 
    var title = getActiveStyleSheet(); 

    createCookie("style", title, 365); 
} 

var cookie = readCookie("style"); 
var title = cookie ? cookie : getPreferredStyleSheet(); 
setActiveStyleSheet(title); 

red.css

#left     { background-color:#0000FF; float:right;}

red.css

#left     { background-color:#FF0000;float:left; }


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务