`
dafei0904
  • 浏览: 9191 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

换肤 带cookie

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>换肤</title>
<style type="text/css">
body{font-size:12px}
*{margin:0;padding:0;border:0;}
ul,li{list-style:none}

.login_skin{height:25px;background:#E8E8E8;border:1px solid #e9e8e5;width:215px;color:#333;line-height:25px;margin:0px auto;padding-left:15px;}
.login_skin li{float:left;width:30px;background:#000;color:#fff;margin-left:10px;text-align:center;cursor:pointer;}

#a{background:#f00;}
#b{background:#0f0}
#c{background:#00f;}

.box{width:200px;height:200px;background:#000;margin:0px auto;}
.aaa .box{background:#f00;}
.bbb .box{background:#0f0;}
.ccc .box{background:#00f;}
</style>

<script type="text/javascript">
// --- 设置cookie
function setCookie(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=/";
}


//--- 获取cookie
function getCookie(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;
}


function skin(){
 var skin_id="aaa";
 if(getCookie("id")!=null){
      skin_id=getCookie("id");
   }
 document.body.className=skin_id;
 var skin_nub=document.getElementById("skin").getElementsByTagName("li");
 for(var i=0; i<skin_nub.length;i++){
    skin_nub[i].onclick=function(){
    var skin_id=this.getAttribute("id");
    document.body.className=skin_id;
    setCookie("id",skin_id,1);
   }
  }
}
</script>
</head>
<body onload="skin()">
<ul class="login_skin" id="skin">
<li id="aaa">红</li>
<li id="bbb">绿</li>
<li id="ccc">蓝</li>
</ul>

<div class="box"></div>
</body>
</html>
0
3
分享到:
评论

相关推荐

    jquery实现换肤带cookie

    jquery实现换肤带cookie http://www.zhongnanlujie.gov.cn(真实版本) //网站换肤 $(function(){ var $li =$("#skin li"); $li.click(function(){ switchSkin( this.id ); //alert("11"); }); var ...

    jQuery实现网站换肤功能--带cookie默认为后点击后的颜色

    本教程将详细讲解如何使用jQuery实现一个带有Cookie功能的网站换肤功能,确保用户在下次访问时能记住他们所选择的主题颜色。 首先,我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库,它简化了HTML...

    jQueryChangeSkin 换肤 支持cookie 不用调用所有样式

    jQueryChangeSkin是一款基于jQuery库开发的皮肤切换插件,它主要功能是实现网站用户界面的动态换肤,同时支持利用cookie来保存用户的皮肤选择,使得用户在下次访问时能够自动加载之前选择的皮肤,提供良好的用户体验...

    js换肤功能

    JavaScript(简称JS)换肤功能是网页应用中常见的...通过以上步骤,我们可以实现JavaScript的换肤功能,并通过Cookie保存用户的选择,提供个性化的用户体验。在实际项目中,还需要结合具体需求进行适当的调整和优化。

    利用cookie实现换肤

    在浏览网页的时候,我们经常可以看到部分页面上具有换肤功能,点击改变皮肤且但我们下次浏览的时候,还会是我们选择的皮肤。作为菜鸟来说,这是一种赤裸裸的诱惑……今天查了相关资料,很粗糙的写了一个利用coolkie...

    jQuery实现的网站换肤功能,带cookie,默认为点击后的颜色。

    本文将详细解析如何使用jQuery库来实现一个具有cookie支持的网站换肤功能,且默认设置为用户上一次选择的颜色。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在...

    css终极网页换肤+cookice.rar

    《CSS终极网页换肤技术与Cookie应用解析》 在网页设计中,用户界面的个性化和交互体验至关重要。"css终极网页换肤+cookie.rar"这个压缩包文件提供了一种先进的技术,使用户能够轻松地在不同主题之间切换,无需页面...

    背景色换肤实例.rar

    本实例“背景色换肤实例.rar”着重讲解如何利用Cookie技术来实现用户自定义背景颜色并保存其设置,让用户在下次访问时仍然能保持他们喜欢的主题颜色。下面将详细阐述这一过程涉及的IT知识点。 1. **Cookie概念**:...

    Visual Studio 2005 cookie换肤

    【Visual Studio 2005 cookie换肤】是ASP.NET开发中的一个特色功能,它涉及到Web应用程序用户界面个性化和用户状态管理的重要概念。在Visual Studio 2005这个强大的集成开发环境中,开发者可以利用cookie技术来实现...

    js+css换肤demo

    - 用户选择皮肤,触发换肤函数,更新CSS引用,并设置cookie保存新的皮肤方案。 7. **示例代码**: ```javascript function getCookie(name) { var cookieArr = document.cookie.split(';'); for (var i = 0; i...

    cookie,dom,css,js实现页面换肤

    页面换肤已经成为web2.0的时尚,看似简单的过程,实现起来却不那么容易,因为它涉及到javascript写入和读取cookie,这篇文章详细介绍了通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤功能 Html代码部分...

    jQuery.cookie.js插件实现换肤功能.docx

    ### 使用jQuery.cookie.js插件实现网站换肤功能详解 #### 一、引言 随着互联网技术的不断发展,用户体验成为衡量网站质量的重要标准之一。而换肤功能作为一种提升用户体验的方式,越来越受到开发者的重视。本文将...

    js+css网站换肤

    ### JavaScript + CSS 实现网站换肤功能详解 随着互联网技术的发展和用户体验需求的不断提高,网站换肤功能成为了许多网站提高用户粘性和个性化体验的重要手段之一。本文将详细解析如何使用JavaScript和CSS技术来...

    jQuery换肤

    这个项目展示了如何结合jQuery、Cookie和CSS来实现一个用户友好的换肤功能,为用户提供个性化的浏览体验。通过学习这个案例,开发者可以掌握动态更换网页皮肤的基本技巧,并将其应用到自己的项目中。

    CSS换肤标准与实现

    ### CSS换肤标准与实现详解 #### 换肤原理 网页换肤的基本原理在于使用JavaScript(简称JS)来切换不同的CSS样式表。这一过程通常包括以下步骤: 1. **首次访问网页时**:系统会检查是否存在记录用户偏好的Cookie...

    jquery 换肤

    本篇文章将详细探讨如何利用jQuery和cookie来实现换肤功能。 首先,我们需要理解jQuery的基本概念。jQuery通过选择器选取DOM元素,然后对这些元素进行操作,如添加样式、修改内容或触发事件。它还提供了一套高效的...

    jquery cookie实现的简单换肤功能适合小网站

    前段时间试着使用jquery cookie的时候,做了一个简单的换肤功能,只适合小网站并且代码低级。 首先引入jquery和cookie插件 代码如下: [removed][removed] [removed][removed] 准备几个css文件 代码如下: &lt;link ...

    jQuery实现换肤效果

    6. **保存用户偏好**:为了让用户下次访问时仍能保持其选择的皮肤,我们可以使用Cookie或本地存储(localStorage)来保存用户的皮肤选择。 7. **初始化**:页面加载时,根据用户之前保存的皮肤偏好,自动应用相应的...

Global site tag (gtag.js) - Google Analytics