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

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

时间:2017-11-04 20:53:54      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:document   说明   match   mat   code   var   back   包括   制作   


  1.  

    夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  2. 父模板的制作
    1. 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js
      <!DOCTYPE html>
      <html lang="en" xml:color="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script>
              function mySwitch()
              {
                  var myele= document.getElementById("on_off")
                  if(myele.src.match("touch_bbs_thread_img_26459100_1455531733.3102"))
                  {
                      myele.src="https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=845f9b9993cad1c8d0eef4214f0e4b31/4a36acaf2edda3ccc8c8339607e93901213f925c.gif"
                      document.getElementById("myBody").style.background = "black"
                      document.getElementById("myBody").style.color="white"
                  }
                  else{
                      myele.scr="http://touch.hupucdn.com/touch_bbs_thread_img_26459100_1455531733.3102.jpeg"
                      document.getElementById("myBody").style.background = "white"
                      document.getElementById("myBody").style.color="black"
      
                  }
      
              }
          </script>
      </head>
      
      <body id="myBody">
      
      <img id="on_off"  onclick="mySwitch()"  src="http://touch.hupucdn.com/touch_bbs_thread_img_26459100_1455531733.3102.jpeg" width="500px">
      
      <script>
          document.write(Date())
      </script>
      
      </body>
      </html>

       技术分享技术分享

       

       

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

标签:document   说明   match   mat   code   var   back   包括   制作   

原文地址:http://www.cnblogs.com/dujiacheng789/p/7780908.html

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