码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-02 22:01:31      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:js代码   ntb   str   host   link   title   pre   localhost   夜间模式   

 


  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("bulbon")){
                      oOnoff.src="https://www.runoob.com/images/pic_bulboff.gif";
                      oBody.style.background="black";
                      oBody.style.color="white";
                  }else{
                      oOnoff.src="https://www.runoob.com/images/pic_bulbon.gif";
                      oBody.style.background="white";
                      oBody.style.color="black";
                  }
              }
          </script>
      </head>
      <body id="myBody">
      <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif" width="40px">
      <script>
          document.write(Date())
      </script>
      </body>
      </html>

      HTML

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>夜间模式</title>
          <link rel="stylesheet" type="text/css" href="../static/css/switch.css">
          <script src ="../static/js/switch.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>Night</h2>
       
      <nav>
          <img id="myOnOff" onclick="mySwitch()"
               src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1241908247,1796600239&fm=200&gp=0.jpg" width="50px">
          <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.baidu.com/item/%E4%BA%94%E6%9C%88%E5%A4%A9/17011?fr=aladdin">百度百科</a></li>
          <li><a href="http://v.baidu.com/person_intro/?id=158809&video_uri=person_card">参加综艺</a></li>
          <li><a href="http://www.1905.com/mdb/star/224">电影作品</a></li>
          <li><a href="http://www.xiami.com/artist/3110">音乐作品</a></li>
          <li><a href="http://tieba.baidu.com/f?kw=%CE%E5%D4%C2%CC%EC&fr=ala0&loc=rec">贴吧</a></li>
      </ul>
       
      </nav>
      <div class="area">
      </div>
       
      <div class="wuyuetian">
          <div class="img">
              <a href="http://tieba.baidu.com/p/1479820595"><img
                      src="http://imgsrc.baidu.com/forum/w%3D580/sign=981b43943a292df597c3ac1d8c305ce2/4af8d72a6059252dd8df9bbf349b033b5ab5b946.jpg"></a>
              <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">阿信 </a></div>
          </div>
       
          <div class="img">
              <a href="http://tieba.baidu.com/p/1479820595"><img
                      src="http://imgsrc.baidu.com/forum/w%3D580/sign=e06f694f51da81cb4ee683c56267d0a4/3c50f3deb48f8c54d9ef44943a292df5e0fe7f4a.jpg"></a>
              <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">石头</a></div>
          </div>
       
          <div class="img">
              <a href="http://tieba.baidu.com/p/1479820595"><img
                      src="http://imgsrc.baidu.com/forum/w%3D580/sign=5fb4fe662e738bd4c421b239918a876c/2a13c8fcc3cec3fd790326ced688d43f87942749.jpg"></a>
              <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">怪兽</a></div>
          </div>
       
         <div class="img">
              <a href="http://tieba.baidu.com/p/1479820595"><img
                      src="http://imgsrc.baidu.com/forum/w%3D580/sign=a58b1295a8d3fd1f3609a232004f25ce/022297dda144ad347e82063cd0a20cf431ad8549.jpg"></a>
              <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">玛莎</a></div>
          </div>
         <div class="img">
              <a href="http://tieba.baidu.com/p/1479820595"><img
                      src="http://imgsrc.baidu.com/forum/w%3D580/sign=d5da0ab39b504fc2a25fb00dd5dce7f0/9af690529822720ef60764417bcb0a46f31fab46.jpg"></a>
              <div class="desc"><a href="http://tieba.baidu.com/p/1479820595">丸尾 </a></div>
          </div></body>
      </html>

      js

      function mySwitch() {
          var oBody = document.getElementById("myBody");
          var oOnoff = document.getElementById("myOnOff");
          if (oOnoff.src.match("100x100")){
              oOnoff.src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1241908247,1796600239&fm=200&gp=0.jpg"
              oBody.style.background = "black";
              oBody.style.color ="white";
          }else {
              oOnoff.src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3952690403,2307372256&fm=200&gp=0.jpg"
              oBody.style.background ="white";
              oBody.style.color ="black";
          }

      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;
      }
       
       
      .wuyuetian {
          height: 180px;
      }
       
      h2{
          color: red;
          font-family: ‘Consolas‘, ‘Deja Vu Sans Mono‘, ‘Bitstream Vera Sans Mono‘, monospace;
      }

       

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

标签:js代码   ntb   str   host   link   title   pre   localhost   夜间模式   

原文地址:http://www.cnblogs.com/xiaojiaqi/p/7774596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!