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

最新推荐文章于 2019-05-24 16:09:33 发布

amldu86246

最新推荐文章于 2019-05-24 16:09:33 发布

阅读量120

点赞数

原文链接：http://www.cnblogs.com/linf/p/7779388.html

版权

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://pic.58pic.com/58pic/15/59/25/04E58PICcfu_1024.png";
                oBody.style.background="black";
                oBody.style.color="blue";
            }else{
                oOnOff.src="http://pic.58pic.com/58pic/15/59/25/04E58PICcfu_1024.png";
                oBody.style.background="black";
                oBody.style.color="red";
            }

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

2.父模板的制作

a.制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。

b.汇总相关的样式形成独立的css文件。

c.汇总相关的js代码形成独立的js文件。

d.形成完整的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://pic.58pic.com/58pic/15/59/25/04E58PICcfu_1024.png";
                oBody.style.background="black";
                oBody.style.color="blue";
            }else{
                oOnOff.src="http://pic.58pic.com/58pic/15/59/25/04E58PICcfu_1024.png";
                oBody.style.background="black";
                oBody.style.color="red";

            }

        }
    </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.4399.com"><img src="http://imga1.5054399.com/upload_pic/2017/9/7/4399_15263776429.jpg"></a>
        <div class="img"><a href="http://www.4399.com">弹弹堂3</a></div>
    </div>
    <div class="desc">
        <a href="http://www.4399.com"><img src="http://imga4.5054399.com/upload_pic/2017/7/24/4399_13510268354.jpg"></a>
        <div class="desc"><a href="http://www.4399.com">楚乔传</a> </div>
    </div>
    <div class="img">
        <a href="http://www.4399.com"><img src="http://imga2.5054399.com/upload_pic/2017/8/5/4399_13445867323.jpg"></a>
        <div class="img"><a href="http://www.4399.com">枪战英雄</a></div>
    </div>
    <div class="img">
        <a href="http://www.4399.com"><img src="http://imga5.5054399.com/upload_pic/2017/2/14/4399_15450688970.jpg"></a>
        <div class="img"><a href="http://www.4399.com">盗墓笔记</a></div>
    </div>
</div>


<div class="clearfloat">
    <img src="http://imga2.5054399.com/upload_pic/2015/9/1/4399_17562395347.gif">
</div>
</body>





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

css

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;
}