新鲜的登录注册方案_网站前端开发_前端开发者

https://www.rokub.com

html 代码

<!doctype <a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a>> <html lang=”en”> <head> <meta charset=”UTF-8″ /> <title></title> <link rel=”stylesheet” type=”text/<a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a>” href=”<a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a>/login.<a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a>” /> <style type=”text/<a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a>”> @charset “UTF-8″; html{overflow-y:hidden;} body{margin:0;height:100%;} a:active,a:hover{outline:0} button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0} button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer} input,select,button{outline:none;} table{border-collapse:collapse;border-spacing:0} td,th{padding:0} img{vertical-align:middle;border:0} @-ms-viewport{width:device-width} html{font-size:50px;-webkit-tap-highlight-color:transparent;height:100%;min-width:320px;overflow-x:hidden} body{font-family:”Microsoft YaHei”;font-size:.28em;line-height:1;color:#333;background-color:white;} .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1} .h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1} .h1,.h2,.h3,h1,h2,h3{margin-top:.28rem;margin-bottom:.14rem} .h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%} .h4,.h5,.h6,h4,h5,h6{margin-top:.14rem;margin-bottom:.14rem} .h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%} .h1,h1{font-size:.364rem} .h2,h2{font-size:.2996rem} .h3,h3{font-size:.238rem} .h4,h4{font-size:.175rem} .h5,h5{font-size:.14rem} .h6,h6{font-size:.119rem} h6{margin-top:0;margin-bottom:0} button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit} a{color:#06c1ae;text-decoration:none;outline:0} a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} a.react,label.react{display:block;color:inherit;height:100%} a.react.react-active,a.react:active,label.react:active{background:rgba(0,0,0,.1)} ul{margin:0;padding:0;list-style-type:none} hr{margin-top:.28rem;margin-bottom:.28rem;border:0;border-top:1px solid #DDD8CE} h6,p{line-height:1.41;text-align:justify;margin:-.2em 0;word-break:break-all} small,weak{color:#666} ::-webkit-input-placeholder {color:#999;line-height:inherit;} :-moz-placeholder {color:#999;line-height:inherit;} ::-moz-placeholder {color:#999;line-height:inherit;} /*other public*/ .iconfont{font-family:’adminthemesregular’;} .add_icon:before{content:”a”;margin:0 5px;font-family:’adminthemesregular’;} .money_icon:before{content:”$”;margin:0 5px;font-family:’adminthemesregular’;font-size:20px;} .rmb_icon{color:#19a97b;} .rmb_icon:before{content:”￥”;margin-right:2px;} .ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} .center{text-align:center;} .fl{float:left;} .fr{float:right;} .mtb{margin:5px 0;overflow:hidden;} .mlr{margin:0 5px;overflow:hidden;} .admin_login{width:300px;height:auto;overflow:hidden;margin:10% auto 0 auto;padding:40px;box-shadow:0 -15px 30px #0d957a;border-radius:5px;} .admin_login dt{font-size:20px;font-weight:bold;text-align:center;color:#45bda6;text-shadow:0 0 1px #0e947a;margin-bottom:15px;} .admin_login dt strong{display:block;} .admin_login dt em{display:block;font-size:12px;margin-top:8px;} .admin_login dd{margin:5px 0;height:42px;overflow:hidden;position:relative;} .admin_login dd .login_txtbx{font-size:14px;height:26px;line-height:26px;padding:8px 5%;width:90%;text-indent:2em;border:none;background:#5cbdaa;color:white;} .admin_login dd .login_txtbx::-webkit-input-placeholder {color:#f4f4f4;line-height:inherit;} .admin_login dd .login_txtbx:-moz-placeholder {color:#f4f4f4;line-height:inherit;} .admin_login dd .login_txtbx::-moz-placeholder {color:#f4f4f4;line-height:inherit;} .admin_login dd .login_txtbx:focus{background:#55b7a4;} .admin_login dd:before{font-family:’adminthemesregular’;position:absolute;top:0;left:10px;height:42px;line-height:42px;font-size:20px;color:#0c9076;} .admin_login dd.user_icon:before{content:”u”;} .admin_login dd.pwd_icon:before{content:”p”;} .admin_login dd.val_icon:before{content:”n”;} .admin_login dd .ver_btn{text-align:right;border:none;color:#f4f4f4;height:42px;line-height:42px;margin:0;z-index:1;position:relative;float:right;background:#48bca5;} .admin_login dd .checkcode{float:left;width:182px;height:42px;background:#fff} .admin_login dd .checkcode input{width:120px;height:36px;line-height:36px;padding:3px;color:white;outline:none;border:none;text-indent:2.8em;} .admin_login dd .checkcode canvas{width:85px;height:36px;padding:3px;z-index:0;background:#5cbdaa;} .admin_login dd .submit_btn{width:100%;height:42px;border:none;font-size:16px;background:#048f74;color:#f8f8f8;} .admin_login dd .submit_btn:hover{background:#0c9076;color:#f4f4f4;} .admin_login dd p{color:#53c6b0;font-size:12px;text-align:center;margin:5px 0;} /*header*/ header{background:#19a97b;overflow:hidden;} header h1{margin:0;float:left;margin-left:1%;} header h1 img{width:auto;max-width:300px;height:70px;} header .rt_nav{float:right;overflow:hidden;margin-right:3%;margin-top:12px;} header .rt_nav li{float:left;padding:0 25px;text-align:center;border-right:1px #139667 solid;} header .rt_nav li:last-child{border:none;} header .rt_nav li a{color:white;font-size:12px;text-shadow:0 0 1px #20af83;display:block;} header .rt_nav li a:hover{color:#f4f4f4;} header .rt_nav li a:hover:before{color:#f4f4f4;} header .rt_nav li a:before{font-family:’adminthemesregular’;color:white;font-size:30px;display:block;} header .rt_nav li .website_icon:before{content:”I”;} header .rt_nav li .admin_icon:before{content:”U”;} header .rt_nav li .clear_icon:before{content:”C”;} header .rt_nav li .set_icon:before{content:”S”;} header .rt_nav li .quit_icon:before{content:”Q”;} /*aside nav*/ .lt_aside_nav{width:210px;height:100%;position:absolute;top:70px;left:0;background:#fcfcfc;} .lt_aside_nav h2{text-align:center;border-bottom:1px #b6b6b6 solid;margin:0;height:45px;line-height:45px;background:#efefef;} .lt_aside_nav h2 a{display:block;color:#333333;font-size:14px;text-shadow:0 0 2px white;} .lt_aside_nav ul{margin-bottom:75px;} .lt_aside_nav dl{margin:0;} .lt_aside_nav dl dt{font-weight:bold;height:45px;line-height:45px;border-bottom:1px #e9e9e9 solid;padding:0 15px;position:relative;} .lt_aside_nav dl dt:before{position:absolute;width:5px;height:25px;background:#67c1a5;content:””;top:10px;left:0;} .lt_aside_nav dl dd{margin:0;height:40px;line-height:40px;border-bottom:1px #e9e9e9 dotted;} .lt_aside_nav dl dd a{display:block;color:#555555;padding:0 15px;} .lt_aside_nav dl dd a:hover{background:#f8f8f8;text-shadow:0 1px 5px #f4f4f4;color:#19a97b;} .lt_aside_nav dl dd .active{background:#f8f8f8;color:#19a97b;} .lt_aside_nav dl dd .active:after{content:”>”;font-family:’adminthemesregular’;position:absolute;right:3%;color:#19a97b;} .lt_aside_nav .btm_infor{height:35px;line-height:35px;width:100%;background:#efefef;border-top:1px #b6b6b6 solid;text-align:center;color:#aaa;} /*public:rtContent*/ .rt_wrap{margin-left:218px;margin-right:10px;height:100%;position:relative;} .rt_content{margin-bottom:80px;margin-right:8px;overflow:hidden;} .textWhite{color:white;} .link_btn{border:1px #139667 solid;border-radius:2px;background:#19a97b;color:white;padding:8px 15px;display:inline-block;cursor:pointer;} .link_btn:hover{background:#11a274;border:1px #0e8f61 solid;} .link_btn:active{background:#0c9c6e;border:1px #0e8f61 solid;} .textbox{border:1px #139667 solid;height:26px;line-height:26px;padding:5px;font-size:12px; vertical-align:middle;} .textbox_295{width:295px;} .textbox_225{width:225px;} .select{padding:0 5px;height:38px;font-size:12px;border:1px #139667 solid;vertical-align:middle; appearance: button;-webkit-appearance:button;} .group_btn{border:1px #139667 solid;background:#19a97b;color:white;padding:0 15px;height:38px;cursor:pointer;display:inline-block;vertical-align:middle;} .group_btn:hover{background:#11a274;border:1px #0e8f61 solid;} .group_btn:active{background:#0c9c6e;border:1px #0e8f61 solid;} .page_title{height:40px;line-height:40px;border-bottom:1px #b6b6b6 solid;margin:10px 0;} .page_title h2{font-size:15px;font-weight:bold;} .page_title .top_rt_btn{display:inline-block;height:30px;line-height:30px;padding:0 15px;border:1px #d2d2d2 solid;background:#f8f8f8;color:#19a97b; vertical-align:middle;cursor:pointer;} .table{width:100%;table-layout:fixed;margin:5px 0;} .table th{border:1px #d2d2d2 solid;height:40px;line-height:40px;} .table td{border:1px #d2d2d2 solid;padding:10px 8px;position:relative;} .table td p{margin:5px 0;line-height:1.3;} .table td mark{color:red;line-height:1.3;} .table tr:nth-child(odd){background:#f8f8f8;} .table tr:hover{background:#f9f9f9;} .table td a{color:#19a97b;margin:0 5px;cursor:pointer;} .table td .full_link_td{display:block;width:100%;height:100%;border:none;outline:none;position:absolute;top:0;left:0;text-align:center;margin:0;font-size:20px;font-weight:bold;} .table td .full_link_td:hover{background:#f4f4f4;color:#019163;} .table td .inner_btn{background:#F9F;color:white;padding:5px 8px;border-radius:2px;} .table td .inner_btn:hover{background:#ffa4ff;color:#f8f8f8;} .table td .cut_title{width:265px;} .table td .link_icon{font-size:24px;font-family:’adminthemesregular’;color:#19a97b;} .table td .link_icon:hover{color:#019163;} .paging{margin:8px 0;overflow:hidden;text-align:right;} .paging a{background:#19a97b;border:1px #139667 solid;color:white;padding:5px 8px;display:inline-block;cursor:pointer;} .paging a:hover{background:#11a274;border:1px #0e8f61 solid;} .paging a:active{background:#17a578;border:1px #0e8f61 solid;} .single_selection{color:#333;padding:6px 8px;display:inline-block;vertical-align:middle;} .single_selection input{margin-right:3px;vertical-align:middle;} .errorTips{color:red;margin:0 8px;} .errorTips:before{content:”x”;font-family:’adminthemesregular’;margin-right:3px;font-size:16px;} .textarea{display:inline-block;margin-top:5px;outline:none;resize:none;border:1px #139667 solid;padding:8px;} .uploadImg{display:inline-block;padding:15px;background:#f8f8f8;position:relative;border:1px #139667 solid;} .uploadImg input{display:none;} .uploadImg span{display:block;font-size:12px;text-align:center;color:#139667;} .uploadImg span:hover{color:#209f71;} .uploadImg span:before{content:”#”;font-family:’adminthemesregular’;display:block;font-size:40px;} .ulColumn2{overflow:hidden;} .ulColumn2 li{margin:15px 0;} .ulColumn2 li .item_name{text-align:right;display:inline-block;} /*TAB*/ .admin_tab{background:#f8f8f8;overflow:hidden;border:1px #d2d2d2 solid;margin-bottom:8px;} .admin_tab li{float:left;height:40px;line-height:40px;border-right:1px #f2f2f2 solid;} .admin_tab li:last-child{border:none;} .admin_tab li a{display:block;padding:0 20px;color:grey;font-size:12px;cursor:pointer;} .admin_tab li a.active{background:white;font-weight:bold;border-top:1px #19a97b solid;color:#19a97b;} .admin_tab_cont{display:none;margin:5px 0;overflow:hidden;} .cont_col_lt{width:300px;overflow:hidden;float:left;} .cont_col_rt{margin-left:315px;overflow:hidden;} /*pop*/ .pop_bg{display:none;background:rgba(0,0,0,.35);width:100%;height:100%;position:fixed;top:0;left:0;z-index:999;} .pop_cont{background:white;min-width:300px;height:auto;overflow:hidden;position:absolute;top:20%;left:50%;margin-left:-150px;border-radius:5px 5px 0 0;} .pop_cont h3{height:40px;line-height:40px;background:#19a97b;color:white;font-size:14px;font-weight:bold;margin:0;padding:0 1em;} .pop_cont h3:before{content:”*”;font-family:’adminthemesregular’;margin-right:2px;font-size:20px;font-weight:normal;} .pop_cont .pop_cont_text{padding:10px;line-height:1.3;color:grey;} .pop_cont .pop_cont_input{padding:10px;text-align:center;} .pop_cont .pop_cont_input li{margin:5px 0;text-align:left;overflow:hidden;} .pop_cont .pop_cont_input li .ttl{display:inline-block;} .pop_cont .pop_cont_input li .textbox{border:1px #d2d2d2 solid;width:200px;display:inline-block;} .pop_cont .pop_cont_input li .select{border:1px #d2d2d2 solid;} .pop_cont .pop_cont_input li .textarea{border:1px #d2d2d2 solid;} .pop_cont .btm_btn{padding:10px 0;text-align:center;} .pop_cont .btm_btn .input_btn{display:inline-block;height:35px;border:none;background:none;padding:0 20px;} .pop_cont .btm_btn .trueBtn{background:#19a97b;color:white;border:1px #19a97b solid;border-radius:2px;} .pop_cont .btm_btn .trueBtn:hover{background:#13a174;border-radius:0;border:1px #13a174 solid;} .pop_cont .btm_btn .falseBtn{background:#fafafa;color:grey;border:1px #d2d2d2 solid;border-radius:2px;} .pop_cont .btm_btn .falseBtn:hover,.pop_cont .btm_btn .input_btn_02:active{background:#f0f0f0;border-radius:0;color:#818181;text-shadow:0 1px 1px white;} /*loading*/ .loading_area{display:none;background:rgba(255,255,255,.85);position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;z-index:999;} .loading_cont{overflow:hidden;margin-top:20%;} @-webkit-keyframes loading_icon{0%{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1)} 50%{transform:scaleY(.4);-moz-transform:scaleY(.4);-webkit-transform:scaleY(.4)} 100%{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1)} } @-moz-keyframes loading_icon{0%{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1)} 50%{transform:scaleY(.4);-moz-transform:scaleY(.4);-webkit-transform:scaleY(.4)} 100%{transform:scaleY(1);-moz-transform:scaleY(1);-webkit-transform:scaleY(1)} } .loading_icon i{display:inline-block;width:4px;height:20px;border-radius:2px;background:#19a97b;margin:0 2px} .loading_icon i:nth-child(1){-webkit-animation:loading_icon 1s ease-in .1s infinite;-moz-animation:loading_icon 1s ease-in .1s infinite;animation:loading_icon 1s ease-in .1s infinite} .loading_icon i:nth-child(2){-webkit-animation:loading_icon 1s ease-in .2s infinite;-moz-animation:loading_icon 1s ease-in .2s infinite;animation:loading_icon 1s ease-in .2s infinite} .loading_icon i:nth-child(3){-webkit-animation:loading_icon 1s ease-in .3s infinite;-moz-animation:loading_icon 1s ease-in .3s infinite;animation:loading_icon 1s ease-in .3s infinite} .loading_icon i:nth-child(4){-webkit-animation:loading_icon 1s ease-in .4s infinite;-moz-animation:loading_icon 1s ease-in .4s infinite;animation:loading_icon 1s ease-in .4s infinite} .loading_icon i:nth-child(5){-webkit-animation:loading_icon 1s ease-in .5s infinite;-moz-animation:loading_icon 1s ease-in .5s infinite;animation:loading_icon 1s ease-in .5s infinite} .loading_txt mark{background:none;font-size:12px;color:red;} /*statistic*/ .dataStatistic{width:700px;height:400px;border:1px solid #ccc;margin:0 auto;margin-top:100px;overflow:hidden} #cylindrical{width:700px;height:400px;margin-top:-15px} #line{width:700px;height:400px;margin-top:-15px} #pie{width:700px;height:400px;margin-top:-15px} body { height: 100%; background: #16a085; overflow: hidden; } canvas { z-index: -1; position: absolute; } .wrap { padding: 40px; } /*登录*/ .login{ display: block; } .form { width: 300px; height: auto; overflow: hidden; margin: 10% auto 0 auto; padding: 40px; box-shadow: 0 -15px 30px #0d957a; border-radius: 5px; } .form input { font-family: “Roboto”, sans-serif; outline: 0; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; width: 100%; } .form button { font-family: “Microsoft YaHei”, “Roboto”, sans-serif; text-transform: uppercase; outline: 0; background: #4CAF50; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; } .form button:hover, .form button:active, .form button:focus { background: #43A047; } .login_bottom{ margin-top: 20px; overflow: hidden; } .login_bottom_left{ float: left; cursor:pointer; } .login_bottom_left:hover{ color: #004785; } .login_bottom_right{ float: right; color: #004785; cursor:pointer; } /*注册*/ .register{ display: none; } .form2 { width: 300px; height: auto; overflow: hidden; margin: 10% auto 0 auto; padding: 40px; box-shadow: 0 -15px 30px #0d957a; border-radius: 5px; } .register_phone,.register_passw { font-family: “Roboto”, sans-serif; outline: 0; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; width: 100%; overflow: hidden; } .register_yanzheng{ font-family: “Roboto”, sans-serif; outline: 0; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; float: left; } .register_btn{ width: 110px; height: 46px; border: 0px; background: #f35c55; color: #ffffff; margin-left: 2px; -webkit-appearance: button; cursor: pointer; float: right; } .register_btn:hover{ background: #f38355; } .form2 button { font-family: “Microsoft YaHei”, “Roboto”, sans-serif; text-transform: uppercase; outline: 0; background: #4CAF50; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; } .form2 button:hover, .form2 button:active, .form2 button:focus { background: #43A047; } .register_bottom{ margin-top: 20px; overflow: hidden; } .register_bottom_left{ float: left; } .register_bottom_left span{ color: #004785; cursor:pointer; } .register_bottom_right{ float: right; color: #004785; cursor:pointer; } /*找回密码*/ .back{ display: none; } .form3 { width: 300px; height: auto; overflow: hidden; margin: 10% auto 0 auto; padding: 40px; box-shadow: 0 -15px 30px #0d957a; border-radius: 5px; } .back_btn{ width: 110px; height: 46px; border: 0px; background: #f35c55; color: #ffffff; margin-left: 2px; -webkit-appearance: button; cursor: pointer; float: right; } .back_phone { font-family: “Roboto”, sans-serif; outline: 0; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; width: 100%; overflow: hidden; } .back_yanzheng{ font-family: “Roboto”, sans-serif; outline: 0; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; float: left; } .form3 button { font-family: “Microsoft YaHei”, “Roboto”, sans-serif; text-transform: uppercase; outline: 0; background: #4CAF50; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; } .form3 button:hover, .form3 button:active, .form3 button:focus { background: #43A047; } .modify{ display: none; } .form4 { width: 300px; height: auto; overflow: hidden; margin: 10% auto 0 auto; padding: 40px; box-shadow: 0 -15px 30px #0d957a; border-radius: 5px; } .form4 input { font-family: “Roboto”, sans-serif; outline: 0; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; width: 100%; } .form4 button { font-family: “Microsoft YaHei”, “Roboto”, sans-serif; text-transform: uppercase; outline: 0; background: #4CAF50; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; } .modify_passw,.modify_passw1 { font-family: “Roboto”, sans-serif; outline: 0; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; width: 100%; overflow: hidden; } .form4 button:hover, .form4 button:active, .form4 button:focus { background: #43A047; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake_effect { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; } </style> </head> <body> <div class=”wrap”> <!–登录–> <div class=”login”> <div class=”form”> <input type=”text” class=”login_username” placeholder=”用户名/手机号码” value=””/> <input type=”password” class=”login_passw” placeholder=”密码” value=”” /> <button class=”login_in”>登录</button> <div class=”login_bottom”> <div class=”login_bottom_left”>忘记密码</div> <div class=”login_bottom_right”>立即注册></div> </div> </div> </div> <!–注册–> <div class=”register”> <div class=”form2″> <input class=”register_phone” type=”text” placeholder=”手机号码” value=”” /> <input class=”register_passw” type=”password” placeholder=”请输入密码(6~20位)字母+数字/符号” value=”” /> <input class=”register_yanzheng” type=”text” placeholder=”请输入验证码” value=”” /> <input class=”register_btn” type=”button” value=”获取验证码” /> <button class=”register_in”>注册</button> <div class=”register_bottom”> <div class=”register_bottom_left”><input type=”checkbox” checked=”true”/>我已阅读并同意服务协议</div> <div class=”register_bottom_right”>已有账号登录></div> </div> </div> </div> <!–找回密码–> <div class=”back”> <div class=”form3″> <input class=”back_phone” type=”text” placeholder=”手机号码” value=”” /> <input class=”back_yanzheng” type=”text” placeholder=”请输入验证码” value=”” /> <input class=”back_btn” type=”button” value=”获取验证码” /> <button>验证</button> </div> </div> <!–修改–> <div class=”modify”> <div class=”form4″> <input class=”modify_passw” type=”password” placeholder=”请输入密码(6~20位)” value=”” /> <input class=”modify_passw1″ type=”password” placeholder=”请确保两次密码输入一致” value=”” /> <button>修改</button> </div> </div> </div> </body> <script src=”http://libs.baidu.com/<a href="https://www.rokub.com/category/jquery" title="jquery" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">jquery</a>/2.1.4/<a href="https://www.rokub.com/category/jquery" title="jquery" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">jquery</a>.min.<a href="https://www.rokub.com/category/javascript" title="js" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">js</a>”></script> <script src=”<a href="https://www.rokub.com/category/javascript" title="js" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">js</a>/verificationNumbers.<a href="https://www.rokub.com/category/javascript" title="js" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">js</a>” type=”text/javascript” charset=”utf-8″></script> <script src=”<a href="https://www.rokub.com/category/javascript" title="js" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">js</a>/Particleground.js” type=”text/javascript” charset=”utf-8″></script> <script type=”text/javascript”> $(document).ready(function() { //粒子背景特效 $(‘body’).particleground({ dotColor: ‘#5cbdaa’, lineColor: ‘#5cbdaa' }); }); //点击登录判断手机号 $(“.login_in”).click(function () { }) var bol = true; var bool = true; //点击注册判断手机号和密码 $(“.register_in”).click(function () { var $register_phone = $(“.register_phone”).val(); if(!(/^1[34578]\d{9}$/.test($register_phone))){ bol = false; } if (bol==false) { $(“.register_phone”).removeClass(‘shake_effect’); setTimeout(function() { $(“.register_phone”).addClass(‘shake_effect’) bol = true; }, 1); } var $register_passw = $(“.register_passw”).val(); if (!(/^(?![\d]+$)(?![a-zA-Z]+$)(?![!#$%^&*]+$)[\da-zA-Z!#$%^&*.]{6,20}$/.test($register_passw))) { bool = false; } if (bool==false) { $(“.register_passw”).removeClass(‘shake_effect’); setTimeout(function() { $(“.register_passw”).addClass(‘shake_effect’) bool = true; }, 1); } }) //点击获取注册验证码 function click_yanzheng () { $(“.register_btn”).click(function () { $(this).unbind(“click”); var str = 60; var timer; $(this).val(str); timer = setInterval(function () { str–; $(“.register_btn”).val(str); if (str==0) { clearInterval(timer); $(“.register_btn”).val(“获取验证码”); $(“.register_btn”).bind(“click”,click_yanzheng()); } },1000) }) } click_yanzheng(); $(function() { $(‘.login_bottom_right’).click(function() { $(‘.login’).animate({ height: ‘toggle’, opacity: ‘toggle' }, 1500); $(‘.register’).animate({ height: ‘toggle’, opacity: ‘toggle' }, 1500); }); $(‘.register_bottom_right’).click(function() { $(‘.register’).animate({ height: ‘toggle’, opacity: ‘toggle' }, 1500); $(‘.login’).animate({ height: ‘toggle’, opacity: ‘toggle' }, 1500); }); $(‘.login_bottom_left’).click(function() { $(‘.login’).animate({ height: ‘toggle’, opacity: ‘toggle' }, 1500); $(‘.back’).animate({ height: ‘toggle’, opacity: ‘toggle’}, 1500); }); }) /** * Particleground * * @author Jonathan Nicol – @mrjnicol * @version 1.0.1 * @description Creates a canvas based particle system background * * Inspired by: * http://requestlab.fr/ * http://disruptivebydesign.com/ * * @license The MIT License (MIT) * * Copyright (c) 2014 Jonathan Nicol – @mrjnicol * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the “Software”), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ !function(a){function b(b,d){function e(){if(w){$canvas=a(‘<canvas class=”pg-canvas”></canvas>’),v.prepend($canvas),p=$canvas[0],q=p.getContext(“2d”),f();for(var b=Math.round(p.width*p.height/d.density),c=0;b>c;c++){var e=new l;e.setStackPos(c),x.push(e)}a(window).on(“resize”,function(){h()}),a(document).on(“mousemove”,function(a){y=a.pageX,z=a.pageY}),B&&!A&&window.addEventListener(“deviceorientation”,function(){D=Math.min(Math.max(-event.beta,-30),30),C=Math.min(Math.max(-event.gamma,-30),30)},!0),g(),o(“onInit”)}}function f(){p.width=v.width(),p.height=v.height(),q.fillStyle=d.dotColor,q.strokeStyle=d.lineColor,q.lineWidth=d.lineWidth}function g(){if(w){s=a(window).width(),t=a(window).height(),q.clearRect(0,0,p.width,p.height);for(var b=0;b<x.length;b++)x.updatePosition();for(var b=0;b<x.length;b++)x.draw();E||(r=requestAnimationFrame(g))}}function h(){for(f(),i=x.length-1;i>=0;i–)(x[i].position.x>v.width()||x[i].position.y>v.height())&&x.splice(i,1);var a=Math.round(p.width*p.height/d.density);if(a>x.length)for(;a>x.length;){var b=new l;x.push(b)}else a<x.length&&x.splice(a);for(i=x.length-1;i>=0;i–)x[i].setStackPos(i)}function j(){E=!0}function k(){E=!1,g()}function l(){switch(this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0,this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*p.width),y:Math.ceil(Math.random()*p.height)},this.speed={},d.directionX){case”left”:this.speed.x=+(-d.maxSpeedX+Math.random()*d.maxSpeedX-d.minSpeedX).toFixed(2);break;case”right”:this.speed.x=+(Math.random()*d.maxSpeedX+d.minSpeedX).toFixed(2);break;default:this.speed.x=+(-d.maxSpeedX/2+Math.random()*d.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?d.minSpeedX:-d.minSpeedX}switch(d.directionY){case”up”:this.speed.y=+(-d.maxSpeedY+Math.random()*d.maxSpeedY-d.minSpeedY).toFixed(2);break;case”down”:this.speed.y=+(Math.random()*d.maxSpeedY+d.minSpeedY).toFixed(2);break;default:this.speed.y=+(-d.maxSpeedY/2+Math.random()*d.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?d.minSpeedY:-d.minSpeedY}}function m(a,b){return b?void(d[a]=b):d[a]}function n(){v.find(“.pg-canvas”).remove(),o(“onDestroy”),v.removeData(“plugin_”+c)}function o(a){void 0!==d[a]&&d[a].call(u)}var p,q,r,s,t,u=b,v=a(b),w=!!document.createElement(“canvas”).getContext,x=[],y=0,z=0,A=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),B=!!window.DeviceOrientationEvent,C=0,D=0,E=!1;return d=a.extend({},a.fn[c].defaults,d),l.prototype.draw=function(){q.beginPath(),q.arc(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY,d.particleRadius/2,0,2*Math.PI,!0),q.closePath(),q.fill(),q.beginPath();for(var a=x.length-1;a>this.stackPos;a–){var b=x[a],c=this.position.x-b.position.x,e=this.position.y-b.position.y,f=Math.sqrt(c*c+e*e).toFixed(2);f<d.proximity&&(q.moveTo(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY),d.curvedLines?q.quadraticCurveTo(Math.max(b.position.x,b.position.x),Math.min(b.position.y,b.position.y),b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY):q.lineTo(b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY))}q.stroke(),q.closePath()},l.prototype.updatePosition=function(){if(d.parallax){if(B&&!A){var a=(s-0)/60;pointerX=(C- -30)*a+0;var b=(t-0)/60;pointerY=(D- -30)*b+0}else pointerX=y,pointerY=z;this.parallaxTargX=(pointerX-s/2)/(d.parallaxMultiplier*this.layer),this.parallaxOffsetX+=(this.parallaxTargX-this.parallaxOffsetX)/10,this.parallaxTargY=(pointerY-t/2)/(d.parallaxMultiplier*this.layer),this.parallaxOffsetY+=(this.parallaxTargY-this.parallaxOffsetY)/10}switch(d.directionX){case”left”:this.position.x+this.speed.x+this.parallaxOffsetX<0&&(this.position.x=v.width()-this.parallaxOffsetX);break;case”right”:this.position.x+this.speed.x+this.parallaxOffsetX>v.width()&&(this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>v.width()||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)}switch(d.directionY){case”up”:this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=v.height()-this.parallaxOffsetY);break;case”down”:this.position.y+this.speed.y+this.parallaxOffsetY>v.height()&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>v.height()||this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},l.prototype.setStackPos=function(a){this.stackPos=a},e(),{option:m,destroy:n,start:k,pause:j}}var c=”particleground”;a.fn[c]=function(d){if(“string”==typeof arguments[0]){var e,f=arguments[0],g=Array.prototype.slice.call(arguments,1);return this.each(function(){a.data(this,”plugin_”+c)&&”function”==typeof a.data(this,”plugin_”+c)[f]&&(e=a.data(this,”plugin_”+c)[f].apply(this,g))}),void 0!==e?e:this}return”object”!=typeof d&&d?void 0:this.each(function(){a.data(this,”plugin_”+c)||a.data(this,”plugin_”+c,new b(this,d))})},a.fn[c].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7,directionX:”center”,directionY:”center”,density:1e4,dotColor:”#666666″,lineColor:”#666666″,particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,onInit:function(){},onDestroy:function(){}}}(<a href="https://www.rokub.com/category/jquery" title="jquery" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">jquery</a>),/** * requestAnimationFrame polyfill by Erik M枚ller. fixes from Paul Irish and Tino Zijdel * @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ * @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating * @license: MIT license */ function(){for(var a=0,b=[“ms”,”moz”,”webkit”,”o”],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+”RequestAnimationFrame”],window.cancelAnimationFrame=window[b[c]+”CancelAnimationFrame”]||window[b[c]+”CancelRequestAnimationFrame”];window.requestAnimationFrame||(window.requestAnimationFrame=function(b){var c=(new Date).getTime(),d=Math.max(0,16-(c-a)),e=window.setTimeout(function(){b(c+d)},d);return a=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)})}(); function showCheck(a){ var c = document.getElementById(“myCanvas”); var ctx = c.getContext(“2d”); ctx.clearRect(0,0,1000,1000); ctx.font = “80px ‘Microsoft Yahei'”; ctx.fillText(a,0,100); ctx.fillStyle = “white”; } var code ; function createCode(){ code = “”; var codeLength = 4; var selectChar = new Array(1,2,3,4,5,6,7,8,9,’a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’,’j’,’k’,’l’,’m’,’n’,’p’,’q’,’r’,’s’,’t’,’u’,’v’,’w’,’x’,’y’,’z’,’A’,’B’,’C’,’D’,’E’,’F’,’G’,’H’,’J’,’K’,’L’,’M’,’N’,’P’,’Q’,’R’,’S’,’T’,’U’,’V’,’W’,’X’,’Y’,’Z’); for(var i=0;i<codeLength;i++) { var charIndex = Math.floor(Math.random()*60); code +=selectChar[charIndex]; } if(code.length != codeLength){ createCode(); } showCheck(code); } function validate () { var inputCode = document.getElementById(“J_codetext”).value.toUpperCase(); var codeToUp=code.toUpperCase(); if(inputCode.length <=0) { document.getElementById(“J_codetext”).setAttribute(“placeholder”,”输入验证码”); createCode(); return false; } else if(inputCode != codeToUp ){ document.getElementById(“J_codetext”).value=””; document.getElementById(“J_codetext”).setAttribute(“placeholder”,”验证码错误”); createCode(); return false; } else { window.open(document.getElementById(“J_down”).getAttribute(“data-link”)); document.getElementById(“J_codetext”).value=””; createCode(); return true; } } </script> </html>

网站前端开发_前端开发者丨前端资源

https://www.rokub.com

» 本文来自：前端开发者 » 《新鲜的登录注册方案_网站前端开发_前端开发者》

» 本文链接地址：https://www.rokub.com/2506.html

» 您也可以订阅本站：https://www.rokub.com