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

最新推荐文章于 2024-10-15 09:00:00 发布
转载 最新推荐文章于 2024-10-15 09:00:00 发布 · 75 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/nigongbin/p/7772542.html

本文介绍了一个简单的网页夜间模式实现方案，通过HTML、CSS和JavaScript构建基本网页结构，并使用JavaScript实现夜间模式的开关功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  2. 父模板的制作
    1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js

 

 

 

 

 

 

base.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夜间模式</title>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
    <script src ="../static/js/base.js"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="myBody">

<h2>ONE PIECE</h2>

<nav>
    <img id="myOnOff" onclick="mySwitch()"
         src="http://cdn5.lizhi.fm/audio_cover/2016/05/11/28444058722652679_320x320.jpg" width="30px">
    <script>
        document.write(Date())
    </script>
<ul class="nav nav-pills">
    <li class="active"><a href="http://localhost:63342/20171102/templates/base.html?_ijt=o1hdmoofeia6snqa8m8effsoo4#">首页</a></li>
    <li><a href="https://baike.so.com/doc/5719867-7585363.html">360百科</a></li>
    <li><a href="http://www.360kan.com/ct/O0DncMDbLYC2DD.html">动漫连载</a></li>
    <li><a href="http://ac.qq.com/Comic/ComicInfo/id/505430">漫画连载</a></li>
    <li><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E6%B5%B7%E8%B4%BC%E7%8E%8B&fr=search">贴吧</a></li>
    <li><a href="http://sou.kuwo.cn/ws/NSearch?type=music&key=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E4%B8%BB%E9%A2%98%E6%9B%B2&from=360">主题曲</a></li>
</ul>

</nav>
<div class="area">
</div>

<div class="haizeiwang">
    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3dubTOS4RkhGehpnYWoPgEPlocwfVTrcr8v2mJccQNYaoKHvITbN5wuow/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">路飞</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3dulAOuY35mvXmJqEJ5Jk2ic5yx7pGickic9cumlwHIgGrTL3zSfYtERibcrg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">艾斯</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3du7ekUJzeXVHePBib30YXPxhiaH1mia7kqRnP5smhgO9aobubkDZofzwZFg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">罗</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3duR30kibUUJpSPnsKubYjcbgk6RZcFZic5zkgVclBCepDPgBYcT21E30IQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">罗宾</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3dutb5otqR7urEeh4wqNNaTTaAnyzVJkpiaIk8E6OZBH57NgEcBEb8VbXg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">萨博</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3du6IB8dGW1r3tic0pTCgQws4f80IFgicgIPOoMjTJ7gMu1SCiad753Sxe6A/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">明哥</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3duyXrEyY0CficRRLQKCiaS8ewwtF0ypC4teOdqg7UeelyTfXHfHHiaGMsIw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">香吉</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3du341eXKngLzJZiarLrD1EkXibbsjHpMRWF81tiaHxNWILn5FNWQB0ctftQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">娜美</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3duHeRqY0VibKDMW0t94Hg3ibVYEPJx9qApR7AJ1o3A735X1a7gzlibpAeicw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">乔巴</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3duxts1cjm4ib05EopzQicc9VVbHlJJWLZKW5YHGhjo3k1ASak8qYAXfUiaA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">索隆</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3dubicn9S7Gjqfiao4FZLdk9ldVZcawrWtnsT7kgASrXfg6UsSp3cPl8M8w/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">红发</a></div>
    </div>

    <div class="img">
        <a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A"><img
                src="http://mmbiz.qpic.cn/mmbiz_jpg/mXjFQ4ibKEbxXRUsYFFKoCZ7oqscZG3duM57EDFynGNFyqjicLqLT8FSOrLEApZlCIc0RpbA5XjzMnDEXj2oXwmA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1"></a>
        <div class="desc"><a href="http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">汉库克</a></div>
    </div>


</body>
</html>

 

 

base.CSS

.img {
    border: 1px solid #cccccc;
    width: 95px;
    margin: 5px;
    float: left;

}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    text-align: center;
    padding: 5px;
}

div.img:hover {
    border: 1px solid #000000;
}

.area {
    height: 300px;
}


.haizeiwang {
    height: 180px;
}

h2{
    color: red;
    font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
}

 

base.JS

function mySwitch() {
    var oBody = document.getElementById("myBody");
    var oOnoff = document.getElementById("myOnOff");
    if (oOnoff.src.match("320x320")){
        oOnoff.src = "http://p4.so.qhimgs1.com/t01cafe478034b2d6fa.jpg"
        oBody.style.background = "black";
        oBody.style.color = "white";
    }else {
        oOnoff.src = "http://cdn5.lizhi.fm/audio_cover/2016/05/11/28444058722652679_320x320.jpg"
        oBody.style.background = "white"
        oBody.style.color = "black"
    }
}

 

运行结果：

白天：

 

夜间：

 

转载于:https://www.cnblogs.com/nigongbin/p/7772542.html

bootstrap-darkmode:使用 Bootstrap 4 实现暗模式的样式表和脚本
07-23
引导暗模式 这个项目提供了一个样式表和两个脚本，允许你在你的网站上实现一个黑暗的主题。 它最初根据用户偏好加载，可以通过开关切换，并通过localStorage保存。 您可以在明暗状态下查看带有所有默认引导程序组件的（感谢 ！）。 如果您使用的是 Angular，请查看 。 用法 使用 NPM/纱线/PNPM 安装： $ npm install bootstrap-darkmode $ yarn add bootstrap-darkmode $ pnpm install bootstrap-darkmode 包括样式表，例如在styles.scss ： @import " ~bootstrap-darkmode/scss/darktheme " ; 通过 unpkg.com 将样式表链接放在<head> 。 不要忘记添加引导程序。 < head > <!--
bootstrap-dark：黑暗模式和Bootstrap 4权威指南-概念验证
02-07
黑暗模式和引导程序的权威¹4 概念证明/长格式白皮书[深色纸] 此工作内容与。 如果您要进行的相同工作，请访问库。 跳到： 关于我和引领这里的历史 首先，我想指出我不是专业的开发人员-从88年代到05年代我是，但是现在我不这样做。 我是一名电气工程师和商人，负责管理数据中心及其员工，并设计UPS，HVAC和电源系统……这是我的日常工作。 但是我仍然喜欢代码。 我的爱好是编码，自2005年以来我编写的所有代码都在某个地方开源。 我也不是“图形”或“艺术”人士-我没有设计，UI或UX方面的知识-但我知道这是基本概念。 我也不是长篇小说作家...我患有阅读障碍，并且相对较低-因此这些杂记可
Bootstrap Dark 项目教程
gitblog_01141的博客
09-26 1116
Bootstrap Dark 项目教程 1、项目介绍 Bootstrap Dark 是一个开源项目，旨在为 Bootstrap 框架提供暗色主题的支持。该项目通过添加自定义的 CSS 文件，使得开发者能够轻松地将现有的 Bootstrap 项目转换为暗色主题，从而提升用户体验。Bootstrap Dark 不仅支持 Bootstrap 4，还兼容 Bootstrap 5，为开发者提供了极大的灵活性...
bootstrap-dark-5:暗模式和Bootstrap辅助指南5-v4暗模式POC的延续
03-27
暗模式和Bootstrap辅助指南5 v4黑暗模式POC的延续，但这次是v5 这是的后续工作，并且与 （ ）有关。 如果您要进行的相同工作，请访问。 这是一个``进行中的工作''，专门基于Bootstrap 5-Beta 3- 尚不建议在生产环境中进行此工作。 我试图将这个项目（“ -dark”变体）合并到Bootstrap核心中（请参阅 ） ，但是在考虑这一点的同时，我将继续研究此附加组件。 如果您希望将其添加到Bootstrap核心中，请通过在添加注释来告知作者。 关于 如果您不先阅读那么这段代码将毫无意义。 你得到了什么？ 该代码编译了原始工作体的四种方法（和变体，共六个） ，但是为Bootstrap 5进行了编译和采购。 这些是： 方法1 （） bootstrap-night ：这只是一个黑暗的bootstrap主题。 但是，它可以与Bootstrap核心CS
主题应用-夜间模式
我爱吃鱼
03-06 1353
Android主题实现应用夜间模式功能其实利用主题实现夜间模式功能已经算是比较成熟的解决方案；但是自己先前一直死磕在用主题，要重建页面；要重建页面就会出现重新绘制View，不能马上呈现夜间模式：其实利用一些基础知识还是可以达到重建犯罪现场（姑且这样说），欺骗一下用户，我们没有重建页面，而是真的只切换了夜间模式。先看效果图： ![日、夜间模式切换](http://img.blog.youkuaiyun.com/2
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...
ue5渲染图片序列具体变量
05-24
此命令用于控制摄影机近裁剪平面的开启与关闭。设置为0表示关闭近裁剪平面，而设置为1则表示开启。 **应用场景：** - 在某些特殊镜头效果（如鱼眼镜头）中，关闭近裁剪平面可以实现更加宽广的视角。 - 通常情况下，...
dark-mode-switch：使用Bootstrap自定义开关添加深色模式主题切换
02-05
:first_quarter_moon: 暗模式开关 添加带有Bootstrap自定义开关的暗模式主题切换。 使用本地存储来保存首选项 压缩和压缩后只有262个字节！ 快速开始 提供几个快速入门选项： 克隆仓库git clone https://github.com/coliff/dark-mode-switch.git 使用 npm install dark-mode-switch 安装yarn add dark-mode-switch 用法 为Dark Mode切换添加自定义开关，然后添加dark-mode-switch.min.js脚本： < div class =" custom-control custom-sw
夜间模式实现方法2
04-25
该文档总结了一种通过切换主题实现夜间模式的方法。 有兴趣的同学可以参考，有不懂的地方欢迎留言，共同进步！ 谢谢！
一键换肤，切换皮肤，护眼模式，白天/夜间模式
12-06
一键换肤，切换皮肤，护眼模式，白天/夜间模式，可扩展性极强，代码简单易懂，集成方便
C51单片机实现汽车智能灯光系统设计
程序应能处理传感器输入信号，根据外部环境变化（如亮度、湿度等）和车辆状态（如速度、转向角度等）做出响应，控制灯光的开启、关闭或亮度调整。 知识点五：视频教学 视频教学是该资源的一大特色，能够直观地展示...
前端必知必会-Bootstrap 5 暗色模式
最新发布
qq_24018193的博客
10-15 998
本文介绍了Bootstrap 5 暗色模式的使用，如有问题欢迎私信和评论。
夜间模式切换的实现库,三行代码实现流畅切换
weixin_34221775的博客
09-13 364
Implementation of night mode for Android. 用最简单的方式实现夜间模式，支持ListView、RecyclerView。 项目GitHub地址: https://github.com/zhangke301... Preview Usage xml android:backgroun...
夜间模式的实现
qq_36145843的博客
03-13 789
常见的实现夜间模式的方法有三种： 一.使用自定义的Theme来实现 二.使用DayNight主题来实现 三.使用映射id的方法来实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值