标签:包括 text 技术 网站 登陆 tps bof switch 开启
1、夜间模式的开启与关闭
<!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:
<!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("注册成功!") }
标签:包括 text 技术 网站 登陆 tps bof switch 开启
原文地址:http://www.cnblogs.com/silu666-666/p/7773990.html