用JS实现带cookies保存记录的换肤功能
来源:互联网 发布:马来西亚旅游业数据 编辑:程序博客网 时间:2024/06/06 00:13
由于项目需要研究了一下换肤功能,代码简洁易懂,首先需要根据自己的皮肤主题提前把自己所写的样式放在对应名字的css文件里,然后将选择主题的点击事件保存在cookies记录里,读取cookies记录,如果记录不为空则根据记录设置皮肤,不然选择默认皮肤。
1. HTML代码
<link rel="stylesheet" href="CSS/themes/red.css" id="themeFile"/> <style> .content{ height:300px; width: 300px; margin-top: 20px; color: #fff; text-align: center; } .themeBtn{ background: #f5f5f5; padding: 5px; border:1px solid #aaa4a4; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } </style> <div class="selectSkin"><!--注意这时候的id要去css文件名一致--> <input id="red" class="themeBtn" type="button" value="红色"> <input id="yellow" class="themeBtn" type="button" value="黄色"> <input id="green" class="themeBtn" type="button" value="绿色"></div><div class="content">换肤换肤换肤换肤换肤换肤换肤</div>`
2. 三个css文件
(1)red.css
.content{background:red}
(2)yellow.css
.content{background:yellow}
(2)green.css
.content{background:green}
这时候要注意上次引用的css文件,给head里的添加一个id=”themeFile”;
“`
3. JS代码
function saveCookie(name, value) { //存储cookies var Days =1; //此 cookie 将被保存 1 天 var exp = new Date(); //new Date exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString()+";path=/";}function getCookie(name){ //读取cookies函数var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr != null) return unescape(arr[2]); return null;}function changeThemes(){ //换肤 var stylesheet=document.getElementById('themeFile'); $(".selectSkin").find("input").click(function () { var Id = $(this).attr('id'); //找到input的ID stylesheet.href='CSS/themes/'+Id+'.css'; //更换link引用的css文件地址 saveCookie("Id",Id); //将点击事件存放在浏览器的cookie记录里 }); var themeId=getCookie('Id');//读取cookies记录 if(themeId!=null){ //判断cookies记录是否存在 stylesheet.href='CSS/themes/'+themeId+'.css'; //若存在就选择用户点击的主题 }else{ stylesheet.href='CSS/themes/red.css';//不存在就默认为红色}}
最后效果如下
阅读全文
0 0
- 用JS实现带cookies保存记录的换肤功能
- js+cookies实现自动保存草稿功能
- 换肤功能的实现
- 带保存游戏记录功能的猜数字游戏
- jQuery实现换肤功能(使用cookie记录)
- 实现换肤功能
- 换肤功能实现!!!
- 把客户端的信息保存在flash的SharedObject中,实现类似cookies的功能
- 用js实现带★的评价功能
- 用javascript来实现页面的换肤功能
- Extjs 下的换肤功能实现。
- 实现换肤功能的思路
- android 换肤功能的实现
- android应用换肤功能的实现
- 仿造百度换肤功能的实现
- jQuery实现换肤功能(使用cookie.js插件)
- 用C#实现换肤功能 - winform
- js实现换肤
- C# 委托事件简单示例
- VSCode调教以及快捷键记录提高开发效率
- 最大子串和
- python:'return' outside function 错误
- 《第二篇》关于健康
- 用JS实现带cookies保存记录的换肤功能
- notion 建立项目知识
- 事件与事件流技术盘点
- shell脚本——统计不同目录下同名文件个数
- IDEA快捷键总结
- 如何改数据库名称和文件的扩展名
- Java反射机制实现数据库查找和添加!
- trim -----rim() 函数移除字符串两侧的空白字符或其他预定义字符。
- Oracle impdp常见问题