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

时间：2017-11-03 21:46:51 阅读：127 评论：0 收藏：0 [点我收藏+]

标签：文件 script 点击 function 按钮 text ntb body 代码

夜间模式的开启与关闭
1. 放置点击的按钮或图片。
2. 定义开关切换函数。
3. onclick函数调用。

父模板的制作

制作网站网页共有元素的父模板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 myele=document.getElementById("on_off");

            if(myele.src.match("bulbon"))
            {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="black";
                oBody.style.color="white";
            }
            else
            {
                oBody.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="black";
            }
        }
    </script>
</head>
<body id="myBody">

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

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
    <link rel="stylesheet" type="text/css" href="../static/css/test.css">

</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/01.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://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://www.gzcc.cn/2016/images/yhdh/02.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://www.gzcc.cn/2016/images/yhdh/06.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://www.gzcc.cn/2016/images/yhdh/03.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://www.gzcc.cn/2016/images/yhdh/07.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://www.gzcc.cn/2016/images/yhdh/08.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://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn">校友风采</a></div>
    </div>
</div>
</body>
</html>

function mySwitch()
        {
            var oBody=document.getElementById("myBody");
            var myele=document.getElementById("on_off");

            if(myele.src.match("bulbon"))
            {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="black";
                oBody.style.color="white";
            }
            else
            {
                oBody.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="black";
            }
        }

img {
    width: 300px;
}

div .img {
    border: 1px solid deeppink;
    width: 200px;
    float: left;
    margin: 8px;

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


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

}

div.img:hover {
    border: 1px solid greenyellow;
}

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

标签：文件 script 点击 function 按钮 text ntb body 代码

原文地址：http://www.cnblogs.com/095lqt/p/7779440.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行