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

最新推荐文章于 2024-08-28 09:08:04 发布

weixin_30912051

最新推荐文章于 2024-08-28 09:08:04 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/l-j-l/p/7774286.html

本文介绍了一个简单的夜间模式开关实现方案，通过JavaScript控制页面背景及文字颜色的变化，实现白天与夜间模式的切换。提供了完整的HTML、JavaScript及CSS代码示例。

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>夜间模式</title>
 6     <script>
 7         function mySwitch(){
 8              var oBody = document.getElementById("myBody");
 9              var oOnoff = document.getElementById("myOnOff")
10             if(oOnoff.src.match("bulbon")){
11                  oOnoff.src="http://www.runoob.com/images/pic_bulboff.gif";
12                  oBody.style.background="black";
13                  oBody.style.color="white";
14             }else{
15                  oOnoff.src="http://www.runoob.com/images/pic_bulbon.gif";
16                  oBody.style.background="white";
17                  oBody.style.color="black";
18             }
19         }
20     </script>
21 </head>
22 <body id="myBody">
23 <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
24 <script>
25     document.write(Date())
26 </script>
27 
28 </body>
29 </html>

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>首页</title>
 5     <script src="../static/js/base.js"></script>
 6     <link type="text/css" rel="stylesheet" href="../static/css/styles.css">
 7 </head>
 8 <body>
 9 <nav>
10     <img id="myOnOff" onclick="mySwitch()"
11          src="https://tva4.sinaimg.cn/crop.0.0.1242.1242.180/bde8475djw8f1hu7mrcy2j20yi0yiabl.jpg" width="30px">
12     <a href="http://localhost:63342/guanli/templates/base.html?_ijt=q62n14skoqnec43tobo0psd0i3">首页</a>
13     <a href="http://localhost:63342/guanli/templates/zhuce.html?_ijt=cipfjfad2e7o54e0s796j1pe0c">注册</a>
14     <a href="http://localhost:63342/guanli/templates/denglu.html?_ijt=9gs2lnbhs2sh1no40cv5e982b9">登录</a>
15 </nav>
16 <div class="area">
17  
18 </div>
19 <div class="img">
20 <div>
21     <a href="base.html"><img src="http://www.zcool.com.cn/community/037471d55de8fc900000171405bc2ee.jpg" height="160px" width="240px"></a>
22 </div>
23  
24 </div>
25 </body>
26 </html>