javascript+css网页每次加载不同样式的实现方法
2023-06-13 09:14:15 时间
【明确需求】
网页加载样式表default.css,会展现默认风格。同时为实现多种风格,制作了skin1.css,skin2.css,skin3.css三种定制样式。如果在加载default.css后,再加载其中某一样式表,则会覆盖默认风格,展示新风格;
每次随机加载skin1.css、skin2.css、skin3.css,或者使用默认风格。需要注意的一点是,随机加载也有可能使这一次和上一次的样式相同。
【实现思路】
使用document.write动态向<head/>中写入css载入语句;
通过生成的随机数,随机加载样式表;
使用cookie机制记录当前风格,确保下次下次风格与当前风格一定不同。
【实现代码】
比较简单,我这里就直接贴代码了,里面略加注释:
复制代码代码如下:
网页加载样式表default.css,会展现默认风格。同时为实现多种风格,制作了skin1.css,skin2.css,skin3.css三种定制样式。如果在加载default.css后,再加载其中某一样式表,则会覆盖默认风格,展示新风格;
每次随机加载skin1.css、skin2.css、skin3.css,或者使用默认风格。需要注意的一点是,随机加载也有可能使这一次和上一次的样式相同。
【实现思路】
使用document.write动态向<head/>中写入css载入语句;
通过生成的随机数,随机加载样式表;
使用cookie机制记录当前风格,确保下次下次风格与当前风格一定不同。
【实现代码】
比较简单,我这里就直接贴代码了,里面略加注释:
varInit={
//样式表文件目录路径
baseSkinUrl:"/blog/css/skin/",
//样式表文件名称列表
styles:["default","skin1","skin2","skin3"],
//样式cookie的key值
cookieKey:"css9_blog_random_css",
//定义方法,获取min至max间的随机数,包含min及max
getRandomNum:function(min,max){
returnmin+Math.floor(Math.random()*(max-min+1));
},
//定义方法,获取cookie值
getCookie:function(name){
vararr=document.cookie.match(newRegExp("(^|)"+name+"=([^;]*)(;|$)"));
if(arr!=null){
returnunescape(arr[2]);
}
returnnull;
},
//定义方法,设置cookie值
setCookie:function(sName,sValue,objHours,sPath,sDomain,bSecure){
varsCookie=sName+"="+encodeURIComponent(sValue);
if(objHours){
vardate=newDate();
varms=objHours*3600*1000;
date.setTime(date.getTime()+ms);
sCookie+=";expires="+date.toGMTString();
}
if(sPath){
sCookie+=";path="+sPath;
}
if(sDomain){
sCookie+=";domain="+sDomain;
}
if(bSecure){
sCookie+=";secure";
}
document.cookie=sCookie;
},
//定义方法,通过获取随机数随机加载CSS
loadCSS:function(){
varlength=this.styles.length,
random=this.getRandomNum(0,length-1),
cookieStyle=this.getCookie(this.cookieKey),
currentStyle="default";
//如果当前随机取到的样式与cookie中样式相同,则重新计算随机数
while(this.styles[random]==cookieStyle)
{
random=this.getRandomNum(0,length-1)
}
currentStyle=this.styles[random];
//将新样式存入cookie,cookie有效时间为24小时
this.setCookie(this.cookieKey,currentStyle,24,"/","css9.net",false);
//若样式名称不为"default"默认样式,则向<head/>标签中写入定制样式
if(currentStyle!="default")
{
document.write("<linkrel="stylesheet"type="text/css"
href=""+this.baseSkinUrl+this.styles[random]+".css"/>");
}
}
}
Init.loadCSS();//执行随机加载CSS方法
将上面js代码保存为Init.js文件,并在<head/>中加载该js文件。
使用提示:如果你的网页中已经使用了jquery,那么可以用我之前介绍的jQuerycookie操作插件实现cookie的读写操作,不必再定义代码中的setCookie和getCookie方法。
相关文章
- javascript 基础_JavaScript高级编程
- 《The Joy of Javascript》- 5 - Data
- JavaScript 到底是不是面向对象语言?面向对象语言有哪三个基本特征?
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
- 常见的js算法_javascript数据结构与算法
- javascript 匿名函数_定义匿名函数的关键字是
- Javascript获取时间戳的方法。
- 万能的 JavaScript,向网页中插入五线谱(abc.js)
- javascript禁止移动端网页滚动
- Node.js新手必须知道的4个JavaScript概念详解架构师
- JavaScript学习总结(十六)——Javascript闭包(Closure)详解编程语言
- javascript腾讯地图放到网页中的方法详解编程语言
- 网页javascript精华代码集
- Javascript打印网页部分内容的脚本
- javascript网页跳转的方法
- javascript补零函数集合
- JavaScript中为元素加上name属性的方法
- javascript获取网页中指定节点的父节点、子节点的方法小结
- 分享JavaScript获取网页关闭与取消关闭的事件
- 使用javascript为网页增加夜间模式
- javascript动态向网页中添加表格实现代码
- 一些老手都不一定知道的JavaScript技巧
- javascript在网页中实现读取剪贴板粘贴截图功能
- JavaScript获取网页、浏览器、屏幕高度和宽度汇总
- javascript操作符(~、&、|、^、<<、>>)使用案例