DOM第一天作业--世纪佳缘登录框--pink老师

运行成果：

HTML代码块

 <div class="register"><input type="text" class='ipt' value="邮箱/ID/手机号"><input type="password" class='pwd' placeholder="密码"><button>登录</button></div>

CSS样式

div {width: 600px;margin: 100px auto;
}input {display: inline-block;box-sizing: border-box;color: #999;margin-right: 10px;outline: none;padding: 2px 0 2px 10px;height: 25px;width: 136px;   border: 1px solid #ccc;}.change {outline-color: pink;}button {background-color: #0098c2;color: white;border: none;height: 25px;width: 67px;
}

JavaScript 代码段

<script>var text = document.querySelector('.ipt');var pwd = document.querySelector('.pwd')text.onfocus = function () {if (this.value === '邮箱/ID/手机号') {this.value = '';this.className = 'change';}this.style.color = '#b5b2bd';}text.onblur = function () {if (this.value === '') {this.value = '邮箱/ID/手机号';}}pwd.onfocus = function () {if (this.placeholder === '密码') {this.text = 'text';this.placeholder = '';this.className = 'change';}}pwd.onblur = function () {if (this.placeholder === '') {this.placeholder = '密码';this.text = 'password';this.className = '';}}</script>

DOM第一天作业--世纪佳缘登录框--pink老师相关推荐

操作元素总结及作业1——世纪佳缘登录案例-黑马pink老师
在黑马前端教程里面,操作元素部分有这样一个案例就是世纪佳缘的登陆案例. 实现:登录的隐藏内容,以及密码框的设计,点击后颜色的变化. 简单的算法:利用JS操作元素.事件以及if分支,修改表单获取焦点和失 ...
世纪佳缘登录之二，修改
今天发现世纪佳缘的以前登录代码不行了,登录不成功.打印content后有毛病,没跳转过去. 需要再次请求一下登录后返回的<script type='text/javascript'>win ...
世纪佳缘，玫瑰和面包开始PK
你在桥上看风景看风景人在楼上看你明月装饰了你的窗子你装饰了别人的梦 ----卞之琳<断章> 喜欢卞之琳这首诗的意境和韵味,如同一幅水墨画,淡雅,清新,悠远. ...
JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1
需求:利用JS事件与操作元素复刻--世纪佳缘(用户名.显示隐藏内容). 开发环境:VScode.Edge 参考网站:世纪佳缘官网注册截面头部包含算法: 1.利用JS操作元素.事件以及if分支,修改表 ...
python 爬虫登录世纪佳缘
python 爬虫登录世纪佳缘程序运行相关环境: win7 python2.7.13 python requests包 python beautifulsoup包代码示例: # -*- codin ...
非常感谢提交漏洞和对世纪佳缘的支持，我们已第一时间将漏洞修复完毕，并抓捕了你
https://www.zhihu.com/question/47775182 如何看待白帽子在乌云网提交世纪佳缘网漏洞后被抓? 被浏览 359676 396 个回答执·龙根一本正经的道更新 ...
世纪佳缘财务及运营数据分析
世纪佳缘成立于2003年10月8日,是中国在线婚恋交友平台,通过互联网.无线平台和线下活动为单身人士提供严肃婚恋交友服务.2011年5月11日,世纪佳缘登陆美国纳斯达克进行首次公开募股,成为首家上市的 ...
【转】推荐系统入门实践：世纪佳缘会员推荐（完整版）
推荐系统入门实践:世纪佳缘会员推荐(完整版) 版本作者联系日期 1.0 周巍然 weiran.chow@gmail.com 20120723 2.0 严程 supersteven198701@ ...
【世纪佳缘桌面V3.1.1正式版】聊天交流工具
世纪佳缘桌面 V3.1.1 正式版 [世纪佳缘网的聊天交流工具] 授权方式:免费软件界面语言:简体中文软件大小:12.12MB 所属专题:网络软件运行环境:Win2K,WinXP,Win2003 ...

DOM第一天作业--世纪佳缘登录框--pink老师

DOM第一天作业--世纪佳缘登录框--pink老师相关推荐

最新文章

热门文章