100行代码实现美观的H5自适应登录页面

浅浅` · 发表于 2019-6-25 15:22:11

突然间论坛冒出了OPENCV的帖子最近在学习H5，发现论坛没有这个区，
发一个今天刚刚写的登录页面吧。
很简单CSS JS HTML都在里面，加起来一百来行。
2345截图20190625152130.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
}
#content {
margin: 150px auto;
width: 100%;
height: 460px;
border: 1px transparent solid;
background-color: #21D4FD;
background-image: linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);
background-image: -webkit-linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);
background-image: -moz-linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);
background-image: -o-linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);
}
#box {
margin: 50px auto;
width: 30%;
height: 360px;
background-color: #fff;
text-align: center;
border-radius: 15px;
border: 2px #fff solid;
box-shadow: 10px 10px 5px #000000;
}
.title {
line-height: 58px;
margin-top: 20px;
font-size: 36px;
color: #000;
height: 58px;
}
#box:hover {
border: 2px #fff solid;
}
.input {
margin-top: 20px;
}
input {
margin-top: 5px;
outline-style: none;
border: 1px solid #ccc;
border-radius: 3px;
padding: 13px 14px;
width: 70%;
font-size: 14px;
font-weight: 700;
font-family: "Microsoft soft";
}
button {
margin-top: 20px;
border: none;
color: #000;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 15px;
background-color: #CCCCCC;
}
button:hover{
background-color: #B721FF;
color: #fff;
}
</style>
</head>
<body>
<div id="content">
<div id="box">
<div class="title">Login</div>
<div class="input">
<input type="text" id="username" value="" placeholder="用户名" />
<br>
<input type="password" id="password" placeholder="密码" />
<br>
<input type="password" id="password1" placeholder="再次输入" />
<br>
<button type="button" onclick="getuser()">登录</button>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function getuser() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var password1 = document.getElementById("password1").value;
testing(username, password,password1)
//alert("username:"+username+"\n"+"password:"+password);
}
function testing(username, password, password1) {
var tmp = username && password;
if (tmp == "") {
alert("请填写完整信息");
return 0;
}
if (username.length < 6 || username.length > 16) {
alert("用户名长度为：6-16位")
return 0;
}
if (password<6 || password1<6)
{
alert("密码长度错误");
}else if(password == password1){
alert("username:" + username + "\n" + "password:" + password);
}else{
alert("两次输入的密码不一样");
}
}
</script>
</html>

复制代码

浅浅` · 发表于 2019-7-2 10:47:44

TBit 发表于 2019-6-30 09:28
楼主用的什么ide

hbulider VS code

TBit · 发表于 2019-6-30 09:28:42

楼主用的什么ide

ㄣ负二代 · 发表于 2019-6-25 16:02:03

曾经花了2年时间学的H5 ···············

		自动登录	找回密码
密码			注册

[JS例程分享] 100行代码实现美观的H5自适应登录页面

评分

[JS例程分享] 100行代码 实现美观的H5自适应登录页面

评分

[JS例程分享] 100行代码实现美观的H5自适应登录页面