代码改变世界

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

2017-11-03 21:51  055李小锐  阅读(129)  评论(0)  编辑  收藏  举报
  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
    4. <!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="http://www.runoob.com/images/pic_bulboff.gif"
                oBody.style.background="black";
                oBody.style.color="white";
            }else {
                 oOnoff.src="http://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="http://www.runoob.com/images/pic_bulbon.gif" width="50px";>
<script>
    document.write(Date())
</script>
</body>

       

       

  2. 父模板的制作
    1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js

basehtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
    <link rel="stylesheet" type="text/css" href="base.css">
    <script src="base.js"></script>
<base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank">

</head>
<body id="myBody">

<div class="clearfloat">
     <nav >
         <img src="w_02_08_00.png" >
         <a href="http://www.gzcc.cn/">首页</a>
         <a href="">下载</a>
         <a href="">音乐</a>
         <a href="">电影</a>
         <input type="text" name="search">
         <button type="submit">搜索</button>
         <a href="{{ url_for('login') }}">登录</a>
         <a href="{{ url_for('zhuce') }}">注册</a>
         <a href="" >加入我们</a>
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";>
     </nav><hr>

</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>




</div>
        <div id="footer" style="background-color: lightskyblue;clear: both;text-align: center;"></div>
    <div class="desc" >
        <hr>
        <div class="img" >
            <a href="http://www.gzcc.cn/">
                <img src="http://img1.imgtn.bdimg.com/it/u=1137883556,1724295533&fm=200&gp=0.jpg" width="20px">
            </a>
            <div><a href="http://www.gzcc.cn/">校园风光</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img5.imgtn.bdimg.com/it/u=3778875510,3433017087&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">精彩时刻</a></div>
        </div>

        <div class="img" class="clearfloat" class="img-hover">
            <a href="http://www.gzcc.cn/">
                <img src="http://img0.imgtn.bdimg.com/it/u=2035935358,1694862404&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">双十一</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img0.imgtn.bdimg.com/it/u=1822961415,409605297&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">aasdas</a></div>
        </div>

        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img4.imgtn.bdimg.com/it/u=4201211113,1653247897&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">dasdads</a></div>
        </div>
                <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://img5.imgtn.bdimg.com/it/u=1203035184,1555274189&fm=200&gp=0.jpg"></a>
                <div><a href="http://www.gzcc.cn/">dasdsadsad</a></div>
        </div>
    </div>
　

</body>
<footer>
 <div class="footer_box">
      Copyright@ 2015-2019 个人版权，版权所有　　作者：dadadrrr　　
 </div>
 </footer>
</html>

 

base.js

function mySwitch() {
            var oBody=document.getElementById("myBody");
            var oOnoff=document.getElementById("myOnOff");
            if(oOnoff.src.match("bulbon")){
                oOnoff.src="http://www.runoob.com/images/pic_bulboff.gif";
                oBody.style.background="black";
                oBody.style.color="white";
            }else {
                 oOnoff.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="black";
            }

        }

 

base.css

img{
            width: 20px;
        }
       div .img{
            width: 250px;
            border: 1px solid #eeeeee;
            float: left;
            margin: 15px;
        }
        div.img img{
            width: 100%;
            height: auto;
        }
        div.desc{
            text-align: center;
            padding: 15px;
        }
        div.img:hover{
            border: 1px solid #222222;
        }
        .clearfloat{
            clear: both;
        }
       footer{
        position: fixed;
        bottom:0;
         width:100%;
       }

       footer .footer_box{
        background-color: #002D98;
        padding: 10px;
       color : #FFFFFF;
        text-align: center;
       }

 nav{
    position:fixed;
    top:0px;
    height: 45px;
    background-color: #6eb6de;
    border-bottom:1px solid #DDDDDD;
    width:100%;
 }