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

Posted 爱斯基摩人

tags:

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

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到登录界面，请登录</title>

        <script type="text/javascript" src="../static/js/cao.js"></script>
    <link rel="stylesheet" href="../static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../static/css/loginMy.css"/>
    <link rel="stylesheet" href="../static/css/20.css"/>
      <script>
            function mySwitch() {
                var oBody=document.getElementById("mybody");
                var oOnOff=document.getElementById("myOnOff");
                if (oOnOff.src.match("b9999_")){
                    oOnOff.src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1509520370&di=f7ae57dab90eab30c78e8f4733607b02&src=http://pic29.photophoto.cn/20131121/0017029581107509_b.jpg"      ;
                    oBody.style.background="black"
                    oBody.style.color="white";
                }else {

                    oOnOff.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg";
                    oBody.style.background="yellow"
                    oBody.style.color="black";


                }
            }
        </script>



    </head>
    <body id="mybody">

    <nav style="color: aliceblue">
       <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1508335637&di=7f106eb01be1fcf1aecfbaa51a30b899&src=http://apps1.bdimg.com/store/static/kvt/d2159e26d2482d785baa15d7d49e3339.png" style="width: 50px">
        <img id="myOnOff" onclick="mySwitch()"  width="40px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg">

        <input align="center" type="text" placeholder="hahahahaha" style="width: 200px" >
            <button type="submit" style="background-color: brown" >搜索</button>
    <a href="" target="_blank">进入跑酷世界</a>

    </nav>






    <div class="main" style="width: 300px;margin-left: auto;margin-right: auto">

        <div id="header"><h2 align="center">登陆界面</h2></div>

        <div class="content">

                <p align="center">用户&nbsp：<input id="uname" type="text" name="user" placeholder="请输入账号"></p>
                <p align="center"> 密码&nbsp：<input id="upass" type="password" name="psw" placeholder="请输入密码"></p>

                <br>
                <div id="error_box"><br>
                </div>

                <br>

                <input type="checkbox" value="true" id="dd" >记住密码 <br>

             <p align="center"><button onclick="fnLogin()">登录</button></p>
              <a href="register.html"><p align="center"><button onclick="fnLogin()">注册</button></p></a>
                &nbsp&nbsp&nbsp



        </div>

        <div id="footer"><h3 align="center">版权所有@</h3></div>
        <div class="recomend">
        <div class="img">
            <a href="http://www.gzcc.cn/"><img src="http://p2.so.qhimgs1.com/t0155506fc264d7422e.jpg"></a>
            <div class="dec">
                <a href="http://www.gzcc.cn/">校园风光</a></div>
        </div>
    </div>

    <div class="recomend">
        <div class="img">
            <a href="http://www.gzcc.cn/"><img src="http://p2.so.qhimgs1.com/t0155506fc264d7422e.jpg"></a>
            <div class="dec">
                <a href="http://www.gzcc.cn/">校园风光</a></div>
        </div>
    </div>
    <div class="recomend">
        <div class="img" >
            <a href="http://www.gzcc.cn/"><img src="http://p2.so.qhimgs1.com/t0155506fc264d7422e.jpg"></a>
            <div class="dec">
                <a href="http://www.gzcc.cn/">校园风光</a></div>
        </div>
    </div>
    <div class="recomend">
        <div class="img">
            <a href="http://www.gzcc.cn/"><img src="http://p2.so.qhimgs1.com/t0155506fc264d7422e.jpg"></a>
            <div class="dec">
                <a href="http://www.gzcc.cn/">校园风光</a></div>
        </div>
    </div>



    </div>

    </body>
        </html>

 

V

 

javascript

var user = document.getElementById("user");
var pwd = document.getElementById("pwd");
var surePwd = document.getElementById("surePwd");


//获取span的所有id
var user_pass = document.getElementById("user_pass");
var pwd_pass = document.getElementById("pwd_pass");
var surePwd_pass = document.getElementById("surePwd_pass");
function checkUser(){
    //如果昵称未输入，则提示输入昵称
    if(!user.value){
        user_pass.style.fontSize = "13px";
        user_pass.style.width="31%";
        user_pass.style.height="2em";
        user_pass.style.textAlign="center";
        user_pass.style.lineHeight="2em";
        user_pass.style.marginTop=\'0.05%\'
        user_pass.innerHTML = \'你还没有填写用户名哦。\';
        user_pass.style.display="block";
    }
    else if(user.value){
        user_pass.style.display="none";
    }
}

//输入密码提示
function checkUser1(){
    //如果未输入密码，则提示请输入密码
    if(!pwd.value){
        pwd_pass.style.fontSize = "13px";
        pwd_pass.style.width="31%";
        pwd_pass.style.height="2em";
        pwd_pass.style.textAlign="center";
        pwd_pass.style.lineHeight="2em";
        pwd_pass.innerHTML = \'你还没有填写密码哦。\';
        pwd_pass.style.display="block";
    }
    else{
        pwd_pass.innerHTML =\'\';
        pwd_pass.style.backgroundColor= "#fff";
        pwd_pass.style.border="none";
        pwd_pass.style.display="none";

    }

}

//确认密码提示
function checkUser2(){
    //再次确认密码
    if(!surePwd.value){
        surePwd_pass.style.fontSize = "13px";
        surePwd_pass.style.width="31%";
        surePwd_pass.style.height="2em";
        surePwd_pass.style.textAlign="center";
        surePwd_pass.style.lineHeight="2em";
        surePwd_pass.innerHTML = \'你还没有填写验证码哦\';
        surePwd_pass.style.display="block";
    }

    else{
        surePwd_pass.innerHTML =\'\';
        surePwd_pass.style.backgroundColor= "#fff";
        surePwd_pass.style.border="none";
        surePwd_pass.style.display="none";
    }
}

function  submitB(){

    if(!user.value){
        user_pass.style.fontSize = "13px";
        user_pass.style.width="31%";
        user_pass.style.height="2em";
        user_pass.style.textAlign="center";
        user_pass.style.lineHeight="2em";
        user_pass.innerHTML = \'请填写您的用户名。\';
        user.focus();
        return false;
    }
    if(!pwd.value){
        pwd_pass.style.fontSize = "13px";
        pwd_pass.style.width="31%";
        pwd_pass.style.height="2em";
        pwd_pass.style.textAlign="center";
        pwd_pass.style.lineHeight="2em";
        pwd_pass.innerHTML = \'请填写您的用户密码。\';
        pwd.focus();
        return false;
    }

    if(!surePwd_pass.value){
        surePwd_pass.style.fontSize = "13px";
        surePwd_pass.style.width="31%";
        surePwd_pass.style.height="2em";
        surePwd_pass.style.textAlign="center";
        surePwd_pass.style.lineHeight="2em";
        surePwd_pass.innerHTML = \'请填写您的登录验证。\';
        surePwd_pass.focus();
        return false;
    }
    else{
        var f = sendParam();
        return f;
    }

}
function fnLogin() {
    var oUname = document.getElementById("uname")
    var oUpass = document.getElementById("upass")
     var oUpass2=document.getElementById("upass2");
    var oError = document.getElementById("error_box")

    oError.innerHTML="<br>"
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "请输入用户名6-20位字符"
        return;
    }else if ((oUname.value.charCodeAt(0)>=48)&&(oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML="用户名首字母必须是字母"
        return;
    }else for(var i=0; i<oUname.value.length;i++){
        if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
            oError.innerHTML="用户名必须为字母或数字";
            return;
        }

    }




    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "请输入密码 6-20位字符"
        return;
    }
     else if (oUpass.value!==oUpass2.value){
        oError.innerHTML="两次密码不一致";
        return;
    }


        window.alert("注册成功")

}

css

div.img{
    border: 1px solid #ccc;
    width: 180px;
    float: left;
    margin: 5px;
}
div.img img{
    width:100%;
    height: auto;
}
div.dec{
    text-align: center;
    padding: 5px;
}
div.img:hover{
    border: 1px solid #000000;
}
div.clearfloat{
    clear: both;
}

 

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

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

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

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

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

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

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