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

Posted 2020-10-13 152陈斯璐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了夜间模式的开启与关闭，父模板的制作相关的知识，希望对你有一定的参考价值。

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

放置点击的按钮或图片。
定义开关切换函数。

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" style="color: black;background: white;">
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="60px">
<script>
    document.write(Date())
</script>
</body>
</html>

2、父模板的制作

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

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆测试界面</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/10.31.css" rel="stylesheet" type="text/css" charset="UTF-8">
    <script src="../static/js/js.js"></script>
{#导航栏#}
   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">

    <div class="navbar-header">
          <a class="logo" href="/">
            <img src="https://pic.cnblogs.com/face/1232510/20170926082320.png" alt="logo">
        </a>
        <a class="navbar-brand" href="https://home.cnblogs.com/u/silu666-666/">首页</a>
    </div>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
        <a class="btn sign-up" href="/sign_up">注册</a>
        <a class="btn sign-up" href="/sign_up">登录</a>
    </form>
    </div>
    </nav>

</head>
{#登陆注册#}
<body class="body">
<div class="center-block" id="loginbox">
    <div class="panel panel-primary" id="loginbox1_1">
        <div class="panel-heading">
            <h2 class="panel-title">登陆</h2>
        </div>
        <br>
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="id" placeholder="请输入用户名">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div id="error_box">
                <br>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住我
                </label>
            </div>
            <br>
            <label><input type="button" class="btn btn-default" onclick="Login()" value="登陆"></input></label>

        </form>
    </div>
</div>

<div class="center-block" id="zhucebox">
    <div class="panel panel-primary" id="zhucebox1_1">
        <div class="panel-heading">
            <h2 class="panel-title">注册</h2>
        </div>
        <br>
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="zcid" placeholder="请输入用户名">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="zcpassword" placeholder="请设置密码">
            </div>
            <br>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" id="repassword" placeholder="请再次输入密码">
            </div>
            <div id="error_box2">
                <br>
            </div>
            <br>
            <label><input type="button" class="btn btn-default" value="注册" onclick="Zhuce()"></input></label>
        </form>
    </div>
</div>
{#底部导航、说明#}
<div>
    <div class="col-xs-17 main">

        <a target="_blank" href="http://www.jianshu.com/c/jppzD2">关于我们</a>
        <em> · </em>
        <a target="_blank" href="http://www.jianshu.com/contact">联系我们</a>
        <em> · </em>
        <a target="_blank" href="http://www.jianshu.com/c/bfeec2e13990">加入我们</a>
        <em> · </em>
        <a target="_blank" href="http://www.jianshu.com/p/fc1c113e5b6b">书籍出版</a>
        <em> · </em>
        <a target="_blank" href="http://www.jianshu.com/press">品牌与徽标</a>
        <em> · </em>
        <a target="_blank" href="http://www.jianshu.com/faqs">帮助中心</a>
        <em> · </em>
        <a target="_blank" href="http://www.jianshu.com/p/cabc8fa39830">合作伙伴</a>

        <div class="icp">
        ©2012-2017 上海佰集信息科技有限公司 / 简书 / 沪ICP备11018329号-5 /
         举报电话：021-34770013
      </div>
    </div>
</div>
</body>
</html>

css:

.body
  {
  background-image: url("http://img3.iqilu.com/data/attachment/forum/201308/21/194452wxdthxjndnjvwh7t.jpg");
  background-repeat: repeat-y;
  }
#loginbox{
    padding: 100px 100px 20px;width: 600px;
}
#loginbox1_1{
padding:15px
}
#zhucebox{
    padding: 100px 100px 20px;width: 600px;
}
#zhucebox1_1{
padding:15px
}
nav.logo {
    float: left;
    height: 56px;
    padding: 14px 25px 15px 20px;
}
nav .log-in {
    float: right;
    margin: 11px 6px 0 10px;
    font-size: 15px;
}
.navbar-default {
    background-color: #fff;
    border-color: #f0f0f0;
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

.icp{
    color:#ea6f5a;
    margin-top: 10px;
    font-size: 12px;
}

js:

function Login(){
            var un=document.getElementById("id");
            var us=document.getElementById("password");
            var er=document.getElementById("error_box");
            er.innerHTML = "<br>";
            if(un.value.length<6||un.value.length>20){
            er.innerHTML="用户名必须在6-20个字符之间";
            return;
            }else if((un.value.charCodeAt(0))>=48 && un.value.charCodeAt(0)<=57){
                er.innerHTML = "首字母不能为数字"
                return;
            }else for(var i=0;i<un.value.length;i++){
                if((un.value.charCodeAt(i)<48)||(un.value.charCodeAt(i)>57)&&(un.value.charCodeAt(i)<97)&&(un.value.charCodeAt(i)>122)){
                    er.innerHTML="用户名只能为数字和字母"
                    return;
                }
            }
            if(us.value.length<6||us.value.length>20){
            er.innerHTML="密码必须在6-20个字符之间";
            return;
            }
            window.alert("登陆成功！")
        }
　　　　function Zhuce() {
        var un=document.getElementById("zcid");
        var us=document.getElementById("zcpassword");
        var rps=document.getElementById("repassword");
        var er=document.getElementById("error_box2");
        er.innerHTML="<br>";
        if(un.value.length<6||un.value.length>20){
            er.innerHTML="用户名必须在6-20个字符之间";
            return;
            }else if((un.value.charCodeAt(0))>=48 && un.value.charCodeAt(0)<=57){
                er.innerHTML = "首字母不能为数字"
                return;
            }else for(var i=0;i<un.value.length;i++){
                if((un.value.charCodeAt(i)<48)||(un.value.charCodeAt(i)>57)&&(un.value.charCodeAt(i)<97)&&(un.value.charCodeAt(i)>122)){
                    er.innerHTML="用户名只能为数字和字母"
                    return;
                }
            }
            if(us.value.length<6||us.value.length>20){
            er.innerHTML="密码必须在6-20个字符之间";
            return;
            }else for(var i=0;i<us.value.length;i++){
                if(us.value.charCodeAt(i)!=rps.value.charCodeAt(i)){
                    er.innerHTML="密码不一致"
                    return;
                }
            }
         window.alert("注册成功！")
    }

以上是关于夜间模式的开启与关闭，父模板的制作的主要内容，如果未能解决你的问题，请参考以下文章

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