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

转载于 2017-11-04 20:32:00 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/laifai666/p/7784485.html

本文介绍了一个简单的夜间模式切换功能的实现方法，通过HTML、CSS和JavaScript完成页面样式的动态变化。用户可以通过点击开关图片来改变整个页面的背景颜色和文字颜色。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>On&Off</title>
    <script>
        function mySwitch(){
            var oBody = document.getElementById("myBody");
            var oOnOff = document.getElementById("myOnOff");
            if(oOnOff.src.match("on")){
                oOnOff.src="../static/img/off.jpg";
                oBody.style.background="black ";
                oBody.style.color="white";
            }else {
                oOnOff.src="../static/img/on.jpg";
                oBody.style.background="white";
                oBody.style.color="gray";
            }
        }
    </script>
</head>
<body id="myBody">

       <nav>
           <a class="logo" href="/">
              <img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1185915212.png" alt="Logo"></a>

           <a href="">我爱淘宝</a>
           <a href="">春夏款</a>
           <a href="">秋冬款</a>
           <a href="">男款</a>
           <a href="">女款</a>
           <a href="">童装</a>

           <input type="text"name="search">
           <button type="submit">搜索</button>

           <img id="myOnOff" onclick="mySwitch()" src="img/on.jpg" width="45px">
       </nav>

       <p></p>

</body>
</html>