一百行代码实现的HTML5登录页面

今天开始写博客了，正在进行学校的h5实训，将实训作业发到博客上来记录一下。

<!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>

一百行代码实现的HTML5登录页面相关推荐

Python3， 19行代码，让微信登录页面地球转起来，涨见识了。
19行代码动态展示微信地图 1.引言 2.代码实战 2.1 思路 2.2 示例 2.2.1 经纬度 2.2.2 制作gif 3.总结 1.引言小屌丝:鱼哥, 最近在干啥嘞. 小鱼:干活呗, 不然能干 ...
react的导出是怎么实现的_不到一百行代码，我们来实现一个简简简简简简简简简简版react库...
good evening everybody!这是一篇关于react故事的文章,这个故事主要是讲在一个夜黑风高晚上,react从一个VDOM变成真实DOM的过程. 这个过程react经历了从JSX-& ...
示例 - 10行代码在C#中获取页面元素布局信息
最近研究一个如何在网页定位验证码并截图的问题时, 用SS写了一段C#小脚本可以轻松获取页面任意元素的布局信息 (top, left, width, height). 10行功能代码, 觉得有点用, 现 ...
一百行代码爬取漫画喵
小喵的唠叨话:这次的博客,讲的是使用python编写一个爬虫工具.为什么要写这个爬虫呢?原因是小喵在看完<极黑的布伦希尔特>这个动画之后,又想看看漫画,结果发现各大APP都没有资源,最终好 ...
python一百行代码多少钱_用86行Python代码模拟太阳系
Python代码模拟的太阳系,包括了水星(Mercury), 金星(Venus),地球(Earth),月球(Moon),火星(Mars) 上面的动画是我用86行Python代码模拟的一个比较真实的太阳 ...
c++获取子类窗口句柄位置_干货分享：用一百行代码做一个C/C++表白小程序，程序员的浪漫！...
前言:很多时候,当别人听到你是程序员的时候.第一印象就是,格子衫.不浪漫.直男.但是程序员一旦浪漫起来,真的没其他人什么事了.什么纪念日,生日,情人节,礼物怎么送? 做一个浪漫的程序给她,放上你们照片 ...
一百行代码实现微信朋友圈九宫格图片显示
前言很多时候我们都在刷微博或者微信朋友圈的时候都会看到很多图片,而这些图片的显示跟我们平时很多控件的显示方式都不一样,而且,当我们仔细去观察后就会发现,他加载的图片都是根据图片数量动态加载的 ...
Python：30行代码，使用POST登录山大的教务处系统（附完整源码）
一.抓包分析首先我们打开浏览器的开发者工具,随便输入一个用户名和密码登录,抓包分析: 显然,我们登录的时候发送了一个POST请求,而Data里面有六个数据,分别是rsa.ul.pl.lt.execu ...
零基础用一百行代码完成动态的人脸识别（opencv+python）
废话:(其实是介绍了一下该文章的大概来路) 电子化的时代到处都能看到人脸识别的用途:比如:刷脸门禁,火车站检票口,又比如检查站,还有一些比较高端的汽车还支持刷脸开门等等. 近期呢接了个学校的一个项 ...

一百行代码实现的HTML5登录页面

一百行代码实现的HTML5登录页面相关推荐

最新文章

热门文章