夜间模式的开启与关闭，父模板的制作

转载 于 2017-11-03 14:54:00 发布 · 106 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/Qzlhxxx/p/7778159.html

夜间模式的开启与关闭

  1. 放置点击的按钮或图片。
  2. 定义开关切换函数。
  3. onclick函数调用。 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1103</title>
    <script>
        function mySwitch()
        {
            var mysty=document.getElementById("on_off");
           if(mysty.src.match("../static/image/day.PNG")){
                mysty.src="../static/image/night.PNG";
                document.getElementById("myBody").style.background="black";
                document.getElementById("myBody").style.color="white"
            }
             else{
                mysty.src="../static/image/day.PNG";
                document.getElementById("myBody").style.background="white";
                document.getElementById("myBody").style.color="black"
            }
        }
    </script>
</head>
<body id="myBody">
<img id="on_off" onclick="mySwitch()" src="../static/image/day.PNG" width="50px">
<script>
    document.write(Date());
</script>
</body>
</html>

父模版的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夜晚模式</title>
    <script>
        function mySwitch() {
            var oBody = document.getElementById("myBody");
            var oOnOff = document.getElementById("myOnOff");
            if (oOnOff.src.match("bulbon")){
                oOnOff.src="http://www.runoob.com/images/pic_bulboff.gif";
                oBody.style.background="black";
                oBody.style.color="white";
            }else {
                oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="blue";
            }
        }
    </script>

</head>
<body id="myBody">

<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
<script>
    document.write(Date())
</script>

</body>
</html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="../static/js/base.js"></script>
    <link type="text/css" rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<nav>
    <img id="myOnOff" onclick="mySwitch()"
         src="https://tva4.sinaimg.cn/crop.0.0.1242.1242.180/bde8475djw8f1hu7mrcy2j20yi0yiabl.jpg" width="30px">
    <a href="http://localhost:63342/guanli/templates/base.html?_ijt=q62n14skoqnec43tobo0psd0i3">首页</a>
    <a href="http://localhost:63342/guanli/templates/zhuce.html?_ijt=cipfjfad2e7o54e0s796j1pe0c">注册</a>
    <a href="http://localhost:63342/guanli/templates/denglu.html?_ijt=9gs2lnbhs2sh1no40cv5e982b9">登录</a>
</nav>
<div class="area">

</div>
<div class="img">
<div>
    <a href="base.html"><img src="http://www.zcool.com.cn/community/037471d55de8fc900000171405bc2ee.jpg" height="160px" width="240px"></a>
</div>

</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/Qzlhxxx/p/7778159.html

awsau6326
关注
Single：美观大气的Typecho夜间模式博客模板
1. **主题切换**：提供一个切换按钮，用户可以一键开启或关闭夜间模式。 2. **样式调整**：在CSS中定义两套主题样式，一套为常规模式，另一套为夜间模式。后者通常使用较暗的背景色和较亮的文字颜色。 3. **自动切换...
【嵌入式系统UI设计】：LVGL图形库新手指南与SD卡文件查看器制作
[【嵌入式系统UI设计】：LVGL图形库新手指南与SD卡文件查看器制作](https://opengraph.githubassets.com/9ff49069ac04ee42fe79d34346018de3126f60e3cc6076911f0bb07b92e03e4c/MarcoCiau/lvgl_tutorial) # 1. 嵌入式...
单片机智能照明控制器设计与实现
在嵌入式系统开发中，“设计模式”指的是针对特定问题提出的经典解决方案模板，如状态机模式、观察者模式、轮询模式、中断驱动模式等。例如，在本系统中可采用有限状态机（FSM）模型来管理照明灯的工作模式：包括...
CI_CD能否用于嵌入式？Jenkins+Docker自动编译刷机流水线搭建全记录（含配置模板）
![CI_CD能否用于嵌入式？Jenkins+Docker自动编译刷机流水线搭建全记录（含配置模板）](https://cloudogu.com/images/blog/2018/04/CD_2_Bild1.png) # 1. CI/CD在嵌入式开发中的挑战与...该模式不仅提升版本一致性，还为
【夜间工作神器：SecureCRT配色策略】：打造适宜的代码界面
[【夜间工作神器：SecureCRT配色策略】：打造适宜的代码界面](https://opengraph.githubassets.com/1916bab2ba49e8c63189605a7fa9e452338a858569548c999cf0d24d2d76159b/feralpacket/securecrt-keyword-highlighting...
（62页PPT）微专题14　测电阻的几种特殊方法.pptx
01-06
（62页PPT）微专题14　测电阻的几种特殊方法.pptx
GeneratedClass1146.java
01-06
GeneratedClass1146.java
数字乡村解决方案（第一部分）.pdf
01-06
源码地址： https://pan.quark.cn/s/27933535a1f6 数字乡村解决方案（第一部分共130页）的电子文档格式
完美复现面向配电网韧性提升的移动储能预布局与动态调度策略【IEEE33节点】（Matlab代码实现）
01-06
【完美复现】面向配电网韧性提升的移动储能预布局与动态调度策略【IEEE33节点】（Matlab代码实现）内容概要：本文介绍了基于IEEE33节点的配电网韧性提升方法，重点研究了移动储能系统的预布局与动态调度策略。通过Matlab代码实现，提出了一种结合预配置和动态调度的两阶段优化模型，旨在应对电网故障或极端事件时快速恢复供电能力。文中采用了多种智能优化算法（如PSO、MPSO、TACPSO、SOA、GA等）进行对比分析，验证所提策略的有效性和优越性。研究不仅关注移动储能单元的初始部署位置，还深入探讨其在故障发生后的动态路径规划与电力支援过程，从而全面提升配电网的韧性水平。; 适合人群：具备电力系统基础知识和Matlab编程能力的研究生、科研人员及从事智能电网、能源系统优化等相关领域的工程技术人员。; 使用场景及目标：①用于科研复现，特别是IEEE顶刊或SCI一区论文中关于配电网韧性、应急电源调度的研究；②支撑电力系统在灾害或故障条件下的恢复力优化设计，提升实际电网应对突发事件的能力；③为移动储能系统在智能配电网中的应用提供理论依据和技术支持。; 阅读建议：建议读者结合提供的Matlab代码逐模块分析，重点关注目标函数建模、约束条件设置以及智能算法的实现细节。同时推荐参考文中提及的MPS预配置与动态调度上下两部分，系统掌握完整的技术路线，并可通过替换不同算法或测试系统进一步拓展研究。
SQL基础培训资料：-临时表和表变量选择.docx
01-06
SQL基础培训资料：-临时表和表变量选择.docx
C# DateTimePicker开发
01-06
先看效果： https://pan.quark.cn/s/3756295eddc9 在C#软件开发过程中，DateTimePicker组件被视为一种常见且关键的构成部分，它为用户提供了图形化的途径来选取日期与时间。 此类控件多应用于需要用户输入日期或时间数据的场景，例如日程管理、订单管理或时间记录等情境。 针对这一主题，我们将细致研究DateTimePicker的操作方法、具备的功能以及相关的C#编程理念。 DateTimePicker控件是由.NET Framework所支持的一种界面组件，适用于在Windows Forms应用程序中部署。 在构建阶段，程序员能够通过调整属性来设定其视觉形态及运作模式，诸如设定日期的显示格式、是否展现时间选项、预设的初始值等。 在执行阶段，用户能够通过点击日历图标的下拉列表来选定日期，或是在文本区域直接键入日期信息，随后按下Tab键或回车键以确认所选定的内容。 在C#语言中，DateTime结构是处理日期与时间数据的核心，而DateTimePicker控件的值则表现为DateTime类型的实例。 用户能够借助`Value`属性来读取或设定用户所选择的日期与时间。 例如，以下代码片段展示了如何为DateTimePicker设定初始的日期值：```csharpDateTimePicker dateTimePicker = new DateTimePicker();dateTimePicker.Value = DateTime.Now;```再者，DateTimePicker控件还内置了事件响应机制，比如`ValueChanged`事件，当用户修改日期或时间时会自动激活。 开发者可以注册该事件以执行特定的功能，例如进行输入验证或更新关联的数据：``...
1_自行车测速51单片机.zip
01-06
1_自行车测速51单片机.zip
Jam-Pie硬件原理图+PCB文件（含原理图PDF和BOOM表）
01-06
Jam-Pie硬件原理图+PCB文件（含原理图PDF和BOOM表）： 本项目使用分立的控制板与驱动板，方便更换其中一个，而不修改另一个（如可以将驱动芯片修改为DRV8301或者其他，而控制板不做修改，只根据对应的接口分配引脚即可）。 该项目中控制板使用STM32F405RGT6，驱动板使用两个DRV8313驱动电机，可以实现开环控制、速度环+电流环双闭环、位置环+速度环+电流环三闭环（注：该文件不含源代码）。 此外，该资源中附赠原理图PDF和BOOM表，可以用PCB直接打板，根据BOOM表购买元器件（注：驱动板后期在PCB上直接添加了AMS1117-5VLDO芯片，原理图中没有，使用时请注意
GeneratedClass298.java
01-06
GeneratedClass298.java
（对比示例）(PSOvsMPSOvsTACPSOvsSOAvsGA)5种智能算法优化路径规划解决二维栅格地图对比Matlab代码
01-06
（对比示例）(PSOvsMPSOvsTACPSOvsSOAvsGA)5种智能算法优化路径规划解决二维栅格地图对比Matlab代码内容概要：本文档主要介绍了一个涵盖多个科研领域的MATLAB仿真辅导资源集合，重点展示了五种智能优化算法（PSO、MPSO、TACPSO、SOA、GA）在二维栅格地图路径规划中的对比研究与Matlab代码实现。文档不仅提供了具体算法的实现案例，还系统梳理了智能优化算法、机器学习、路径规划、无人机应用、电力系统等多个方向的技术应用场景，并附有网盘链接供获取完整资源。通过对比不同算法的性能，帮助科研人员深入理解路径规划问题的求解机制与优化策略。; 适合人群：具备一定MATLAB编程基础，从事智能优化、路径规划、自动化或相关领域研究的研究生、科研人员及工程技术人员；适合希望复现高水平论文（如SCI一区、EI期刊）结果的用户。; 使用场景及目标：①用于学习和比较PSO、MPSO、TACPSO、SOA、GA等智能算法在路径规划中的性能差异；②支撑科研项目中关于栅格地图路径优化的算法选型与代码实现；③辅助高水平学术论文的复现与创新研究；④为智能机器人、无人机、自动驾驶等领域的路径决策提
（61页PPT）工业互联网标识解析建设与应用项目1工业互联网网络体系认知.pptx
01-06
（61页PPT）工业互联网标识解析建设与应用项目1工业互联网网络体系认知.pptx
湖南省娄底市DEM数据30m(shp文件)压缩包
最新发布
01-06
下载前必看：https://pan.quark.cn/s/246cd895653f 标题所提及的“湖南省娄底市DEM数字高程数据30m（含本市级范围shp文件）.zip”文件，属于地理信息系统（GIS）领域的压缩存储单元，其中收纳的是针对湖南省娄底市区域的数字高程模型（Digital Elevation Model, DEM）相关数据。 此数据集采用30米的空间分辨率，具体表现为在每30米乘以30米的网格单元内设定一个数据点来表征该区域的绝对高度，其作为地形特征研究、地表状况解析、城市布局规划、生态状况评价等工作的基础支撑。 “DEM数字高程”这一术语，指的是运用遥感科学与地理信息系统技术，将地球表面实际的地形地貌形态转化为数字化表示，用以体现地表的立体起伏形态。 30米的精确度级别表明此类数据具备较高的精细度，能够精确呈现地形的高度变化特征，尽管对于诸如微小山丘或陡峭悬崖等细微地形要素可能无法进行详细捕捉。 “shp文件”是一种被广泛采纳的GIS数据载体格式，由Esri公司研发，主要功能在于存储地理空间信息，涵盖点、线、面等多种几何形态。 在此具体情境下，shp文件用以界定娄底市的地理轮廓，从而明确数据所覆盖的地理范围。 标签中的“30米地形数据”着重突出了数据的分辨率属性，“娄底市”与“地理信息数据”则清晰界定了数据的应用范畴与领域。 压缩文件内部的文件名称清单揭示了数据的不同构成要素：1. **娄底市范围.dbf**: 此类文件为关联性的数据库文档，负责存储与.shp文件相配套的属性信息，例如地理位置的元数据详情。 2. **娄底市dem.tif.ovr**: 作为TIFF图像的辅助文件，其用途在于储存额外的元数据或重叠数据，有助于优化图像的视觉呈现效能。 3. **娄底...
高效的多分辨率融合技术对具有标签不确定性的遥感数据进行处理（Matlab代码实现）
01-06
高效的多分辨率融合技术对具有标签不确定性的遥感数据进行处理（Matlab代码实现）
夜间模式技术Demo展示与探讨
在夜间模式开启和关闭时使用平滑的过渡动画，可以让用户体验更为自然，避免突兀的色彩变化给用户带来不适。 9. 兼容性和测试 夜间模式的Demo需要在多种设备和操作系统版本上进行测试，确保其兼容性，同时收集用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值