首页 > 其他 > 详细

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

时间:2017-11-04 20:29:51      阅读:238      评论:0      收藏:0      [点我收藏+]

  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>

       技术分享技术分享

       

       

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!