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

转载 于 2017-11-04 21:04:00 发布 · 59 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/xyjie/p/7784576.html

本文介绍了一个简单的夜间模式切换功能的实现方法，通过JavaScript控制页面背景颜色的变化，并利用HTML中的按钮来触发模式切换。
  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  2. 父模板的制作
    1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js 
      <!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("t01d734a105379159dc")) {
                oOnoff.src = "http://p0.so.qhimgs1.com/bdr/200_200_/t01d734a105379159dc.gif";
                oBody.style.background = "black";
                oBody.style.color = "yellow"
            } else {
                oOnoff.src = "http://p0.so.qhimgs1.com/bdr/200_200_/t01d734a105379159dc.gif";
                oBody.style.background = "white";
                oBody.style.color = "black"
            }
        }


    </script>
</head>
<body id="mybody">
<img id="myonoff" onclick="mySwitch()" src="http://p0.so.qhimgs1.com/bdr/200_200_/t01d734a105379159dc.gif">
      <script>
    document.write(Date())
</script>
</body>
</html>

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>倒置导航栏</title>
    <link rel="stylesheet" type="text/css" href="xyjie.css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body id="mybody">

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">首页</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="#" onclick="">登陆</a></li>
                <li><a href="#" onclick="">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        设置 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">收藏</a></li>
                        <li><a href="#">分享</a></li>
                        <li><a href="#">搜索</a></li>
                        <li class="divider"></li>
                        <li><a href="#">点赞</a></li>
                    </ul>
                </li>
                <li><a href="#">||</a></li>
            </ul>
        </div>
        <div style="float: left">
            <img id="myonoff" onclick="mySwitch()" src="http://p0.so.qhimgs1.com/bdr/200_200_/t01d734a105379159dc.gif" style width="40px"  >
        </div>
        <div>
            <input type="text" name="user" id="user" placeholder="请输入内容">
            <input type="button" value="搜索" class="btn btn-success" onclick="">
        </div>
    </div>
</nav>

<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <ul class="nav navbar-nav">
        <li><img src="http://www.gzcc.cn/2016/images/footer1-logo.png"></li>
        <li style="color: bisque;">版权所有@xyjie</li>
    </ul>
</nav>

<div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2330928080,25031233&amp;fm=27&amp;gp=0.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">花花华晨宇1</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3605928156,2200570185&amp;fm=27&amp;gp=0.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">花花华晨宇2</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2787456122,2827006597&amp;fm=27&amp;gp=0.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">花花华晨宇3</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2478028302,36965079&amp;fm=27&amp;gp=0.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">花花华晨宇4</a></div>
    </div>
</div>
</body>
</html>

      CSS

      img {
    width: 100px;
}

div.sa {
    border-style: solid;
    border-width: 5px;
    border-color: #18c0ff;
    width: 250px;
    float: left;
    margin: 5px;
}

div.sa img {
    width: 100%;
    heigh: aute;
}

div.st {
    text-align: center;
    padding: 2px;
}

div.sa:hover {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}

      JS

      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 = "yellow"
    } else {
        oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif";
        oBody.style.background = "white";
        oBody.style.color = "black"
    }
}

转载于:https://www.cnblogs.com/xyjie/p/7784576.html

ue5渲染图片序列具体变量
05-24
此命令用于控制摄影机近裁剪平面的开启与关闭。设置为0表示关闭近裁剪平面，而设置为1则表示开启。 **应用场景：** - 在某些特殊镜头效果（如鱼眼镜头）中，关闭近裁剪平面可以实现更加宽广的视角。 - 通常情况下，...
SQLyog数据库激活码
技术杠精的博客
05-25 4862
SQLyog数据库激活码大全
Single：美观大气的Typecho夜间模式博客模板
1. **主题切换**：提供一个切换按钮，用户可以一键开启或关闭夜间模式。 2. **样式调整**：在CSS中定义两套主题样式，一套为常规模式，另一套为夜间模式。后者通常使用较暗的背景色和较亮的文字颜色。 3. **自动切换...
【嵌入式系统UI设计】：LVGL图形库新手指南与SD卡文件查看器制作
[【嵌入式系统UI设计】：LVGL图形库新手指南与SD卡文件查看器制作](https://opengraph.githubassets.com/9ff49069ac04ee42fe79d34346018de3126f60e3cc6076911f0bb07b92e03e4c/MarcoCiau/lvgl_tutorial) # 1. 嵌入式...
【夜间工作神器：SecureCRT配色策略】：打造适宜的代码界面
[【夜间工作神器：SecureCRT配色策略】：打造适宜的代码界面](https://opengraph.githubassets.com/1916bab2ba49e8c63189605a7fa9e452338a858569548c999cf0d24d2d76159b/feralpacket/securecrt-keyword-highlighting...
C51单片机实现汽车智能灯光系统设计
程序应能处理传感器输入信号，根据外部环境变化（如亮度、湿度等）和车辆状态（如速度、转向角度等）做出响应，控制灯光的开启、关闭或亮度调整。 知识点五：视频教学 视频教学是该资源的一大特色，能够直观地展示...
优化算法基于四则运算的算术优化算法原理与Python实现：面向图像分割的全局寻优方法研究
09-06
内容概要：本文系统介绍了算术优化算法（AOA）的基本原理、核心思想及Python实现方法，并通过图像分割的实际案例展示了其应用价值。AOA是一种基于种群的元启发式算法，其核心思想来源于四则运算，利用乘除运算进行全局勘探，加减运算进行局部开发，通过数学优化器加速函数（MOA）和数学优化概率（MOP）动态控制搜索过程，在全局探索与局部开发之间实现平衡。文章详细解析了算法的初始化、勘探与开发阶段的更新策略，并提供了完整的Python代码实现，结合Rastrigin函数进行测试验证。进一步地，以Flask框架搭建前后端分离系统，将AOA应用于图像分割任务，展示了其在实际工程中的可行性与高效性。最后，通过收敛速度、寻优精度等指标评估算法性能，并提出自适应参数调整、模型优化和并行计算等改进策略。; 适合人群：具备一定Python编程基础和优化算法基础知识的高校学生、科研人员及工程技术人员，尤其适合从事人工智能、图像处理、智能优化等领域的从业者；; 使用场景及目标：①理解元启发式算法的设计思想与实现机制；②掌握AOA在函数优化、图像分割等实际问题中的建模与求解方法；③学习如何将优化算法集成到Web系统中实现工程化应用；④为算法性能评估与改进提供实践参考； 阅读建议：建议读者结合代码逐行调试，深入理解算法流程中MOA与MOP的作用机制，尝试在不同测试函数上运行算法以观察性能差异，并可进一步扩展图像分割模块，引入更复杂的预处理或后处理技术以提升分割效果。
【微信小程序源码】图文信息；欢迎页面，音乐控制.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
bedrock-testing-support-7.0.4.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
【微信小程序源码】物业管理.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
grpc-services-1.68.1.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
aws-java-sdk-mediapackagev2-1.12.780.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
2022 年北航操作系统课程设计相关代码
最新发布
09-06
打开下面链接，直接免费下载资源： https://renmaiwang.cn/s/abcfj 北京航空航天大学操作系统相关课程的设计代码（发布于 2022 年）
httpclient5-5.3.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
opentelemetry-logback-appender-1.0-2.9.0-alpha.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
夜间模式技术Demo展示与探讨
在夜间模式开启和关闭时使用平滑的过渡动画，可以让用户体验更为自然，避免突兀的色彩变化给用户带来不适。 9. 兼容性和测试 夜间模式的Demo需要在多种设备和操作系统版本上进行测试，确保其兼容性，同时收集用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值