前端案例练习
（html+css+js)
题目描述：
js部分代码：
<script type="text/javascript">
function ffff(){
var qqq =document.getElementById('ttt').value;//通过id获取内容
var www =qqq.length;
if(www!=11)
{
alert('输入的电话号码不符合标准');
}
else{
var date =new Date();
var year =date.getFullYear();
var month =date.getMonth()+1;
var date1=date.getDate();
var hour = date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();
var arr =['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day =date.getDay();
document.write('今天是'+year+'年'+month+'月'+date1+'日'+arr[day]+hour+'小时'+min+'分钟'+sec+'秒');
}
}
</script>
html部分代码：
<body>
<div class="page">
<div class="panel">
<div class="panel_visible">
<div class="panel_content">
<h1 class="panel_title" style="text-align: center; color:palevioletred">用户注册页面 </h1>
<form class="form" method="POST">
<label class="form_label" for="username">Username</label>
<input class="form_input" type="text" id="username" name="username">
<label class="form_label" for="password">Password</label>
<input class="form_input " type="password" name="password">
<label class="form_label" for="e-mail">E-mail</label>
<input class="form_input " type="e-mail" id="e-mail" name="e-mail">
<label class="form_label" for=" Telephone" >Telephone</label>
<input class="form_input" type="text" name="full" id="ttt">
<label for="gender" id="gender" name='gender' class="form_label">Gender 女<input type="checkbox"> 男 <input type="checkbox"></label><br>
<button onclick="ffff()" class="form_input" name="full" >Submit</button>
<button class="form_btn" type="reset">重置按钮</button>
</form>
</div>
</div>
</div>
</div>
</body>
css部分代码：
body, html{
font-family: Ariel, sans-serif;
width:100%;
height:100%;
margin:0;
padding:0;
display:inline-block;
}
.page{
display:flex;
flex-flow:row;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
width:100%;
height:100%;
background-image:url('4-256.jpg') ;
}
.panel{
display:inline-block;
position:relative;
}
.panel_visible{
position:relative;
overflow: hidden;
}
.panel_title{
margin-top: .5em;
margin-bottom: 1.2em;
}
.panel_content{
padding: 20px;
background-color: white;
z-index:10;
position:relative;
}
.panel_content-overlay{
position:absolute;
top:0;
left:100%;
height:100%;
}
.panel_content.animate{
animation: movePanel 2s forwards ;
}
@keyframes movePanel{
0%, 30%{
transform: translateX(0%);
}
35%, 100%{
transform: translateX(-100%);
}
}
.panel_content.animateOut{
animation: movePanelOut 2s forwards ;
}
@keyframes movePanelOut{
0%, 30%{
transform: translateX(-100%);
}
35%, 100%{
transform: translateX(0%);
}
}
.panel_back{
position:absolute;
z-index:0;
top:50%;
left: 0;
width:110%;
transform: translate(70%,-50%);
}
.panel_back.animate{
animation: move 2s forwards ;
}
@keyframes move{
0%{
transform: translate(70%,-50%);
z-index:0;
}
15%{
transform: translate(140%,-50%);
z-index:10;
}
75%{
transform: translate(-120%,-50%);
z-index:10;
}
100%{
transform: translate(-50%,-50%);
z-index:0;
}
}
.panel_back.animateOut{
transform: translate(-50%,-50%);
animation: moveOut 2s forwards ;
}
@keyframes moveOut{
0%{
transform: translate(-50%,-50%);
z-index:0;
}
15%{
transform: translate(-120%,-50%);
z-index:10;
}
75%{
transform: translate(140%,-50%);
z-index:10;
}
100%{
transform: translate(70%,-50%);
z-index:0;
}
}
.panel_img{
width:100%;
display:block;
}
/* Form */
.form{
box-sizing:border-box;
}
.form_label{
display:block;
color: #3D3D3D;
font-weight: 600;
margin-bottom: 5px;
}
.form_input{
border-radius: 3px;
background-color: #f2f2f2 ;
box-shadow: 0px 2px 2px #D6D6D6;
border:none;
padding: 2%;
margin-bottom: 15px;
width: 250px;
box-sizing:border-box;
position:relative;
}
.form_input:focus{
box-shadow: none;
outline-color: #33A192;
}
.form_input::after{
/* TODO: make this after portion work */
position:absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
background-color: red;
}
.form_btn{
margin-top: 1.2em;
margin-bottom: 2em;
display:block;
width:100%;
background-image: url('4-255.jpg');
color: white;
border:none;
padding: .6em;
text-transform: uppercase;
font-weight: 500;
font-size: 1.1em;
border-radius: 3px;
cursor: pointer;
}
.form_toggle{
background-color: transparent;
border: none;
padding: 0;
margin:0;
font-size: 1.1em;
box-sizing: border-box;
border-bottom: 1px solid transparent;
cursor: pointer;
}
.form_toggle:hover{
border-bottom: 1px solid #a13733;
}
.form_toggle:focus{
outline: none;
border-bottom: 1px solid #a13373;
}
以下为效果图显示：