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

  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  2. 父模板的制作
    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>

  

转载于:https://www.cnblogs.com/l-y-j/p/7774278.html

你可能感兴趣的:(夜间模式的开启与关闭,父模板的制作)