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

夜间模式的开启与关闭

  1. 放置点击的按钮或图片。
  2. 定义开关切换函数。
  3. onclick函数调用。 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1103</title>
    <script>
        function mySwitch()
        {
            var mysty=document.getElementById("on_off");
           if(mysty.src.match("../static/image/day.PNG")){
                mysty.src="../static/image/night.PNG";
                document.getElementById("myBody").style.background="black";
                document.getElementById("myBody").style.color="white"
            }
             else{
                mysty.src="../static/image/day.PNG";
                document.getElementById("myBody").style.background="white";
                document.getElementById("myBody").style.color="black"
            }
        }
    </script>
</head>
<body id="myBody">
<img id="on_off" onclick="mySwitch()" src="../static/image/day.PNG" width="50px">
<script>
    document.write(Date());
</script>
</body>
</html>

父模版的制作

<!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="blue";
            }
        }
    </script>

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

<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
<script>
    document.write(Date())
</script>

</body>
</html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="../static/js/base.js"></script>
    <link type="text/css" rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<nav>
    <img id="myOnOff" onclick="mySwitch()"
         src="https://tva4.sinaimg.cn/crop.0.0.1242.1242.180/bde8475djw8f1hu7mrcy2j20yi0yiabl.jpg" width="30px">
    <a href="http://localhost:63342/guanli/templates/base.html?_ijt=q62n14skoqnec43tobo0psd0i3">首页</a>
    <a href="http://localhost:63342/guanli/templates/zhuce.html?_ijt=cipfjfad2e7o54e0s796j1pe0c">注册</a>
    <a href="http://localhost:63342/guanli/templates/denglu.html?_ijt=9gs2lnbhs2sh1no40cv5e982b9">登录</a>
</nav>
<div class="area">

</div>
<div class="img">
<div>
    <a href="base.html"><img src="http://www.zcool.com.cn/community/037471d55de8fc900000171405bc2ee.jpg" height="160px" width="240px"></a>
</div>

</div>
</body>
</html>

 

posted @ 2017-11-03 14:54  074罗桦  阅读(276)  评论(0)  编辑  收藏  举报