javaScript实现登录（简陋）

javaScrip部分有待优化，后续会实现指定账号登录成功后转跳至下一个页面；

<script>// 1. 获取节点对象let username = $('.username');let psd = $('.psd');let send = $('.send');// 保存数据let info = {};// 校验焦点  （账号）username.onblur = function(){let values = this.value; // 定义if(!values){  //不等于或者等于时执行什么条件this.style.border = '2px solid red';// 不等于}else{this.style.border = '2px solid green';// 等于后info.username = values;}}// 校验焦点 （密码）psd.onblur = function(){let values = this.value;  //定义if(!values){this.style.border = '2px solid red';}else{this.style.border = '2px solid green';info.password = values;}}// 登录事件send.onclick = function(){console.log(info);  // 得到账号密码// 当账号不完整或者某个不完整时执行什么条件if(!info['username']||!info['password']){// return;alert('请填写完整');  // 账号密码不完整时提示}else{alert('已登录');// 登录成功后提示}info = {};  // 容器username.value = '';  // 返回账号psd.value = '';     // 返回密码//  登录后恢复原始样式username.style.border = '1px solid #999';psd.style.border = '1px solid #999'}</script>

HTML部分很简单，学习路上的一个小案例放上来记录

<body><div class="sample"><p class="title">用户登录</p><input type="text" class="username" placeholder="账号/手机号/用户名"><input type="password" class="psd" placeholder="密码"><button class="send">登录</button></div>
</body>

CSS的表单，有待提高

    <style>*{margin: 0;padding: 0;}.sample{width: 400px;height: 290px;border: 1px solid #b0b0b0;border-radius: 10px;margin: 100px auto;padding-top: 0;}input,button{background: none;border: none;outline: none;}.title{text-align: center;font-size: 30px;font-weight: bold;padding: 20px 0;}input{width: 90%;height: 50px;border: 1px solid #999;margin-bottom: 20px;margin-left: 5%;padding-left: 10px;box-sizing: border-box;}.send{width: 90%;margin-left: 5%;height: 50px;background: #ff6700;color: #fff;cursor: pointer;}</style>

javaScript实现登录（简陋）相关推荐

JavaScript 银行登录存取钱【案例】
银行登录存取钱案例我们前面聊了,三种循环的区别与联系以及条件语句的使用,今天早上起来没啥事儿,写个这两节总结的小案例玩玩- 直接上结果: (短视频) JavaScript 银行登录存钱取钱案例代码 ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
原生JavaScript实现登录注册前端验证
原生JavaScript实现登录注册前端验证功能:实现一个简单的前端登录页面的验证, 废话不多说,直接上代码... 登录窗口代码段... //html <div class="log ...
javascript页面登录代码_自己动手做一个很酷的登录页面
登录页面静态效果登录页面动态效果登录页面是项目开发中最常用的.今天教大家手写一个登录页面,最终效果见上图.本页面的的开发运用了HTML,CSS和JavaScript的知识. 首先创建一个空的CSS ...
javascript用户登录_SAP HANA XS的JavaScript安全事项
公众号:matinal 前言部分我们都知道web程序都有潜在的安全隐患问题,那么SAP HANA XS的JavaScript也是一样,使用服务器端JavaScript编写应用程序代码,也有潜在的外部 ...
Javascript自动登录B/S系统的简单实现
前几天别的项目组的要求说要那我们的项目出去演示,要做个能快速登录其B/S系统的东西.我就给写了一个html文件,在浏览器中打开这个文件之后,就可以自动跳转到我们系统的主界面. 我们的系统使用的是Spr ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板...
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
JavaScript关于登录和注册
今天开始了JavaScript学习的第二天,也只是对着课本敲了敲代码,但是我也在试着弄清楚里面很多问题,慢慢来吧. 今天的主要内容是登录和注册中可能会用到的内容,具体地说,课本中的程序是这样的要求:写 ...

javaScript实现登录（简陋）

javaScript实现登录（简陋）相关推荐

最新文章

热门文章