JavaScript每天定时更换皮肤样式的方法

本文实例讲述了JavaScript每天定时更换皮肤样式的方法。分享给大家供大家参考。具体分析如下：

这段js代码通过每天在不同时段自动更换网页调用的样式表，实现更换皮肤的功能。

<script type="text/JavaScript">
<!--
function getStylesheet() {
   var currentTime = new Date().getHours();
   if (0 <= currentTime&&currentTime < 5) {
    document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
   }
   if (5 <= currentTime&&currentTime < 11) {
    document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
   }
   if (11 <= currentTime&&currentTime < 16) {
    document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
   }
   if (16 <= currentTime&&currentTime < 22) {
    document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
   }
   if (22 <= currentTime&&currentTime <= 24) {
    document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
   }
}
getStylesheet();
-->
</script>
<noscript>
<link href="main.css" rel="stylesheet" type="text/css">
</noscript>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript清理table样式

    项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table,而table表格中的tr/td都携带了从word中粘贴过来的样式,需要将这一大段的字符串中的table.tr.td中携带的样式清除掉,同时还不能破坏table结构,即要保留tr中的rowspan和td中的colspan属性. html部分代码如下: <p class="MsoNormal" align="left" style="text-align:le

  • javascript动态设置样式style实例分析

    本文实例讲述了javascript动态设置样式style的方法.分享给大家供大家参考.具体分析如下: 动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript中 操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为 javascript中-是不能做属性,类名的.所以在CSS中背景色是background-clolor,而javasc

  • JavaScript 动态加载脚本和样式的方法

    一 动态脚本 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 var flag = true; if(flag){ loadScript('browserdetect.js'); // 调用函数,引入路径; } function loadScript(url){ var script = document.createElement('script'); // 创建script

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • JavaScript DOM操作表格及样式

    一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

  • javascript实现根据iphone屏幕方向调用不同样式表的方法

    本文实例讲述了javascript实现根据iphone屏幕方向调用不同样式表的方法.分享给大家供大家参考.具体如下: 当iphone屏幕旋转式,这段JS代码可以动态调用不同的样式来适应屏幕变换 <script type="text/javascript"> function orient() { switch(window.orientation){ case 0: document.getElementById("orient_css").href =

  • 原生javascript获取元素样式

    摘要:     我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style     在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获

  • JavaScript改变CSS样式的方法汇总

    JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样式): 改变节点class或id: 写入新的css: 替换页面中的样式表. 个人不建议使用后两种方法,几乎所有的功能都可以通过前两种方式实现,并且代码更加清晰.易理解. 后面还会说说如何获取元素的真实样式和一个表单中的注意事项. 1.修改节点style(内联样式) 这种方法权重是最高的,直接写在节点

  • javascript判断iphone/android手机横竖屏模式的函数

    查了不少资料,最后结论如下: 复制代码 代码如下: function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break; case -90: // Landscape: turned 90 degrees counter-clockwise case 90

  • JavaScript每天定时更换皮肤样式的方法

    本文实例讲述了JavaScript每天定时更换皮肤样式的方法.分享给大家供大家参考.具体分析如下: 这段js代码通过每天在不同时段自动更换网页调用的样式表,实现更换皮肤的功能. <script type="text/JavaScript"> <!-- function getStylesheet() { var currentTime = new Date().getHours(); if (0 <= currentTime&&currentTi

  • 在Winform框架界面中改变并存储界面皮肤样式的方法

    在本篇介绍的Winform界面样式改变及存储操作中,是指基于DevExpress进行界面样式的变化.一般情况下,默认我们会为客户提供多种DevExpress的界面皮肤以供个人喜好选择,默认DevExpress提供40余种皮肤样式,用户可以根据自己的喜好,选择较为美观.得体的皮肤,为了方便,我们对用户的皮肤选择进行记录,并可以动态改变. 1.界面皮肤的选择 Winform开发框架(包括混合式Winform开发框架)皮肤如下界面所示. 在皮肤集合中打开,可以看到很多界面皮肤可供选择 上面初始化的皮肤

  • JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

  • JavaScript操作HTML元素和样式的方法详解

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素.  实例 <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> <

  • Android 应用更换皮肤实现方法

    Android应用更换皮肤功能的实现思路   我们可以将皮肤包做成一个apk文件,在应用apk中读取皮肤包中的数据.   应用apk读取皮肤包apk的数据的条件 1. 有相同签名 2. AndroidManifest.xml中配置android:sharedUserId有相同的属性值 满足以上条件,两个apk就能互相访问数据了.      Android应用更换皮肤功能的实现步骤 1.应用程序和皮肤程序的AndroidManifest.xml中配置 XML/HTML代码 android:shar

  • JQuery给网页更换皮肤的方法

    本文实例讲述了JQuery给网页更换皮肤的方法.分享给大家供大家参考.具体分析如下: 为了更好的提升用户体验,很多网页都有换肤的功能,那么这是怎么实现的那,其实,换肤只不过是在对应的位置改了Css样式罢了!! 下面就演示如何简单的换肤 在设计HTmL代码时,注意一些小技巧,可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同,这样皮肤切换的操作就简单多了样式连接要带一个有Id样式的连接表,通过操作该链接的href属性的值,从而实现换肤.即: 用户点击完就可以换肤了,但是,当用户刷新或者关闭浏览器

  • jQuery实现每隔一段时间自动更换样式的方法分析

    jQuery实现每隔一段时间自动更换样式的方法分析

    本文实例讲述了jQuery实现每隔一段时间自动更换样式的方法.分享给大家供大家参考,具体如下: js核心代码部分: $(document).ready(function(){ // 皮肤列表选项切换 $(".ulSkin li").click(function(){ $(this).addClass("active").siblings("li").removeClass("active"); }); }); // 皮肤背景切

  • 原生javascript实现读写CSS样式的方法详解

    前言 可能大家一说起操作css样式,很多人都会想到jQuery的css方法:$(selector).css(name) ,但是有思考过如何使用原生js来实现类似的功能么? 大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了,但是这个方法只能获取和修改html文档中的内联样式,无法操作非内联样式(内部样式和外部样式表). 我通过搜索和整理,总结了使用原生js对css样式的读写实现.下面话不多说,来看看详细的介绍吧. 获取样式 1. dom style 这个方法只能获取内联样式: v

  • JavaScript实现定时隐藏与显示图片的方法

    JavaScript实现定时隐藏与显示图片的方法

    本文实例讲述了JavaScript实现定时隐藏与显示图片的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现定时隐藏与显示图片,设定图片在几秒后会自动显示,也会自动隐藏,秒数这个自己去定义吧,在JavaScript代码片段内. 运行效果如下图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo

随机推荐