first commit
This commit is contained in:
+9
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
Generated
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptSettings">
|
||||
<option name="languageLevel" value="ES6" />
|
||||
</component>
|
||||
</project>
|
||||
Generated
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/Mystore(html) - 副本.iml" filepath="$PROJECT_DIR$/.idea/Mystore(html) - 副本.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
Generated
+94
@@ -0,0 +1,94 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="70478a5d-0714-4a17-88b2-a7440bd4ae85" name="Default Changelist" comment="" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="HTML File" />
|
||||
<option value="JavaScript File" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="ProjectId" id="1YFnrk0LN21CzV6ufC47qkeQBae" />
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showExcludedFiles" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="DefaultHtmlFileTemplate" value="HTML File" />
|
||||
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
|
||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||
<property name="aspect.path.notification.shown" value="true" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$/images" />
|
||||
<property name="node.js.detected.package.eslint" value="true" />
|
||||
<property name="node.js.detected.package.tslint" value="true" />
|
||||
<property name="node.js.path.for.package.eslint" value="project" />
|
||||
<property name="node.js.path.for.package.tslint" value="project" />
|
||||
<property name="node.js.selected.package.eslint" value="(autodetect)" />
|
||||
<property name="node.js.selected.package.tslint" value="(autodetect)" />
|
||||
<property name="project.structure.last.edited" value="Modules" />
|
||||
<property name="project.structure.proportion" value="0.0" />
|
||||
<property name="project.structure.side.proportion" value="0.0" />
|
||||
<property name="settings.editor.selected.configurable" value="preferences.keymap" />
|
||||
</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
<recent name="E:\Intellij_workplace\Mystore(html) - 副本\images" />
|
||||
<recent name="E:\Intellij_workplace\Mystore(html) - 副本" />
|
||||
</key>
|
||||
</component>
|
||||
<component name="SvnConfiguration">
|
||||
<configuration />
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="70478a5d-0714-4a17-88b2-a7440bd4ae85" name="Default Changelist" comment="" />
|
||||
<created>1582547410868</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1582547410868</updated>
|
||||
<workItem from="1582547414538" duration="125000" />
|
||||
<workItem from="1583146067510" duration="6590000" />
|
||||
<workItem from="1584353068566" duration="13537000" />
|
||||
<workItem from="1584415454291" duration="1209000" />
|
||||
<workItem from="1584416695673" duration="13249000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="1" />
|
||||
</component>
|
||||
<component name="WindowStateProjectService">
|
||||
<state x="0" y="74" key="#Project_Structure" timestamp="1582547418732">
|
||||
<screen x="0" y="0" width="1536" height="824" />
|
||||
</state>
|
||||
<state x="0" y="74" key="#Project_Structure/0.0.1536.824@0.0.1536.824" timestamp="1582547418732" />
|
||||
<state x="156" y="170" key="FileChooserDialogImpl" timestamp="1582547523423">
|
||||
<screen x="0" y="0" width="1536" height="824" />
|
||||
</state>
|
||||
<state x="156" y="170" key="FileChooserDialogImpl/0.0.1536.824@0.0.1536.824" timestamp="1582547523423" />
|
||||
<state x="15" y="116" key="NewModule_or_Project.wizard" timestamp="1582547536480">
|
||||
<screen x="0" y="0" width="1536" height="824" />
|
||||
</state>
|
||||
<state x="15" y="116" key="NewModule_or_Project.wizard/0.0.1536.824@0.0.1536.824" timestamp="1582547536480" />
|
||||
<state x="272" y="57" key="SettingsEditor" timestamp="1583152114059">
|
||||
<screen x="0" y="0" width="1536" height="824" />
|
||||
</state>
|
||||
<state x="272" y="57" key="SettingsEditor/0.0.1536.824@0.0.1536.824" timestamp="1583152114059" />
|
||||
<state x="461" y="239" key="com.intellij.ide.util.TipDialog" timestamp="1584416703444">
|
||||
<screen x="0" y="0" width="1536" height="824" />
|
||||
</state>
|
||||
<state x="461" y="239" key="com.intellij.ide.util.TipDialog/0.0.1536.824@0.0.1536.824" timestamp="1584416703444" />
|
||||
<state x="431" y="145" width="672" height="678" key="search.everywhere.popup" timestamp="1584430511560">
|
||||
<screen x="0" y="0" width="1536" height="824" />
|
||||
</state>
|
||||
<state x="431" y="145" width="672" height="678" key="search.everywhere.popup/0.0.1536.824@0.0.1536.824" timestamp="1584430511560" />
|
||||
</component>
|
||||
</project>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<style>
|
||||
.all {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code {
|
||||
border: 1px solid black;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
/*background:url("img/bg.png");*/
|
||||
}
|
||||
|
||||
.change{
|
||||
position: absolute;
|
||||
left: 210px;
|
||||
bottom: 0;
|
||||
text-decoration: none;
|
||||
color: blue;
|
||||
}
|
||||
span{
|
||||
/*不设成inline-block无法旋转*/
|
||||
display: inline-block;
|
||||
}
|
||||
.userInput{
|
||||
margin-top: 4px;
|
||||
width: 160px;
|
||||
height: 25px;
|
||||
}
|
||||
.confirm{
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="all">
|
||||
<div class="code">
|
||||
</div>
|
||||
<a>看不清,换一张....</a>
|
||||
<input class="userInput"/>
|
||||
<button class="confirm">验证</button>
|
||||
<script type="text/javascript" src="js/code.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#bread_crumb{
|
||||
height: 44px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#bread_crumb .bread_center{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
#bread_crumb .bread_center a{
|
||||
color: black;
|
||||
}
|
||||
#detail{
|
||||
width: 1200px;
|
||||
height: 400px;
|
||||
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#detail .detail_image{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
flex: 1;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
#detail .detail_image img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#detail .detail_price{
|
||||
width: 700px;
|
||||
height: 400px;
|
||||
flex: 2;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
#detail .detail_price h3{
|
||||
font-size: 30px;
|
||||
color: #005aa0;
|
||||
}
|
||||
#detail .detail_price .goods_price{
|
||||
width: 80%;
|
||||
height: 80px;
|
||||
background: #f5f5f5;
|
||||
margin:10px 0;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
#detail .detail_price .goods_price .ori_price{
|
||||
font-size: 15px;
|
||||
color:gray;
|
||||
position: relative;
|
||||
}
|
||||
em{
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top:10px;
|
||||
}
|
||||
.yuan{
|
||||
color: orange;
|
||||
font-weight: bold;
|
||||
margin-left: 3px;
|
||||
}
|
||||
#detail .goods_count{
|
||||
margin-top: 20px;
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#detail .goods_count input{
|
||||
border: 1px solid gray;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#detail .goods_buy{
|
||||
margin-top: 50px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#detail .goods_buy input{
|
||||
padding: 5px 10px;
|
||||
color: whitesmoke;
|
||||
background: #f40;
|
||||
border: none;
|
||||
}
|
||||
#introduce{
|
||||
width: 1200px;
|
||||
min-height: 300px;
|
||||
background: red;
|
||||
margin: 20px auto;
|
||||
}
|
||||
#introduce h3{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
background: whitesmoke;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
#footer{
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#footer .copyright{
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#header{
|
||||
height: 210px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#header .header_top{
|
||||
height: 36px;
|
||||
background:#f5f5f5;
|
||||
}
|
||||
|
||||
#header .header_top_center{
|
||||
width: 1200px;
|
||||
height: 36px;
|
||||
margin: 0 auto;
|
||||
line-height: 36px;
|
||||
}
|
||||
#header .header_top_center .h_top_left{
|
||||
color: gray;
|
||||
font-size: 13px;
|
||||
float: left;
|
||||
height: 36px;
|
||||
}
|
||||
#header .header_top_center .h_top_right{
|
||||
color: gray;
|
||||
font-size: 13px;
|
||||
float: right;
|
||||
height: 36px;
|
||||
}
|
||||
#header .header_top_center.h_top_right a{
|
||||
color: #6c6c6c;
|
||||
margin: 0 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#header .header_center{
|
||||
height: 124px;
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_logo{
|
||||
width: 190px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_search{
|
||||
width: 815px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_code{
|
||||
width: 190px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .h_c_logo img{
|
||||
width: 200px;
|
||||
height:120px;
|
||||
margin-top:4px ;
|
||||
}
|
||||
|
||||
#header .h_c_search form{
|
||||
width: 650px;
|
||||
height: 40px;
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
#header .h_c_search form .t_input{
|
||||
width: 555px;
|
||||
height: 40px;
|
||||
border: 2px solid black;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#header .h_c_search form .t_button{
|
||||
width: 75px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
float: right;
|
||||
color: orange;
|
||||
margin-left: 5px;
|
||||
|
||||
|
||||
}
|
||||
#header .h_c_search .hot{
|
||||
margin-left: 80px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#header .h_c_search .hot a{
|
||||
color: #6c6c6c;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#header .h_c_search .hot a:hover{
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
#header .h_c_code img{
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
width: 140px;
|
||||
height: 110px;
|
||||
}
|
||||
#header .nav{
|
||||
width: 1200px;
|
||||
height: 44px;
|
||||
margin: 0 auto;
|
||||
background: darkslategrey;
|
||||
line-height: 44px;
|
||||
border-radius:8px 8px 8px 8px ;
|
||||
}
|
||||
#header .nav ul{
|
||||
list-style: none;
|
||||
width: 1200px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
}
|
||||
#header .nav ul li{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#header .nav ul li a{
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#header .nav ul li a:hover{
|
||||
font-size: 25px;
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
a{
|
||||
text-decoration:none ;
|
||||
}
|
||||
|
||||
/*Banner*/
|
||||
#ad{
|
||||
width:1060px;
|
||||
height:600px;
|
||||
position:relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*取消小圆点*/
|
||||
#ad li{
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#ad_img li{
|
||||
display:none;
|
||||
}
|
||||
|
||||
/*角落显示数字的ul*/
|
||||
#ad_num{
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
bottom:100px;
|
||||
right:10px;
|
||||
color:#FFF;
|
||||
}
|
||||
/*数字的浮动*/
|
||||
#ad_num li{
|
||||
border:#FFF solid 1px;
|
||||
float:left;
|
||||
margin:0px 5px;
|
||||
padding:3px 10px;
|
||||
}
|
||||
.numsover{
|
||||
background-color:#F08080;
|
||||
color:#F00;
|
||||
}
|
||||
|
||||
/*精选图片*/
|
||||
#ms{
|
||||
width: 1920px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
#ms .ms_top{
|
||||
width: 500px;
|
||||
height: 55px;
|
||||
/*-webkit-background-size: 1200px 55px;*/
|
||||
background-size: 1200px 55px;
|
||||
line-height: 55px;
|
||||
margin-left: 2px;
|
||||
border-top-right-radius: 20px;
|
||||
margin-top: 20px;
|
||||
background: gray;
|
||||
|
||||
}
|
||||
#ms .ms_top span{
|
||||
color: whitesmoke ;
|
||||
|
||||
}
|
||||
|
||||
#ms .ms_top span:first-child{
|
||||
font-weight: bold;
|
||||
margin: 0 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
#ms .ms_body{
|
||||
|
||||
width: 1900px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#ms .ms_body li{
|
||||
margin: 10px auto;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid darkgray;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
}
|
||||
#ms .ms_body li p.name{
|
||||
padding-left: 10px;
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
}
|
||||
#ms .ms_body li .photoby{
|
||||
padding-left: 400px;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
#ms .ms_body img{
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
cursor: pointer;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
#ms .ms_body img:hover{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
#ms .ms_body li .photoby img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/*设置图片左边*/
|
||||
|
||||
#ms .ms_body_left ul{
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*设置图片中间*/
|
||||
|
||||
#ms .ms_body_center ul{
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*设置页面右边*/
|
||||
|
||||
#ms .ms_body_right ul{
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#header{
|
||||
height: 88px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
#header .h_center{
|
||||
width: 1200px;
|
||||
height: 88px;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
#header .h_center img{
|
||||
float: left;
|
||||
height: 80px;
|
||||
width: 120px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#header .h_center p{
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 880px;
|
||||
font-size: 10px;
|
||||
border: 1px solid yellow;
|
||||
margin-top: 20px;
|
||||
margin-left: 80px;
|
||||
color: blue;
|
||||
background: pink;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#login_body{
|
||||
height: 600px;
|
||||
background-attachment: scroll;
|
||||
background-image: url("../images/banner/2.jpg");
|
||||
background-position: center;
|
||||
background-size: 1000px 600px;
|
||||
}
|
||||
#login_body .login_b_center{
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
#login_body .login_bg{
|
||||
width: 350px;
|
||||
height: 351px;
|
||||
background: rgba(255,255,255,0.9);
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 80px;
|
||||
padding: 30px;
|
||||
|
||||
}
|
||||
|
||||
#login div{
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#login span{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
background: red;
|
||||
float: left;
|
||||
border: 1px gray;
|
||||
}
|
||||
#login .userName span{
|
||||
background-image: url("../images/商城素材/userName_Icon.png");
|
||||
}
|
||||
#login .password span{
|
||||
background-image: url("../images/商城素材/password_Icon.png");
|
||||
}
|
||||
|
||||
#login input{
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
}
|
||||
#login .login_btn input{
|
||||
background-color: coral;
|
||||
width: 100px;
|
||||
border: none;
|
||||
color: whitesmoke;
|
||||
float: left;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#reset{
|
||||
/*注册按钮*/
|
||||
margin-left: 40px;
|
||||
background: coral;
|
||||
color: whitesmoke;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
|
||||
}
|
||||
#login .login_btn a:hover{
|
||||
color: blue;
|
||||
float: left;
|
||||
|
||||
}
|
||||
#login .forgot_password{
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
a{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
/*设置div样式的整体布局*/
|
||||
.page-icon{
|
||||
margin:20px 0 0 0;/*设置距离顶部20像素*/
|
||||
font-size:0;/*修复行内元素之间空隙间隔*/
|
||||
text-align:center;/*设置内容居中显示*/
|
||||
}
|
||||
|
||||
/*设置共有的的样式布局，主要是进行代码优化，提高运行效率*/
|
||||
.page-icon a,.page-disabled,.page-next{
|
||||
border:1px solid #ccc;
|
||||
border-radius:3px;
|
||||
padding:4px 10px 5px;
|
||||
font-size:14PX;/*修复行内元素之间空隙间隔*/
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
/*对 a 标签进行样式布局 */
|
||||
.page-icon a{
|
||||
text-decoration:none;/*取消链接的下划线*/
|
||||
color:#005aa0;
|
||||
}
|
||||
|
||||
.page-current{
|
||||
color:#ff6600;
|
||||
padding:4px 10px 5px;
|
||||
font-size:14PX;/*修复行内元素之间空隙间隔*/
|
||||
}
|
||||
|
||||
.page-disabled{
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
.page-next i,.page-disabled i{
|
||||
cursor:pointer;/*设置鼠标经过时的显示状态，这里设置的是显示状态为小手状态*/
|
||||
display:inline-block;/*设置显示的方式为行内块元素*/
|
||||
width:5px;
|
||||
height:9px;
|
||||
background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*获取图标的背景链接*/
|
||||
}
|
||||
.page-disabled i{
|
||||
background-position:-80px -608px;
|
||||
margin-right:3px;
|
||||
}
|
||||
|
||||
.page-next i{
|
||||
background-position:-62px -608px;
|
||||
margin-left:3px;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#reg_header{
|
||||
height: 110px;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 10px orange;
|
||||
}
|
||||
|
||||
#reg_header .reg_h_center{
|
||||
width: 1200px;
|
||||
height: 110px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
#reg_header .reg_h_left{
|
||||
height: 110px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#reg_header .reg_h_left img{
|
||||
height: 100px;
|
||||
width: 120px;
|
||||
float: left;
|
||||
}
|
||||
#reg_header .reg_h_left h3{
|
||||
float: left;
|
||||
margin-top: 80px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#reg_header .reg_h_right{
|
||||
height: 110px;
|
||||
flex: 1;
|
||||
padding-top: 50px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
|
||||
.reg_back {
|
||||
/*设置整体的尺寸、背景色、边距等*/
|
||||
width: 950px;
|
||||
height: 550px;
|
||||
border: 8px solid #eeeeee;
|
||||
background: white;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.reg_left {
|
||||
/*设置左浮动和外边距*/
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.reg_left > p:first-child {
|
||||
/*设置段落（新用户注册）颜色和字体大小*/
|
||||
color: gray;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reg_left > p:last-child {
|
||||
/*设置段落（USER REGISTER）颜色和字体大小*/
|
||||
color: #A6A6A6;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reg_center {
|
||||
/*设置中间的各种输入框等*/
|
||||
margin-top: 15px;
|
||||
float: left;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.reg_right {
|
||||
/*设置右边段落浮动和外间距*/
|
||||
float: right;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.reg_right > p:first-child {
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.reg_right p a {
|
||||
/*设置超链接（立即登录）颜色*/
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
.td_left {
|
||||
/*设置表单中字体对齐方式和宽度、高度*/
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
height: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.td_right {
|
||||
/*设置输入框内边距*/
|
||||
width: 450px;
|
||||
height: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#username ,#password,#Email, #rename ,#Telphone,#Birthday,#checkcode,#repassword{
|
||||
/*设置输入框大小和边框*/
|
||||
width: 250px;
|
||||
height: 30px;
|
||||
border: 1px solid #A4A4A4;
|
||||
/* 设置边框为圆角 */
|
||||
border-radius: 8px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
#checkcode{
|
||||
/*验证码宽度*/
|
||||
width: 100px;
|
||||
float: left;
|
||||
}
|
||||
span{
|
||||
/*不设成inline-block无法旋转*/
|
||||
display: inline-block;
|
||||
}
|
||||
/*=========================设置 验证码===============================*/
|
||||
|
||||
.code {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
float: left;
|
||||
background:url("../images/code_bg.png");
|
||||
}
|
||||
.change{
|
||||
/*margin-bottom: 0;*/
|
||||
padding-top: 500px;
|
||||
}
|
||||
.confirm{
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*==================================================================*/
|
||||
|
||||
#btn_sub{
|
||||
/*注册按钮*/
|
||||
margin-left: 100px;
|
||||
background: orangered;
|
||||
color: whitesmoke;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid gray ;
|
||||
}
|
||||
|
||||
#reset{
|
||||
/*注册按钮*/
|
||||
margin-left: 40px;
|
||||
background: orangered;
|
||||
color: whitesmoke;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid gray ;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.error{
|
||||
color:red;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-top: 0px;
|
||||
|
||||
}
|
||||
#td_sub{
|
||||
padding-left: 150px;
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>页面详情</title>
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
<link rel="stylesheet" href="css/header.css">
|
||||
<link rel="stylesheet" href="css/detail.css">
|
||||
<link rel="shortcut icon" href="images/camera.ico">
|
||||
<link rel="stylesheet" href="css/index1.1.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--头部-->
|
||||
<div id="header">
|
||||
<!--顶部 登录-->
|
||||
<div class="header_top">
|
||||
<!-- 中部 -->
|
||||
<div class="header_top_center">
|
||||
<!-- 中部左侧 -->
|
||||
<div class="h_top_left">
|
||||
欢迎来到未命名图库
|
||||
</div>
|
||||
<!-- 中部右侧-->
|
||||
<div class="h_top_right">
|
||||
<a href="login.html">登录</a>
|
||||
<a href="regist.html">免费注册</a>
|
||||
<a href="#">购物车</a>
|
||||
<a href="#">我的订单</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中部搜索-->
|
||||
<div class="header_center">
|
||||
<!-- 中部左边logo-->
|
||||
<div class="h_c_logo">
|
||||
<img src="images/logo.png" alt="">
|
||||
</div>
|
||||
<div class="h_c_search">
|
||||
<form action="#">
|
||||
<input type="text" placeholder="请输入..." class="t_input">
|
||||
<input type="submit" class="t_button" value="搜索">
|
||||
</form>
|
||||
|
||||
<div class="hot">
|
||||
<a href="#">山川</a>
|
||||
<a href="#">沙漠</a>
|
||||
<a href="#">星空</a>
|
||||
<a href="#">静物</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 中部右边二维码-->
|
||||
<div class="h_c_code">
|
||||
<img src="images/code.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!--底部导航 -->
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li><a href="index.html">首页</a></li>
|
||||
<li><a href="detail.html">最新图片</a></li>
|
||||
<li><a href="detail.html">最热图片</a></li>
|
||||
<li><a href="detail.html">山川湖海</a></li>
|
||||
<li><a href="detail.html">大漠孤烟</a></li>
|
||||
<li><a href="detail.html">人像精选</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--面包屑导航-->
|
||||
<!--<div id="bread_crumb">-->
|
||||
<!-- <div class="bread_center">-->
|
||||
<!-- <a href="1.0/index.html">首页</a>-->
|
||||
<!-- <small>></small>-->
|
||||
<!-- <a href="#">运动户外</a>-->
|
||||
<!-- <small>></small>-->
|
||||
<!-- <a href="#">运动服饰</a>-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--详情展示-->
|
||||
<!--精选图片-->
|
||||
<div id="ms">
|
||||
<div class="ms_top">
|
||||
<span>精选图片</span>
|
||||
<span>总有一副让你怦然心动</span>
|
||||
</div>
|
||||
<div class="ms_body">
|
||||
<div class="ms_body_left">
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/01.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/02.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/03.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/04.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/05.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ms_body_center">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/06.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/07.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/08.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/09.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/10.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ms_body_right">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/11.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/12.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/13.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/14.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/15.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--翻页按钮-->
|
||||
<div class="page-icon">
|
||||
<span class="page-disabled"><i></i>上一页</span>
|
||||
<span class="page-current">1</span>
|
||||
<a href="#">2</a>
|
||||
<a href="#">3</a>
|
||||
<a href="#">4</a>
|
||||
<a href="#">5</a>
|
||||
<a href="#">6</a>
|
||||
<a href="#">7</a>
|
||||
……
|
||||
<a href="#">...</a>
|
||||
<a href="#">10</a>
|
||||
<a class="page-next" href="#">下一页<i></i></a>
|
||||
</div>
|
||||
<!--尾部-->
|
||||
<div id="footer">
|
||||
<div class="link">
|
||||
<a href="">关于我们</a>
|
||||
|
|
||||
<a href="">联系我们</a>
|
||||
|
|
||||
<a href="">商家入驻</a>
|
||||
|
|
||||
<a href="">友情链接</a>
|
||||
|
|
||||
</div>
|
||||
<div class="copyright">
|
||||
Copyright © 1999 - 2020 LZH. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+9
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
Generated
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptSettings">
|
||||
<option name="languageLevel" value="ES6" />
|
||||
</component>
|
||||
</project>
|
||||
Generated
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/images.iml" filepath="$PROJECT_DIR$/.idea/images.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
Generated
+39
@@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="88cd3f76-f5ed-4246-882b-0821a8ed35c2" name="Default Changelist" comment="" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="ProjectId" id="1YLGhaAZkMQ0ODoXVFNPfAktHPU" />
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showExcludedFiles" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
|
||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||
<property name="aspect.path.notification.shown" value="true" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="SvnConfiguration">
|
||||
<configuration />
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="88cd3f76-f5ed-4246-882b-0821a8ed35c2" name="Default Changelist" comment="" />
|
||||
<created>1582714581017</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1582714581017</updated>
|
||||
<workItem from="1582714582533" duration="19000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="1" />
|
||||
</component>
|
||||
</project>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 833 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 678 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 840 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>未命名图库-首页</title>
|
||||
<!-- 设置标签图标-->
|
||||
<link rel="shortcut icon" href="images/camera.ico">
|
||||
<link rel="stylesheet" href="css/index1.1.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
<link rel="stylesheet" href="css/header.css">
|
||||
<link rel="stylesheet" href="css/goods_list.css">
|
||||
<link rel="stylesheet" href="css/next_page.css">
|
||||
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/photo.js"></script>
|
||||
<script>
|
||||
$(document).ready(function function_name() {
|
||||
changeImg()
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--头部-->
|
||||
<div id="header">
|
||||
<!--顶部 登录-->
|
||||
<div class="header_top">
|
||||
<!-- 中部 -->
|
||||
<div class="header_top_center">
|
||||
<!-- 中部左侧 -->
|
||||
<div class="h_top_left">
|
||||
欢迎来到未命名图库
|
||||
</div>
|
||||
<!-- 中部右侧-->
|
||||
<div class="h_top_right">
|
||||
<a href="login.html">登录</a>
|
||||
<a href="regist.html">免费注册</a>
|
||||
<a href="#">购物车</a>
|
||||
<a href="#">我的订单</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中部搜索-->
|
||||
<div class="header_center">
|
||||
<!-- 中部左边logo-->
|
||||
<div class="h_c_logo">
|
||||
<img src="images/logo.png" alt="">
|
||||
</div>
|
||||
<div class="h_c_search">
|
||||
<form action="#">
|
||||
<input type="text" placeholder="请输入..." class="t_input">
|
||||
<input type="submit" class="t_button" value="搜索">
|
||||
</form>
|
||||
|
||||
<div class="hot">
|
||||
<a href="#">山川</a>
|
||||
<a href="#">沙漠</a>
|
||||
<a href="#">星空</a>
|
||||
<a href="#">静物</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 中部右边二维码-->
|
||||
<div class="h_c_code">
|
||||
<img src="images/code.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!--底部导航 -->
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li><a href="index.html">首页</a></li>
|
||||
<li><a href="detail.html">最新图片</a></li>
|
||||
<li><a href="detail.html">最热图片</a></li>
|
||||
<li><a href="detail.html">山川湖海</a></li>
|
||||
<li><a href="detail.html">大漠孤烟</a></li>
|
||||
<li><a href="detail.html">人像精选</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--banner-->
|
||||
<div id="ad" style="text-align: center;">
|
||||
<ul id="ad_img" >
|
||||
<li><img src="images/banner/1.jpg" width="1100" height="600" /></li>
|
||||
<li><img src="images/banner/2.jpg" width="1100" height="600" /></li>
|
||||
<li><img src="images/banner/3.jpg" width="1100" height="600" /></li>
|
||||
<li><img src="images/banner/4.jpg" width="1100" height="600" /></li>
|
||||
<li><img src="images/banner/5.jpg" width="1100" height="600" /></li>
|
||||
</ul>
|
||||
|
||||
<ul id="ad_num">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<!--<li>6</li>-->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!--精选图片-->
|
||||
<div id="ms">
|
||||
<div class="ms_top">
|
||||
<span>精选图片</span>
|
||||
<span>总有一副让你怦然心动</span>
|
||||
</div>
|
||||
<div class="ms_body">
|
||||
<div class="ms_body_left">
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/01.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/02.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/03.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/04.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/05.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ms_body_center">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/06.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/07.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/08.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/09.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/10.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ms_body_right">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/11.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/12.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/13.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/14.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<img src="images/gallery/15.jpg" alt="">
|
||||
<p class="name">一个好听的名字</p>
|
||||
<div class="photoby">
|
||||
<img src="images/camera.jpg " width="10" height="10" alt=""/>
|
||||
<p>lzh</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--翻页按钮-->
|
||||
<div class="page-icon">
|
||||
<span class="page-disabled"><i></i>上一页</span>
|
||||
<span class="page-current">1</span>
|
||||
<a href="#">2</a>
|
||||
<a href="#">3</a>
|
||||
<a href="#">4</a>
|
||||
<a href="#">5</a>
|
||||
<a href="#">6</a>
|
||||
<a href="#">7</a>
|
||||
……
|
||||
<a href="#">...</a>
|
||||
<a href="#">10</a>
|
||||
<a class="page-next" href="#">下一页<i></i></a>
|
||||
</div>
|
||||
<!--尾部-->
|
||||
<div id="footer">
|
||||
<div class="link">
|
||||
<a href="">关于我们</a>
|
||||
|
|
||||
<a href="">联系我们</a>
|
||||
|
|
||||
<a href="">商家入驻</a>
|
||||
|
|
||||
<a href="">友情链接</a>
|
||||
|
|
||||
</div>
|
||||
<div class="copyright">
|
||||
Copyright © 1999 - 2020 LZH. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
function changeImg() {
|
||||
/*获取图片和索引的数组*/
|
||||
var $imgs = $("#ad_img li");
|
||||
var $nums = $("#ad_num li");
|
||||
|
||||
var isStop = false;
|
||||
var index = 0;
|
||||
|
||||
$nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
|
||||
$imgs.eq(index).show();
|
||||
|
||||
/*鼠标悬停在数字上的事件*/
|
||||
$nums.mouseover(function() {
|
||||
isStop = true;
|
||||
/*先把数字的背景改了*/
|
||||
$(this).addClass("numsover").siblings().removeClass("numsover");
|
||||
|
||||
/*图片的索引和数字的索引是对应的，所以获取当前的数字的索引就可以获得图片，从而对图片进行操作*/
|
||||
index = $nums.index(this);
|
||||
$imgs.eq(index).show("slow");
|
||||
$imgs.eq(index).siblings().hide("slow");
|
||||
}).mouseout(function() {
|
||||
isStop = false
|
||||
});
|
||||
/*设置循环*/
|
||||
setInterval(function() {
|
||||
if(isStop) return;
|
||||
if(index >= 5) index = -1;
|
||||
index++;
|
||||
$nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
|
||||
$imgs.eq(index).show("slow").siblings().hide("slow");
|
||||
|
||||
}, 3000);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
|
||||
var code = document.getElementsByClassName('code')[0];
|
||||
var aEle = document.getElementsByTagName("a")[0];
|
||||
var userInput = document.getElementById("checkcode");
|
||||
var confirm = document.getElementsByClassName("btn_sub")[0];
|
||||
var str1 = "";
|
||||
// conactStr();//初始化验证码
|
||||
window.onload = function () {
|
||||
//给表单绑定onclick事件
|
||||
conactStr();//初始化验证码
|
||||
document.getElementById("btn_sub").onclick = function () {
|
||||
if (checkUsername() && checkPassword() &&checkRePassword()&&checkEmail() && checkRename() && checkTelphone()&&checkCode()){
|
||||
alert("注册成功！");
|
||||
return true
|
||||
}
|
||||
};
|
||||
|
||||
//绑定初始化验证码事件
|
||||
aEle.onclick=function () {
|
||||
aEle.onclick = function () {
|
||||
str1="";
|
||||
code.innerHTML="";
|
||||
conactStr();
|
||||
};
|
||||
}
|
||||
|
||||
//给用户名和密码框、Email、姓名、手机号分别绑定离焦事件
|
||||
document.getElementById("username").onblur = checkUsername;
|
||||
document.getElementById("password").onblur = checkPassword;
|
||||
document.getElementById("repassword").onblur = checkRePassword;
|
||||
|
||||
document.getElementById("Email").onblur = checkEmail;
|
||||
document.getElementById("rename").onblur = checkRename;
|
||||
document.getElementById("Telphone").onblur = checkTelphone;
|
||||
// document.getElementById("checkcode").onblur = checkCode;
|
||||
}
|
||||
|
||||
|
||||
//校验用户名
|
||||
function checkUsername() {
|
||||
//获取用户名的值
|
||||
var username = document.getElementById("username").value;
|
||||
|
||||
//定义正则表达式
|
||||
var reg_username = /^([a-zA-Z0-9_-])/;
|
||||
//判断值是否符合正则表达式的规则
|
||||
var flag = reg_username.test(username);
|
||||
|
||||
//提示信息
|
||||
var s_username = document.getElementById("s_username");
|
||||
|
||||
if (flag) {
|
||||
//提示绿色对勾
|
||||
s_username.innerHTML = "<img src='images/gou.png' width='35' height='25'>";
|
||||
} else {
|
||||
//提示红色错误信息
|
||||
s_username.innerHTML = "用户名格式有误！";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
//校验密码
|
||||
function checkPassword(){
|
||||
//1.获取密码的值
|
||||
var password = document.getElementById("password").value;
|
||||
//2.定义正则表达式
|
||||
var reg_password = /^\w{6,12}$/;
|
||||
//3.判断值是否符合正则的规则
|
||||
var flag = reg_password.test(password);
|
||||
//4.提示信息
|
||||
var s_password = document.getElementById("s_password");
|
||||
|
||||
if(flag){
|
||||
//提示绿色对勾
|
||||
s_password.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_password.innerHTML = "密码格式有误";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
//校验确认密码
|
||||
function checkRePassword(){
|
||||
//1.获取密码的值
|
||||
var password = document.getElementById("password").value;
|
||||
var repassword = document.getElementById("repassword").value;
|
||||
|
||||
|
||||
|
||||
if(repassword===password && repassword!=""){
|
||||
//提示绿色对勾
|
||||
s_repassword.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
return true
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_repassword.innerHTML = "两次密码输入不一致！";
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
//校验Email
|
||||
function checkEmail(){
|
||||
//1.获取Email的值
|
||||
var email = document.getElementById("Email").value;
|
||||
//2.定义正则表达式
|
||||
var reg_email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
|
||||
//3.判断值是否符合正则的规则
|
||||
var flag = reg_email.test(email);
|
||||
//4.提示信息
|
||||
var s_email = document.getElementById("s_email");
|
||||
|
||||
if(flag){
|
||||
//提示绿色对勾
|
||||
s_email.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_email.innerHTML = "Email格式有误";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
//校验真实姓名
|
||||
function checkRename(){
|
||||
//1.获取真实姓名的值
|
||||
var rename = document.getElementById("rename").value;
|
||||
//2.定义正则表达式
|
||||
var reg_rename = /^[\u4e00-\u9fa5]{2,4}$/;
|
||||
//3.判断值是否符合正则的规则
|
||||
var flag = reg_rename.test(rename);
|
||||
//4.提示信息
|
||||
var s_rename = document.getElementById("s_rename");
|
||||
|
||||
if(flag){
|
||||
//提示绿色对勾
|
||||
s_rename.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_rename.innerHTML = "真实姓名输入有误";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
//校验手机号
|
||||
function checkTelphone(){
|
||||
//1.获取手机号的值
|
||||
var telphone = document.getElementById("Telphone").value;
|
||||
//2.定义正则表达式
|
||||
var reg_telphone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
|
||||
//3.判断值是否符合正则的规则
|
||||
var flag = reg_telphone.test(telphone);
|
||||
//4.提示信息
|
||||
var s_telphone = document.getElementById("s_telphone");
|
||||
|
||||
if(flag){
|
||||
//提示绿色对勾
|
||||
s_telphone.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_telphone.innerHTML = "手机号输入有误";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
//检验验证码
|
||||
function checkCode() {
|
||||
var userContent = userInput.value;
|
||||
console.log(str1.toLowerCase());
|
||||
console.log(userContent.toLowerCase());
|
||||
if(userContent.toLowerCase()==str1.toLowerCase()){
|
||||
userInput.value="";
|
||||
return true
|
||||
}
|
||||
else{
|
||||
alert("验证码输入错误！");
|
||||
code.innerHTML="";
|
||||
str1="";
|
||||
conactStr();
|
||||
userInput.value="";
|
||||
return false
|
||||
}
|
||||
}
|
||||
//生成随机二维码
|
||||
function conactStr() {
|
||||
var str = "";
|
||||
var angle;
|
||||
var fontSize = "";
|
||||
var marginNum="";
|
||||
for (var i = 0; i < 4; i++) {
|
||||
|
||||
for(var j=0;j<6;j++){
|
||||
//生成随机颜色
|
||||
var pro = Math.random();
|
||||
if(pro<0.5){
|
||||
str += String.fromCharCode(Math.floor(Math.random() * 6) + 97)
|
||||
}else {
|
||||
str += Math.floor(Math.random()*10)
|
||||
}
|
||||
}
|
||||
//生成随机角度
|
||||
angle = Math.random()<0.5?-Math.random()*20-25:Math.random()*20+25;
|
||||
fontSize = Math.floor(Math.random()*10)+15+"px";
|
||||
marginNum=2+"px";
|
||||
str="#"+str;
|
||||
var spanEle = document.createElement("span");
|
||||
var probability = Math.random();
|
||||
if (probability <= 0.33) {
|
||||
spanEle.innerHTML = newChar("num")
|
||||
} else if (probability > 0.33 && probability <= 0.66) {
|
||||
spanEle.innerHTML = newChar("smallChar")
|
||||
} else {
|
||||
spanEle.innerHTML = newChar("bigChar")
|
||||
}
|
||||
spanEle.style.color=str;
|
||||
spanEle.style.transform="rotate("+angle+"deg)";
|
||||
// spanEle.style.margin="5px";
|
||||
spanEle.style.fontSize=fontSize;
|
||||
spanEle.style.margin=marginNum+" "+(parseInt(marginNum)+3)+"px 0";
|
||||
code.appendChild(spanEle);
|
||||
str="";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function newChar(flag) {
|
||||
var charEle = "";
|
||||
if (flag == "num") {
|
||||
charEle = String(Math.floor(Math.random() * 10));
|
||||
} else if (flag == "smallChar") {
|
||||
charEle = String.fromCharCode(Math.floor(Math.random() * 26) + 97)
|
||||
} else if (flag == "bigChar") {
|
||||
charEle = String.fromCharCode(Math.floor(Math.random() * 26) + 97).toUpperCase()
|
||||
}
|
||||
str1+=charEle;
|
||||
return charEle;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>登录</title>
|
||||
<link rel="shortcut icon" href="images/camera.ico">
|
||||
<link rel="stylesheet" href="css/login.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
<script type="text/javascript" src="js/regist.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--头部-->
|
||||
<div id="header">
|
||||
|
||||
<!--头部中间信息-->
|
||||
<div class="h_center">
|
||||
<img src="images/logo.png" alt="">
|
||||
<p>欢迎来到未命名图库：请先登录！</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--中部-->
|
||||
<div id="login_body">
|
||||
<div class="login_b_center">
|
||||
<div class="login_bg">
|
||||
<h1>密码登录</h1>
|
||||
<form action="#" id="login">
|
||||
|
||||
<!-- //用户名-->
|
||||
<div class="userName">
|
||||
<span></span><input type="text">
|
||||
</div>
|
||||
<!-- //密码-->
|
||||
<div class="password">
|
||||
<span></span><input type="password">
|
||||
</div>
|
||||
<!-- //登录按钮-->
|
||||
<div class="login_btn">
|
||||
<a href="index.html">
|
||||
<input type="button" value="登录">
|
||||
</a>
|
||||
<td colspan="2" align="center"><button id="reset" value="重置" onclick="remove()">取消</button></td>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="forgot_password">
|
||||
<a href="">忘记密码</a>
|
||||
<a href="regist.html">注册账号</a>
|
||||
<a href="regist.html">帮助</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--尾部-->
|
||||
<div id="footer">
|
||||
<div class="link">
|
||||
<a href="">关于我们</a>
|
||||
|
|
||||
<a href="">联系我们</a>
|
||||
|
|
||||
<a href="">商家入驻</a>
|
||||
|
|
||||
<a href="">友情链接</a>
|
||||
|
|
||||
</div>
|
||||
<div class="copyright">
|
||||
Copyright © 1999 - 2020 LZH. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>注册</title>
|
||||
|
||||
<link rel="stylesheet" href="css/regist.css">
|
||||
<link rel="shortcut icon" href="images/camera.ico">
|
||||
<script type="text/javascript" src="js/regist.js"></script>
|
||||
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--头部-->
|
||||
<div id="reg_header">
|
||||
<div class="reg_h_center">
|
||||
<div class="reg_h_left">
|
||||
<img src="images/logo.png" alt="">
|
||||
<h3>欢迎注册</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--表单内容-->
|
||||
<div class="reg_back">
|
||||
<div class="reg_left">
|
||||
<p>新用户注册</p>
|
||||
<p>USER REGISTER</p>
|
||||
</div>
|
||||
|
||||
<!-- 表单列表-->
|
||||
<div class="reg_center">
|
||||
<div class="reg_form">
|
||||
<form action="#" method="post" id="form">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="td_left"><label for="username">用户名</label></td>
|
||||
<td class="td_right"><input type="text" name="username" placeholder="请输入用户名"
|
||||
id="username">
|
||||
<span id="s_username" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="password">密码</label></td>
|
||||
<td class="td_right"><input type="password" name="password" placeholder="请输入密码(请设置6-12位字符)"
|
||||
id="password">
|
||||
<span id="s_password" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="repassword">确认密码</label></td>
|
||||
<td class="td_right"><input type="password" name="repassword" placeholder="请输入密码"
|
||||
id="repassword">
|
||||
<span id="s_repassword" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="email">Email</label></td>
|
||||
<td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email">
|
||||
<span id="s_email" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="rename">姓名</label></td>
|
||||
<td class="td_right"><input type="text" name="rename" placeholder="请输入真实姓名" id="rename">
|
||||
|
||||
<span id="s_rename" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="Telphone">手机号</label></td>
|
||||
<td class="td_right"><input type="text" name="telphone" placeholder="请输入您的手机号"
|
||||
id="Telphone">
|
||||
<span id="s_telphone" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label>性别</label></td>
|
||||
<td class="td_right"><input type="radio" name="gender" value="male" checked> 男
|
||||
<input type="radio" name="gender" value="female"> 女
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="Birthday">生日(选填)</label></td>
|
||||
<td class="td_right"><input type="date" name="birthday" id="Birthday"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="checkcode">验证码</label></td>
|
||||
<td class="td_right">
|
||||
<div class="all">
|
||||
<input type="text" name="checkcode" id="checkcode">
|
||||
<div class="code"></div>
|
||||
<a href="#" class="change">看不清，换一张</a>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
<tr>
|
||||
<td colspan="2" align="center">
|
||||
<button type="button" value="注册" id="btn_sub" onclick="submitForm()">注册</button>
|
||||
</td>
|
||||
|
||||
<td colspan="2" align="center">
|
||||
<button id="reset" value="重置" >重置</button>
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reg_right">
|
||||
<p>已有账号?<a href="login.html">立即登录</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="js/regist.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
#footer{
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#footer .copyright{
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#header{
|
||||
height: 210px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#header .header_top{
|
||||
height: 36px;
|
||||
background:#f5f5f5;
|
||||
}
|
||||
|
||||
#header .header_top_center{
|
||||
width: 1200px;
|
||||
height: 36px;
|
||||
margin: 0 auto;
|
||||
line-height: 36px;
|
||||
}
|
||||
#header .header_top_center .h_top_left{
|
||||
color: gray;
|
||||
font-size: 13px;
|
||||
float: left;
|
||||
height: 36px;
|
||||
}
|
||||
#header .header_top_center .h_top_right{
|
||||
color: gray;
|
||||
font-size: 13px;
|
||||
float: right;
|
||||
height: 36px;
|
||||
}
|
||||
#header .header_top_center.h_top_right a{
|
||||
color: #6c6c6c;
|
||||
margin: 0 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#header .header_center{
|
||||
height: 124px;
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_logo{
|
||||
width: 190px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_search{
|
||||
width: 815px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_code{
|
||||
width: 190px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .h_c_logo img{
|
||||
width: 200px;
|
||||
height:120px;
|
||||
margin-top:4px ;
|
||||
}
|
||||
|
||||
#header .h_c_search form{
|
||||
width: 650px;
|
||||
height: 40px;
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
#header .h_c_search form .t_input{
|
||||
width: 555px;
|
||||
height: 40px;
|
||||
border: 2px solid black;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#header .h_c_search form .t_button{
|
||||
width: 75px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
float: right;
|
||||
color: orange;
|
||||
margin-left: 5px;
|
||||
|
||||
|
||||
}
|
||||
#header .h_c_search .hot{
|
||||
margin-left: 80px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#header .h_c_search .hot a{
|
||||
color: #6c6c6c;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#header .h_c_search .hot a:hover{
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
#header .h_c_code img{
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
width: 140px;
|
||||
height: 110px;
|
||||
}
|
||||
#header .nav{
|
||||
width: 1200px;
|
||||
height: 44px;
|
||||
margin: 0 auto;
|
||||
background: darkslategrey;
|
||||
line-height: 44px;
|
||||
border-radius:8px 8px 8px 8px ;
|
||||
}
|
||||
#header .nav ul{
|
||||
list-style: none;
|
||||
width: 1200px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
}
|
||||
#header .nav ul li{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#header .nav ul li a{
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#header .nav ul li a:hover{
|
||||
font-size: 25px;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#reg_header{
|
||||
height: 110px;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 10px orange;
|
||||
}
|
||||
|
||||
#reg_header .reg_h_center{
|
||||
width: 1200px;
|
||||
height: 110px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
#reg_header .reg_h_left{
|
||||
height: 110px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#reg_header .reg_h_left img{
|
||||
height: 100px;
|
||||
width: 120px;
|
||||
float: left;
|
||||
}
|
||||
#reg_header .reg_h_left h3{
|
||||
float: left;
|
||||
margin-top: 80px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#reg_header .reg_h_right{
|
||||
height: 110px;
|
||||
flex: 1;
|
||||
padding-top: 50px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
|
||||
.reg_back {
|
||||
/*设置整体的尺寸、背景色、边距等*/
|
||||
width: 950px;
|
||||
height: 550px;
|
||||
border: 8px solid #eeeeee;
|
||||
background: white;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.reg_left {
|
||||
/*设置左浮动和外边距*/
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.reg_left > p:first-child {
|
||||
/*设置段落（新用户注册）颜色和字体大小*/
|
||||
color: gray;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reg_left > p:last-child {
|
||||
/*设置段落（USER REGISTER）颜色和字体大小*/
|
||||
color: #A6A6A6;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reg_center {
|
||||
/*设置中间的各种输入框等*/
|
||||
margin-top: 15px;
|
||||
float: left;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.reg_right {
|
||||
/*设置右边段落浮动和外间距*/
|
||||
float: right;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.reg_right > p:first-child {
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.reg_right p a {
|
||||
/*设置超链接（立即登录）颜色*/
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
.td_left {
|
||||
/*设置表单中字体对齐方式和宽度、高度*/
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
height: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.td_right {
|
||||
/*设置输入框内边距*/
|
||||
width: 450px;
|
||||
height: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#username ,#password,#Email, #rename ,#Telphone,#Birthday,#checkcode,#repassword{
|
||||
/*设置输入框大小和边框*/
|
||||
width: 250px;
|
||||
height: 30px;
|
||||
border: 1px solid #A4A4A4;
|
||||
/* 设置边框为圆角 */
|
||||
border-radius: 8px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
#checkcode{
|
||||
/*验证码宽度*/
|
||||
width: 100px;
|
||||
float: left;
|
||||
}
|
||||
span{
|
||||
/*不设成inline-block无法旋转*/
|
||||
display: inline-block;
|
||||
}
|
||||
/*=========================设置 验证码===============================*/
|
||||
|
||||
.code {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
float: left;
|
||||
background:url("../images/code_bg.png");
|
||||
}
|
||||
.change{
|
||||
/*margin-bottom: 0;*/
|
||||
padding-top: 500px;
|
||||
}
|
||||
.confirm{
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*==================================================================*/
|
||||
|
||||
#btn_sub{
|
||||
/*注册按钮*/
|
||||
margin-left: 100px;
|
||||
background: orangered;
|
||||
color: whitesmoke;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid gray ;
|
||||
}
|
||||
|
||||
#reset{
|
||||
/*注册按钮*/
|
||||
margin-left: 40px;
|
||||
background: orangered;
|
||||
color: whitesmoke;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid gray ;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.error{
|
||||
color:red;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-top: 0px;
|
||||
|
||||
}
|
||||
#td_sub{
|
||||
padding-left: 150px;
|
||||
}
|
||||
Generated
+9
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
Generated
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="JavaScriptSettings">
|
||||
<option name="languageLevel" value="ES6" />
|
||||
</component>
|
||||
</project>
|
||||
Generated
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/images.iml" filepath="$PROJECT_DIR$/.idea/images.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
Generated
+39
@@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="88cd3f76-f5ed-4246-882b-0821a8ed35c2" name="Default Changelist" comment="" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="ProjectId" id="1YLGhaAZkMQ0ODoXVFNPfAktHPU" />
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showExcludedFiles" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
|
||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||
<property name="aspect.path.notification.shown" value="true" />
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="SvnConfiguration">
|
||||
<configuration />
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="88cd3f76-f5ed-4246-882b-0821a8ed35c2" name="Default Changelist" comment="" />
|
||||
<created>1582714581017</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1582714581017</updated>
|
||||
<workItem from="1582714582533" duration="19000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="1" />
|
||||
</component>
|
||||
</project>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
@@ -0,0 +1,234 @@
|
||||
|
||||
var code = document.getElementsByClassName('code')[0];
|
||||
var aEle = document.getElementsByTagName("a")[0];
|
||||
var userInput = document.getElementById("checkcode");
|
||||
var confirm = document.getElementsByClassName("btn_sub")[0];
|
||||
var str1 = "";
|
||||
// conactStr();//初始化验证码
|
||||
window.onload = function () {
|
||||
//给表单绑定onclick事件
|
||||
conactStr();//初始化验证码
|
||||
document.getElementById("btn_sub").onclick = function () {
|
||||
if (checkUsername() && checkPassword() &&checkRePassword()&&checkEmail() && checkRename() && checkTelphone()&&checkCode()){
|
||||
alert("注册成功！");
|
||||
return true
|
||||
}
|
||||
};
|
||||
|
||||
//绑定初始化验证码事件
|
||||
aEle.onclick=function () {
|
||||
aEle.onclick = function () {
|
||||
str1="";
|
||||
code.innerHTML="";
|
||||
conactStr();
|
||||
};
|
||||
}
|
||||
|
||||
//给用户名和密码框、Email、姓名、手机号分别绑定离焦事件
|
||||
document.getElementById("username").onblur = checkUsername;
|
||||
document.getElementById("password").onblur = checkPassword;
|
||||
document.getElementById("repassword").onblur = checkRePassword;
|
||||
|
||||
document.getElementById("Email").onblur = checkEmail;
|
||||
document.getElementById("rename").onblur = checkRename;
|
||||
document.getElementById("Telphone").onblur = checkTelphone;
|
||||
// document.getElementById("checkcode").onblur = checkCode;
|
||||
}
|
||||
|
||||
|
||||
//校验用户名
|
||||
function checkUsername() {
|
||||
//获取用户名的值
|
||||
var username = document.getElementById("username").value;
|
||||
|
||||
//定义正则表达式
|
||||
var reg_username = /^([a-zA-Z0-9_-])/;
|
||||
//判断值是否符合正则表达式的规则
|
||||
var flag = reg_username.test(username);
|
||||
|
||||
//提示信息
|
||||
var s_username = document.getElementById("s_username");
|
||||
|
||||
if (flag) {
|
||||
//提示绿色对勾
|
||||
s_username.innerHTML = "<img src='images/gou.png' width='35' height='25'>";
|
||||
} else {
|
||||
//提示红色错误信息
|
||||
s_username.innerHTML = "用户名格式有误！";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
//校验密码
|
||||
function checkPassword(){
|
||||
//1.获取密码的值
|
||||
var password = document.getElementById("password").value;
|
||||
//2.定义正则表达式
|
||||
var reg_password = /^\w{6,12}$/;
|
||||
//3.判断值是否符合正则的规则
|
||||
var flag = reg_password.test(password);
|
||||
//4.提示信息
|
||||
var s_password = document.getElementById("s_password");
|
||||
|
||||
if(flag){
|
||||
//提示绿色对勾
|
||||
s_password.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_password.innerHTML = "密码格式有误";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
//校验确认密码
|
||||
function checkRePassword(){
|
||||
//1.获取密码的值
|
||||
var password = document.getElementById("password").value;
|
||||
var repassword = document.getElementById("repassword").value;
|
||||
|
||||
|
||||
|
||||
if(repassword===password && repassword!=""){
|
||||
//提示绿色对勾
|
||||
s_repassword.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
return true
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_repassword.innerHTML = "两次密码输入不一致！";
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
//校验Email
|
||||
function checkEmail(){
|
||||
//1.获取Email的值
|
||||
var email = document.getElementById("Email").value;
|
||||
//2.定义正则表达式
|
||||
var reg_email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
|
||||
//3.判断值是否符合正则的规则
|
||||
var flag = reg_email.test(email);
|
||||
//4.提示信息
|
||||
var s_email = document.getElementById("s_email");
|
||||
|
||||
if(flag){
|
||||
//提示绿色对勾
|
||||
s_email.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_email.innerHTML = "Email格式有误";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
//校验真实姓名
|
||||
function checkRename(){
|
||||
//1.获取真实姓名的值
|
||||
var rename = document.getElementById("rename").value;
|
||||
//2.定义正则表达式
|
||||
var reg_rename = /^[\u4e00-\u9fa5]{2,4}$/;
|
||||
//3.判断值是否符合正则的规则
|
||||
var flag = reg_rename.test(rename);
|
||||
//4.提示信息
|
||||
var s_rename = document.getElementById("s_rename");
|
||||
|
||||
if(flag){
|
||||
//提示绿色对勾
|
||||
s_rename.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_rename.innerHTML = "真实姓名输入有误";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
//校验手机号
|
||||
function checkTelphone(){
|
||||
//1.获取手机号的值
|
||||
var telphone = document.getElementById("Telphone").value;
|
||||
//2.定义正则表达式
|
||||
var reg_telphone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
|
||||
//3.判断值是否符合正则的规则
|
||||
var flag = reg_telphone.test(telphone);
|
||||
//4.提示信息
|
||||
var s_telphone = document.getElementById("s_telphone");
|
||||
|
||||
if(flag){
|
||||
//提示绿色对勾
|
||||
s_telphone.innerHTML = "<img width='35' height='25' src='images/gou.png'/>";
|
||||
}else{
|
||||
//提示红色错误信息
|
||||
s_telphone.innerHTML = "手机号输入有误";
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
//检验验证码
|
||||
function checkCode() {
|
||||
var userContent = userInput.value;
|
||||
console.log(str1.toLowerCase());
|
||||
console.log(userContent.toLowerCase());
|
||||
if(userContent.toLowerCase()==str1.toLowerCase()){
|
||||
userInput.value="";
|
||||
return true
|
||||
}
|
||||
else{
|
||||
alert("验证码输入错误！");
|
||||
code.innerHTML="";
|
||||
str1="";
|
||||
conactStr();
|
||||
userInput.value="";
|
||||
return false
|
||||
}
|
||||
}
|
||||
//生成随机二维码
|
||||
function conactStr() {
|
||||
var str = "";
|
||||
var angle;
|
||||
var fontSize = "";
|
||||
var marginNum="";
|
||||
for (var i = 0; i < 4; i++) {
|
||||
|
||||
for(var j=0;j<6;j++){
|
||||
//生成随机颜色
|
||||
var pro = Math.random();
|
||||
if(pro<0.5){
|
||||
str += String.fromCharCode(Math.floor(Math.random() * 6) + 97)
|
||||
}else {
|
||||
str += Math.floor(Math.random()*10)
|
||||
}
|
||||
}
|
||||
//生成随机角度
|
||||
angle = Math.random()<0.5?-Math.random()*20-25:Math.random()*20+25;
|
||||
fontSize = Math.floor(Math.random()*10)+15+"px";
|
||||
marginNum=2+"px";
|
||||
str="#"+str;
|
||||
var spanEle = document.createElement("span");
|
||||
var probability = Math.random();
|
||||
if (probability <= 0.33) {
|
||||
spanEle.innerHTML = newChar("num")
|
||||
} else if (probability > 0.33 && probability <= 0.66) {
|
||||
spanEle.innerHTML = newChar("smallChar")
|
||||
} else {
|
||||
spanEle.innerHTML = newChar("bigChar")
|
||||
}
|
||||
spanEle.style.color=str;
|
||||
spanEle.style.transform="rotate("+angle+"deg)";
|
||||
// spanEle.style.margin="5px";
|
||||
spanEle.style.fontSize=fontSize;
|
||||
spanEle.style.margin=marginNum+" "+(parseInt(marginNum)+3)+"px 0";
|
||||
code.appendChild(spanEle);
|
||||
str="";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function newChar(flag) {
|
||||
var charEle = "";
|
||||
if (flag == "num") {
|
||||
charEle = String(Math.floor(Math.random() * 10));
|
||||
} else if (flag == "smallChar") {
|
||||
charEle = String.fromCharCode(Math.floor(Math.random() * 26) + 97)
|
||||
} else if (flag == "bigChar") {
|
||||
charEle = String.fromCharCode(Math.floor(Math.random() * 26) + 97).toUpperCase()
|
||||
}
|
||||
str1+=charEle;
|
||||
return charEle;
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>注册</title>
|
||||
|
||||
<link rel="stylesheet" href="css/regist.css">
|
||||
<link rel="shortcut icon" href="images/camera.ico">
|
||||
<script type="text/javascript" src="js/regist.js"></script>
|
||||
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--头部-->
|
||||
<div id="reg_header">
|
||||
<div class="reg_h_center">
|
||||
<div class="reg_h_left">
|
||||
<img src="images/logo.png" alt="">
|
||||
<h3>欢迎注册</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--表单内容-->
|
||||
<div class="reg_back">
|
||||
<div class="reg_left">
|
||||
<p>新用户注册</p>
|
||||
<p>USER REGISTER</p>
|
||||
</div>
|
||||
|
||||
<!-- 表单列表-->
|
||||
<div class="reg_center">
|
||||
<div class="reg_form">
|
||||
<form action="#" method="post" id="form">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="td_left"><label for="username">用户名</label></td>
|
||||
<td class="td_right"><input type="text" name="username" placeholder="请输入用户名"
|
||||
id="username">
|
||||
<span id="s_username" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="password">密码</label></td>
|
||||
<td class="td_right"><input type="password" name="password" placeholder="请输入密码(请设置6-12位字符)"
|
||||
id="password">
|
||||
<span id="s_password" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="repassword">确认密码</label></td>
|
||||
<td class="td_right"><input type="password" name="repassword" placeholder="请输入密码"
|
||||
id="repassword">
|
||||
<span id="s_repassword" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="email">Email</label></td>
|
||||
<td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email">
|
||||
<span id="s_email" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="rename">姓名</label></td>
|
||||
<td class="td_right"><input type="text" name="rename" placeholder="请输入真实姓名" id="rename">
|
||||
|
||||
<span id="s_rename" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="Telphone">手机号</label></td>
|
||||
<td class="td_right"><input type="text" name="telphone" placeholder="请输入您的手机号"
|
||||
id="Telphone">
|
||||
<span id="s_telphone" class="error"></span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label>性别</label></td>
|
||||
<td class="td_right"><input type="radio" name="gender" value="male" checked> 男
|
||||
<input type="radio" name="gender" value="female"> 女
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="Birthday">生日(选填)</label></td>
|
||||
<td class="td_right"><input type="date" name="birthday" id="Birthday"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td_left"><label for="checkcode">验证码</label></td>
|
||||
<td class="td_right">
|
||||
<div class="all">
|
||||
<input type="text" name="checkcode" id="checkcode">
|
||||
<div class="code"></div>
|
||||
<a href="#" class="change">看不清，换一张</a>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
<tr>
|
||||
<td colspan="2" align="center">
|
||||
<button type="button" value="注册" id="btn_sub" onclick="submitForm()">注册</button>
|
||||
</td>
|
||||
|
||||
<td colspan="2" align="center">
|
||||
<button id="reset" value="重置" >重置</button>
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reg_right">
|
||||
<p>已有账号?<a href="login.html">立即登录</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="js/regist.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user