超简单的js、jq皮肤切换，一看就会，不会打我

来源：互联网发布：excel筛选数据编辑：程序博客网时间：2024/09/21 08:50

之前考虑用cookie做。后一想用户如果给cookie禁止咯怎么办呢？

想了想还是用h5的localStorage做吧！！

先上效果图：

html代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jq</title>    <link id="bg" rel="stylesheet" type="text/css" href="skin_css/skin_red.css"/><!--默认红色-->    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>    <script src="index.js"></script></head><body><input type="button" name="" id="red" value="红色" /><input type="button" name="" id="blue" value="蓝色" /><input type="button" name="" id="green" value="绿色" /></body></html>

js代码：

$(function(){    var oBg = $("#bg");                //css链接的id    var skin = 'skin';                //localStorage的key    svalue = localStorage.getItem(skin);    //如果有localStorage中有数据就用localStorage中的数据    if(svalue){        oBg.attr('href',"skin_css/skin_"+svalue+".css");    }    $("#red").click(function(){        skin_value = $(this).attr("id"); //red        localStorage.setItem(skin,skin_value);       //存到数据库        oBg.attr('href',"skin_css/skin_"+skin_value+".css");    });    $("#blue").click(function(){        skin_value = $(this).attr("id"); //blue        localStorage.setItem(skin,skin_value);       //存到数据库        oBg.attr('href',"skin_css/skin_"+skin_value+".css");    });    $("#green").click(function(){        skin_value = $(this).attr("id"); //green        localStorage.setItem(skin,skin_value);       //存到数据库        oBg.attr('href',"skin_css/skin_"+skin_value+".css");    });});

css代码：自己复制3份，放在3个不同的文件中

*{    padding:0;    margin: 0;}body{    background-color: green;}

点此下载源码

阅读全文

0 0