javascript页面登录代码_自己动手做一个很酷的登录页面

登录页面静态效果

登录页面动态效果

登录页面是项目开发中最常用的。今天教大家手写一个登录页面，最终效果见上图。本页面的的开发运用了HTML，CSS和JavaScript的知识。

首先创建一个空的CSS文件(style.css)，页面的样式代码将写到这个文件中。

然后创建HTML文件，并引入style.css和jquery.min.js。

在html文件中引入style.css和jquery.min.js

在body标签中间添加一个form，并设置form的class为login-form。

添加form标签

在form中添加标题Login，两个文本输入框，一个提交按钮，以及注册链接。

当前效果

目前的页面还没有样式，看起来很丑，下面我们在style.css文件中添加样式。

样式代码添加后的效果

样式代码添加完成后，页面看起来就美观多了，下面我们实现鼠标点击文本输入框时的动画效果。

此动画效果需要编写JavaScript代码实现。我们在form标签下添加此代码。

输入框动画代码

第一句代码绑定了focus事件。当输入框获得焦点时，次输入框添加focus样式。

第二句代码绑定了blur事件。当输入框失去焦点时，如果此输入框为空，那么移除focus样式。

写在style.css中的focus样式

到此为止，这个登录页面就写完了。有疑问的朋友可以私信我。如果想要源代码的朋友可以私信给我你的邮箱地址，我发给你。整个页面的编写过程已制作成视频，有兴趣的朋友可以通过下方的“了解更多”查看视频。

javascript页面登录代码_自己动手做一个很酷的登录页面相关推荐

登录页面html代码_【网络自动化平台开发】—— 登录组件
今年的天气特别的冷,于是,继续缓慢更新. Django 其实有自己的权限认证组件,可以拿来用,其实本身代码量也不多,还是自己写吧. 新建了一个functions文件夹用于存放各种功能文件: 说说登录的 ...
python可以plc编程_自己动手做一个PLC
我们自己来做一个PLC(Programmable Logic Controller,即可编程逻辑控制器)怎么样?就像很多计算机专业的同学都自己写过最简单的操作系统一样,作为工控领域的软件人,怎么能不自 ...
element ui登录界面_Vue和Element-UI做一个简单的登录页面
如下所示,是vue+ElementUI写的一个登录页面: Login.vue部分 class="demo-ruleForm login-container"> 登陆界面记住 ...
diy写字机器人_自己动手做一个写字机器人
#include #include Servo myservo; int i = 87;//舵机中间位置 i为舵机位置指示参数 int x=30; //笔位置(笔尖到转轴的距离) int led = ...
java swing 弹出登录框_用JavaSwing制作一个简单的登录框
我就懒的一条一条注释了,之前已经都讲过了,直接上代码了. 劝一下大家,打代码不要直接复制,这样是永远都学习不会的,要自己动手敲,自己要有思维. 我这个只供你们自己参考吧,请不要盲目复制,要学习精髓,这 ...
用layui做一个简易的登录注册页面
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...
iOS动手做一个直播app开发(代码篇)
iOS动手做一个直播app开发(代码篇) ###开篇好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量都不错的文 ...
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API（代码可直接运行）
使用有道词典API做一个简单的翻译页面 HTML+JS+有道词典API(代码可直接运行) 代码很简单,适合初学者学习借鉴.可以当成一个小工具使用. 注意: 1.代码应联网使用. 2.在输入密钥和id时 ...
开关面板如何自己印字_如何自己动手做一个智能开关
现在的智能家居这么火,对于想自己动手的小伙伴们来说,都想自己去做一些家里使用的智设备.现在的中国不缺卖唱卖惨的,缺的是能动手创造一些能实际使用的而不是哗众取宠的人,天天喊着要反击外国技术封锁.那么我 ...

javascript页面登录代码_自己动手做一个很酷的登录页面

javascript页面登录代码_自己动手做一个很酷的登录页面相关推荐

最新文章

热门文章