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

weixin_30347335

于 2017-11-03 00:34:00 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/BerylF/p/7775426.html

本文介绍了如何在网页中实现夜间模式的切换功能，并通过示例代码详细解释了实现过程。此外，还提供了父模板的设计思路，包括网页的布局结构、样式及JS文件的组织方式。

1.夜间模式的开启与关闭

a.放置点击的按钮或图片。

b.定义开关切换函数。

c.onclick函数调用

<!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_bulbon.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="40px">
<script>
    document.write(Date())
</script>
</body>
</html>

2.父模板的制作

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

形成完整的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="http://www.runoob.com/images/pic_bulbon.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>
    <link rel="stylesheet" type="text/css" href="../static/css/beryl.css"/>.
    <script src="../static/js/beryl.js"></script>
</head>
<body>

     <input type="text">
     <button>查找</button>
<div class="recommend">
    <div class="img">
        <a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
        <div class="img"><a href="http://www.gzcc.cn">校友风采</a></div>
    </div>
    <div class="desc">
        <a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">校园风光</a> </div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn"><img src="http://oa.gzcc.cn/uploadfile/2017/1031/thumb_685_450_20171031053127116.jpg"></a>
        <div class="img"><a href="http://www.gzcc.cn">学生风采</a></div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn"><img src="http://oa.gzcc.cn/uploadfile/2017/1031/thumb_685_450_20171031035811173.jpg"></a>
        <div class="img"><a href="http://www.gzcc.cn">教师风采</a></div>
    </div>
</div>


<div class="clearfloat">
    <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg">
</div>
</body>





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

img {
    width: 300px;
}

div .img {
    border: 1px solid #ccc;
    width: 150px;
    float: left;
    margin: 5px;

}
div.img img {
    width: 100%;
    height: auto;
}


div.desc {
    text-align: center;
    padding: 5px;

}

div.clearfloat {
    clear: both;
}

转载于:https://www.cnblogs.com/BerylF/p/7775426.html