JavaScript:登录页面

用户登录页面，用焦点事件验证用户名和密码是否为空。

页面事件

load事件：用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序的问题，常常在开发具体功能时添加。

unload事件：用于页面关闭时触发，经常用于清除引用避免内存泄漏时使用。

焦点事件

事件名称	事件触发时机
focus	当获得焦点时触发（不会冒泡）
blur	当失去焦点时触发（不会冒泡）

样式：

<style>body {background: #ddd;}.box {background: #fff;padding: 20px 30px;width: 400px;margin: 0 auto;text-align: center;}.btn {width: 180px;height: 40px;background: #3388ff;border: 1px solid #fff;color: #fff;font-size: 14px;}.ipt {width: 260px;padding: 4px 2px;}.tips {width: 440px;height: 30px;margin: 5px auto;background: #fff;color: red;border: 1px solid #ccc;display: none;line-height: 30px;padding-left: 20px;font-size: 13px;}</style>

<body><div id="tips" class="tips"></div><div class="box"><p><label>用户名：<input id="user" class="ipt" type="text"></label></p><p><label>密　码：<input id="pass" class="ipt" type="password"></label></p><p><button id="login" class="btn">登录</button></p></div><script>window.onload = function () {addBlur($('user'));      // 检测id为user的元素失去焦点后，value值是否为空addBlur($('pass'));      // 检测id为pass的元素失去焦点后，value值是否为空};function $(obj) {          // 根据id获取指定元素return document.getElementById(obj);}function addBlur(obj) {    // 为指定元素添加失去焦点事件obj.onblur = function () {isEmpty(this);};}function isEmpty(obj) {    // 检测表单是否为空if (obj.value === '') {$('tips').style.display = 'block';$('tips').innerHTML = '注意：输入内容不能为空! ';} else {$('tips').style.display = 'none';}}</script>
</body>

运行效果：

JavaScript:登录页面相关推荐

javascript页面登录代码_自己动手做一个很酷的登录页面
登录页面静态效果登录页面动态效果登录页面是项目开发中最常用的.今天教大家手写一个登录页面,最终效果见上图.本页面的的开发运用了HTML,CSS和JavaScript的知识. 首先创建一个空的CSS ...
app登录界面背景 css_计算机毕业设计中Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）...
点击上方"蓝字",关注我们. 本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面.对用户输入的用户名和密码就行校验,校验 ...
2.简易的登录页面（表单验证）（HTML+JavaScript+Jquery）
//HTML部分 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <t ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板...
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
Javascript注册页面验证登录
Javascript注册页面验证登录连接数据库. 目前登录功能好像出问题了,用不了数据库注册的信息用于登录.由于时间的原因,以后再更改.个人笔记,不建议拿去用,因为还存在问题没有解决. (1)inde ...
【JavaScript】小兔鲜登录页面（3）小兔鲜首页页面
小兔鲜首页页面需求: 从登录页面跳转过来之后,自动显示用户名如果点击退出,则不显示用户名步骤: 最好写个渲染函数,因为一会的退出,还需要用到 ①:如果本地存储有记录的用户名,读取本地存储数据 ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
JavaScript 登录跳转页面效果
要求: 有两个页面:index.html和login.html.在login.html页面中点击登录,会跳转到index.html,并将输入的用户名传递到index.html. 实现效果: 实现思路: ...

JavaScript:登录页面

JavaScript:登录页面相关推荐

最新文章

热门文章