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

  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. 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_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="40px">
<script>document.write(Date())</script>

</body>
</html>

 

  1. 父模板的制作
    1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base</title>
    <base href="http://www.gzcc.cn/2016/images/banner.png" target>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
</head>


<nav>
    <img src="http://www.gzcc.cn/2016/images/banner.png" width="1000px"><br>
    <a href="http://www.gzcc.cn/">首页</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
    <a href="http://www.gzcc.cn/html/yonghufenglei/xuesheng/">学生</a>
    <a href="http://www.gzcc.cn/html/yonghufenglei/jiaoshi/">教师</a>
    <a href="http://www.gzcc.cn/html/yonghufenglei/xiaoyou/">校友</a>

</nav>

<body id="myBody">
<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>
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
<script>document.write(Date())</script>

<div class="area">

</div>

<div>
        Copyright@ 2017-1102 个人版权，版权所有　　作者：杨碧茜　　
   </div>

</body>
</html>

 

posted @ 2017-11-02 19:53  007杨碧茜  阅读(151)  评论(0)  编辑  收藏  举报