每日优鲜登陆布局login.html

最新推荐文章于 2024-07-12 16:42:46 发布
最新推荐文章于 2024-07-12 16:42:46 发布
阅读量281 收藏 1
点赞数
文章标签： json javascript ViewUI
原文链接：https://my.oschina.net/u/3584445/blog/1162468
版权

登陆login布局

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          body{

          }

        header{
          width: 100%;
          height:50px;
          background-color: rgb(218, 1, 107);
          position:relative;
        }

        header .left{
          position: absolute;
          width:22px;
          height:100%;
          left:8px;
          top:0;
          background: url('../image/back.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: 11px 20px;
        }
        header .center{
          width:100%;
          height:100%;
          line-height: 50px;
          text-align: center;
          color:#fff;
          font-size: 18px;
        }
        header .right{
          position: absolute;
          top:0;
          right: 18px;
          height: 100px;
          line-height: 50px;
          color: #fff;
          font-size: 20px;
        }
        .row{
          width:auto;
          box-sizing: border-box;
          height:70px;
          margin:0 32px;
          padding-top: 40px;
          padding-left: 8px;
          border-bottom: 1.5px solid #888;
        }
        .input{
          width: 100%;
          border: none;
          outline: none;
          font-size: 16px;
        }
        .btn{
          width:auto;
          height: 50px;
          background:  rgb(218, 1, 107);
          margin: 32px 32px;
          color:#fff;
          font-size: 25px;
          text-align: center;
          line-height: 50px;
          /*边间弧度*/
          border-radius: 10px;
        }
        .highlight{
          /*高量实现透明度*/
          opacity:  0.7;
        }
        .wxbtn{
          width:auto;
          height:45px;
          box-sizing: border-box;
          background: url('../image/share_friend.png');
          background-position:18px center;
          background-repeat: no-repeat;
          background-size: 25px 18px;
          margin:0px 90px;
          line-height: 50px;
          color:#888;
          font-size: 20px;
          border-top: 1px solid #aaa;
          border-bottom: 1px solid #aaa;
          border-left: 1px solid rgb(255, 225, 225);
          border-right: 1px solid rgb(255, 225, 225);
          border-radius: 8px;
          padding-left: 45px;

        }
      </style>
  </head>
  <body>
    <header id="header">
      <div class="left" tapmode οnclick="api.closeWin()"></div>
      <div class="center">会员登录</div>
      <div class="right" tapmode οnclick="toRegister()">注册</div>
    </header>

    <!--  注册界面    -->
    <div class="row">
      <input type="text" class="input" id="username" placeholder="用户名(不多于6位)" maxlength="6">
    </div>
    <div class="row">
      <input type="password" class="input" id="password" placeholder="密码" maxlength="16">
    </div>
    <div class="btn" tapmode="highlight" οnclick="toLogin()">登录</div>
    <div class="wxbtn" tapmode="highlight" >使用微信登录</div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){
        api.addEventListener({
            name: 'account'
        }, function(ret, err){
            if( ret ){
              updateAccount(ret.value.username)
                // alert( JSON.stringify( ret ) );
            }else{
                 alert( JSON.stringify( err ) );
            }
        });
      };
      function updateAccount(un){
        /*获取输入框*/
        var usrInput = $api.byId('username');
      //  alert(usrInput);
        /*更改*/
        usrInput.value = un;
      }
      /*登录实现*/
      var usrValue,passValue;
      function toLogin(){
        usrValue = $api.byId('username').value;
        passValue = $api.byId('password').value;
        if(!usrValue||!passValue){
          alert("请输入账号和密码！");
        }else{
          api.ajax({
              url: 'https://d.apicloud.com/mcm/api/user/login',
              method: 'post',
              "headers": {
                  "X-APICloud-AppId": "A6944685896647",
                  "X-APICloud-AppKey": "2854C996-B52C-9991-ED1D-0A8B8F4F7BA5"
              },
              data: {
                  values: {
                      "username": usrValue,
                      "password":passValue
                  }
              }
          },function(ret, err){
              if (ret) {
                alert(" 登录成功");
                  //alert( JSON.stringify( ret ) );
                  /*设置登陆的标记*/
                  $api.setStorage('logSuccess', usrValue);
                   /*返回主界面*/
                  api.closeWin();
              } else {
                  alert( JSON.stringify( err ) );
              }
          });

        }
      }
      /*注册界面*/
      function toRegister() {
        api.openWin({
            name: 'register',
            url: './register.html',
            pageParam: {
                name: 'test'
            }
        });


      }
  </script>
  </html>

转载于:https://my.oschina.net/u/3584445/blog/1162468

chengtangjian1797
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
login登录页面 html,login.html
weixin_39769039的博客
06-04 7143
loginfunction checkUserName() { //验证用户名var fname = document.myform.username.value;var reg = /^[0-9a-zA-Z]/;if (fname.length != 0) {for (i = 0; i < fname.length; i++) {if (!reg.test(fname)) {aler...
JSP登陆页 login.jsp
wetgsg的专栏
08-18 3782
一：JSP登陆页 login.jsp：       登录页 - Java教程:http://www.javaweb.cc          用户名：    密  码：              // 用户名：admin 密码:123    String name = request.getParameter("uname");
每日优鲜app静态页面
weixin_30732487的博客
03-17 382
1：header.left中，.arrow的div的大小是多少？为何后面跟着的.city是relative? 在自己凭记忆编码中，arrow和city的位置不对，通过调试得知，既然我已经将arrow设置为absolute，那么在给bottom的时候就应该为0，而不是21。如此解决了arrow位置不对的问题。那么对于city呢？我记忆中老师是用relative的啊而且记忆中width是100%！反...
APICloud开发每日优鲜项目实战
weixin_43611537的博客
03-21 1539
视频+源码 主要内容: APICloud平台介绍 1.1 查看APICloud平台能力 1.2 APICloud应用的开发模式和使用的技术语言 1.3 APICloud技术、产品、生态、案例、商业模式的总体介绍 1.4 APICloud开发者相关的服务支撑体系 1.5 新手应该如何开始入门APICloud应用开发 APICloud平台使用流程 2.1 APICloud云控制台使用 2.2...
生鲜水果电商app源码文件（Apicloud平台编译，可登录，注册，点击，购买等）
11-10
采用HTML5+PHP+JavaScript的标准Web语言开发iOS与Android原生App，数据库采用APICloud平台的云数据库，最后进行云编译进行发布。APP 的主要功能有： 浏览平台在售的新鲜水果，了解在售水果的相关文化；选择想要购买的水果品种和数量，收到水果之后可以发表评价；添加论坛模块，用户可以发表对平台的建议，对果园和水果的相关评论供其他人参考；个人界面中，用户可以修改自己的个人密码，查看和添加好友，查看和添加好友，查看个人账单记录，信用记录等一切和用户相关的信息。
每日优鲜小程序基础组件介绍
SAHADEV的专栏
09-29 2945
每日优鲜小程序基础组件介绍1.基础组件介绍2.基础组件的结构与作用3.基础组件的接入方法初次引入初始化更新与维护基础组件接入 1.基础组件介绍 小程序基础组件基于每日优鲜主商城小程序业务实践演变而来。 基础组件的名称为：mini_app_base_module。 基础组件的项目地址为：https://github.com/sahadev/mini_app_base_module。 2.基础组件的结...
ftp登陆报错530 Login incorrect. Login failed.
热门推荐
hahahaxiaoyu的博客
09-06 6万+
530 Login incorrect. Login failed. 1.兄弟如果这个帖子，解决了你的问题，请给我说一声谢谢，因为，我找了两天才解决到，真的心累了。 2.ftp登陆时报错，530 Login incorrect.Login failed. 3.请先看看百度前三种问题是否能解决，我这是第四种，因为我没有在百度上找到我着一种。 4.cat /etc/passwd，查看你登陆的账户主目录...
好看的登录页面login.html
m0_59076472的博客
07-01 3万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> <style> body { margin: 0;
/etc/login.defs 文件内容及其解释
千里之行，始于足下
07-01 2万+
/etc/login.defs 是设置用户帐号限制的文件。该文件里的配置对root用户无效。 如果/etc/shadow文件里有相同的选项，则以/etc/shadow里的设置为准，也就是说/etc/shadow的配置优先级高于/etc/login.defs # *REQUIRED* required #  Directory where mailboxes reside, _or_
HTML登陆源码login.zip
01-29
综上所述，"login.zip"中的HTML登录源码涵盖了前端开发的核心技术，包括HTML结构、CSS样式、JavaScript交互以及可能的后端通信。学习和理解这些知识点对于任何想要从事前端开发的人来说都是基础且必要的。
漂亮的login登陆页面html模板
12-04
在描述中提到的"漂亮的login登陆页面"，意味着这个模板可能具有引人注目的视觉效果，包括色彩搭配、布局设计和响应式特性，确保在各种设备上都能提供良好的用户体验。一个优秀的登录页面应该简洁明了，易于理解，...
Django登录模板页面login.html
06-04
U8Login.dll
11-20
除了"U8Login.dll"，压缩包中还包括了"UFSoft.U8.Framework.Login.UI.dll"文件，这是用友U8登录界面相关的UI框架库，包含了登录界面的控件和样式定义，使得开发者在自定义登录界面时能够保持与原系统风格的一致性。...
Vue项目实战——仿每日优鲜（移动端网站）
五柳
06-29 2万+
前言 项目描述：一个基于优鲜食物的移动端购物网站（大部分功能模块已实现，适合有一定Vue基础的人学习） 技术栈：Vue CLI+Vue Router+Vuex+Less+Mint UI+axios+Swiper+Animate+Better Scroll+Mock+Vue Touch
Python应用爬虫下载QQ音乐歌曲！
最新发布
Python_trys的博客
07-12 1178
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970。
fastjson 如何忽略@type类型解析
01世界的博客
07-10 319
但是在自己实现的过程中发现一个问题Java.lang.ClassCastException: class com.alibaba.fastjson.JSONObject cannot be cast to class。FASTJSON支持AutoType功能，这个功能会在序列化的JSON字符串中带上类型信息，在反序列化时，不需要传入类型，实现自动类型识别。这是因为在序列化是 FastJSON会向redis填充@Type类型，反序列化时，无法根据Type类型值转化为对应的类，导致报错。
elk部署springboot
Chihirozy的博客
07-11 308
elk部署springboot。
【HarmonyOS NEXT】鸿蒙JSON解析与生成
wu1004019946的博客
07-09 1118
本模块提供了将JSON文本转换为JSON对应对象或值，以及将对象转换为JSON字符串等功能。
使用javascript写一个登陆页面login.html
03-24
好的，以下是一个简单的登陆页面login.html的JavaScript代码： ``` <!DOCTYPE html> <html> <title>Login Page <h1>Login Page <label for="username">Username: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值