开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 6044|回复: 3
收起左侧

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

[复制链接]

结帖率:88% (43/49)
发表于 2019-6-25 15:22:11 | 显示全部楼层 |阅读模式   山东省烟台市
突然间论坛冒出了OPENCV的帖子最近在学习H5,发现论坛没有这个区,
发一个今天刚刚写的登录页面吧。
很简单CSS JS HTML都在里面,加起来一百来行。
2345截图20190625152130.png






  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         * {
  8.                                 margin: 0px;
  9.                         }

  10.                         #content {
  11.                                 margin: 150px auto;
  12.                                 width: 100%;
  13.                                 height: 460px;
  14.                                 border: 1px transparent solid;
  15.                                 background-color: #21D4FD;
  16.                                 background-image: linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);
  17.                                 background-image: -webkit-linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);
  18.                                 background-image: -moz-linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);
  19.                                 background-image: -o-linear-gradient(243deg, #21D4FD 0%, #B721FF 100%);
  20.                         }

  21.                         #box {
  22.                                 margin: 50px auto;
  23.                                 width: 30%;
  24.                                 height: 360px;
  25.                                 background-color: #fff;
  26.                                 text-align: center;
  27.                                 border-radius: 15px;
  28.                                 border: 2px #fff solid;
  29.                                 box-shadow: 10px 10px 5px #000000;
  30.                         }

  31.                         .title {
  32.                                 line-height: 58px;
  33.                                 margin-top: 20px;
  34.                                 font-size: 36px;
  35.                                 color: #000;
  36.                                 height: 58px;
  37.                         }

  38.                         #box:hover {
  39.                                 border: 2px #fff solid;
  40.                         }

  41.                         .input {
  42.                                 margin-top: 20px;
  43.                         }

  44.                         input {
  45.                                 margin-top: 5px;
  46.                                 outline-style: none;
  47.                                 border: 1px solid #ccc;
  48.                                 border-radius: 3px;
  49.                                 padding: 13px 14px;
  50.                                 width: 70%;
  51.                                 font-size: 14px;
  52.                                 font-weight: 700;
  53.                                 font-family: "Microsoft soft";
  54.                         }

  55.                         button {
  56.                                 margin-top: 20px;
  57.                                 border: none;
  58.                                 color: #000;
  59.                                 padding: 15px 32px;
  60.                                 text-align: center;
  61.                                 text-decoration: none;
  62.                                 display: inline-block;
  63.                                 font-size: 16px;
  64.                                 border-radius: 15px;
  65.                                 background-color: #CCCCCC;
  66.                         }
  67.                         button:hover{
  68.                                 background-color: #B721FF;
  69.                                 color: #fff;
  70.                         }
  71.                 </style>
  72.         </head>
  73.         <body>
  74.                 <div id="content">
  75.                         <div id="box">
  76.                                 <div class="title">Login</div>
  77.                                 <div class="input">
  78.                                         <input type="text" id="username" value="" placeholder="用户名" />
  79.                                         <br>
  80.                                         <input type="password" id="password" placeholder="密码" />
  81.                                         <br>
  82.                                         <input type="password" id="password1" placeholder="再次输入" />
  83.                                         <br>
  84.                                         <button type="button" onclick="getuser()">登录</button>
  85.                                 </div>
  86.                         </div>
  87.                 </div>

  88.         </body>
  89.         <script type="text/javascript">
  90.                 function getuser() {
  91.                         var username = document.getElementById("username").value;
  92.                         var password = document.getElementById("password").value;
  93.                         var password1 = document.getElementById("password1").value;
  94.                         testing(username, password,password1)
  95.                         //alert("username:"+username+"\n"+"password:"+password);
  96.                 }

  97.                 function testing(username, password, password1) {
  98.                         var tmp = username && password;
  99.                         if (tmp == "") {
  100.                                 alert("请填写完整信息");
  101.                                 return 0;
  102.                         }
  103.                         if (username.length < 6 || username.length > 16) {
  104.                                 alert("用户名长度为:6-16位")
  105.                                 return 0;
  106.                         }
  107.                         if (password<6 || password1<6)
  108.                         {
  109.                                 alert("密码长度错误");
  110.                         }else if(password == password1){
  111.                                 alert("username:" + username + "\n" + "password:" + password);
  112.                         }else{
  113.                                 alert("两次输入的密码不一样");
  114.                         }
  115.                 }
  116.         </script>
  117. </html>
复制代码


评分

参与人数 1好评 +1 收起 理由
1301ok + 1 支持开源~!感谢分享

查看全部评分

结帖率:88% (43/49)

签到天数: 3 天

 楼主| 发表于 2019-7-2 10:47:44 | 显示全部楼层   江西省南昌市
TBit 发表于 2019-6-30 09:28
楼主用的什么ide

hbulider  VS code
回复 支持 反对

使用道具 举报

结帖率:100% (17/17)

签到天数: 28 天

发表于 2019-6-30 09:28:42 | 显示全部楼层   山东省青岛市
楼主用的什么ide
回复 支持 反对

使用道具 举报

结帖率:61% (35/57)
发表于 2019-6-25 16:02:03 | 显示全部楼层   海南省海口市
曾经花了2年时间学的H5 ···············
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 诚聘英才| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 800073686,邮箱:800073686@b.qq.com
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表