JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1

需求：利用JS事件与操作元素复刻--世纪佳缘（用户名、显示隐藏内容）。

开发环境：VScode、Edge

参考网站：世纪佳缘官网注册截面头部

包含算法：

1、利用JS操作元素、事件以及if分支，修改表单获取焦点和失去焦点时的样式。

2、利用JS操作元素、事件以及循环的方法定位样式背景（其他登录），以及设置鼠标经过时变化背景图片的需求。

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>19-操作元素课后作业</title><style>.header {margin: 0;/* background-color: pink; */}.nav {position: relative;margin: auto;width: 1030px;height: 70px;/* background-color: skyblue; */}.nav a,.pic1 {float: left;}.nav .id {position: absolute;top: 20px;left: 325px;width: 135px;height: 24px;border: 1px solid rgb(217, 217, 217);color: rgb(170, 170, 170);outline: none;text-indent: 8px;}.nav .pwd {position: absolute;top: 20px;left: 482px;width: 135px;height: 24px;border: 1px solid rgb(217, 217, 217);color: rgb(170, 170, 170);outline: none;text-indent: 8px;}/*变换后的样式一定要写在后面 */.nav .id_onfocus,.nav .pwd_onfocus {border: 1px solid rgb(255, 214, 219);}.nav button {position: absolute;top: 20px;left: 630px;width: 70px;height: 27px;color: #fff;background-color: rgb(0, 152, 194);border: 0;cursor: pointer;}.nav button:hover {background-color: rgb(0, 139, 177);}.nav .load_on {float: left;margin-top: 25px;margin-left: 360px;font-size: 12px;color: #aaa;}.nav ul {margin-top: 25px;float: left;padding-left: 0;}.nav ul li {float: left;/* 清除li前面的点 */list-style: none;width: 16px;height: 16px;margin-left: 5px;background: url(images/其他登录.gif) no-repeat;}.nav .hw_user,.forget_pwd {float: left;padding-left: 20px;margin-top: 23px;font-size: 12px;color: #aaa;text-decoration: none;}.hw_user:hover,.forget_pwd:hover {color: rgb(136, 136, 136);text-decoration: underline;}</style></head>
<!-- 1. 世纪佳缘 用户名 显示隐藏内容
2. 京东关闭广告（直接隐藏即可）
3. 新浪下拉菜单（微博即可）
4. 开关灯案例（见素材） --><body><div class="header"><div class="nav"><a href="#" target="_blank"><img src="data:images/世纪佳缘.jpeg" alt="新建" title="新建页面"></a><span class="pic1"><img src="data:images/婚恋网站.png" alt="婚恋网站" ></span><input type="text" class="id" value="邮箱/ID/手机"><input type="text" class="pwd" value="密码"><script>//1. 获取元素var id = document.querySelector('.id');console.log(id);var pwd = document.querySelector('.pwd');console.log(pwd);// 2. 注册事件  获取焦点事件id.onfocus = function() {console.log('得到了焦点');if (this.value == '邮箱/ID/手机') {this.value = '';}// this.value = '';// 变换样式id.className = "id id_onfocus";}// 失去焦点事件id.onblur = function() {if (this.value == '') {this.value = '邮箱/ID/手机';}//  变换样式id.className = "id";}// 3. 注册事件  获取焦点事件pwd.onfocus = function() {console.log('得到了焦点');if (this.value == '密码') {this.value = '';}this.type = 'password';// this.value = '';// // 变换样式pwd.className = "pwd pwd_onfocus";}// 失去焦点事件pwd.onblur = function() {console.log('失去了焦点');if (this.value == '') {this.type = 'text';this.value = '密码';}// 变换样式pwd.className = "pwd";}</script><button>登录</button><span class="load_on">其他登录</span><ul class="load_other"><a href="#"><li></li></a><a href="#"><li></li></a><a href="#"><li></li></a><a href="#"><li class="load_wx"></li></a></ul><script>// 遍历图片// 1. 获取元素var lis = document.querySelectorAll('li');// console.log(lis);// 注册事件  遍历图片for (var i = 0; i < lis.length; i++) {// 背景图片x坐标大小与lis[]的索引号的关系var load_index = -(i * 16);console.log(load_index);lis[i].style.backgroundPosition = '1' * load_index + 'px 0px';console.log(lis[i]);}// 修改第四个为微信登录lis[lis.length - 1].style.background = 'url(images/login_wx.jpg)';// console.log(lis[lis.length - 1]);</script><script>//改变样式// 1. 注册事件 修改背景图片// QQ-------------// 经过lis[0].onmouseover = function() {this.style.backgroundPosition = '0px -16px';// for (var j = 0; j < lis.length; j++){//     var // }}// 离开lis[0].onmouseout = function() {this.style.backgroundPosition = '0px 0px';}// wb-----------// 经过lis[1].onmouseover = function() {this.style.backgroundPosition = '-16px -16px';// for (var j = 0; j < lis.length; j++){//     var // }}// 离开lis[1].onmouseout = function() {this.style.backgroundPosition = '-16px 0px';}// bd---------// 经过lis[2].onmouseover = function() {this.style.backgroundPosition = '-32px 0px';// for (var j = 0; j < lis.length; j++){//     var // }}// 离开lis[2].onmouseout = function() {this.style.backgroundPosition = '-32px -16px';}// wx----------// 经过lis[3].onmouseover = function() {this.style.background = 'url(images/login_wxh.jpg)';}// 离开lis[3].onmouseout = function() {this.style.background = 'url(images/login_wx.jpg)';}</script><a href="#" class="hw_user">海外用户登录</a><a href="#" class="forget_pwd">忘记密码</a></div></div></body></html>
</body></html>

JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1相关推荐

js世界佳缘用户名显示隐藏内容 pink老师
在这里插入代码片 ```<!DOCTYPE html> <html><head><meta charset="utf-8">< ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
一.基础班学习路线三.CSS3基础 1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> ...
黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM，事件高级）
DOM 节点操作父节点和子节点第一个子元素和最后一个子元素新浪下拉菜单案例兄弟节点创建和添加节点简单版发布留言案例删除节点删除留言案例复制节点动态生成表格-创建学生数据动态生成表 ...
如何查看jsplumb.js的API文档(YUIdoc的基本使用)#华为云·寻找黑马程序员#
[摘要] 介绍前端文档工具YUIdoc 示例代码托管在:http://www.github.com/dashnowords/blogs 一.问题描述最近向一些同事推荐了网页中实现流程图绘制的工具库j ...
js的项目1:世纪佳缘、京东关闭广告、新浪下拉菜单、开关灯案例
1.世纪佳缘用户名显示隐藏内容 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
操作元素总结及作业1——世纪佳缘登录案例-黑马pink老师
在黑马前端教程里面,操作元素部分有这样一个案例就是世纪佳缘的登陆案例. 实现:登录的隐藏内容,以及密码框的设计,点击后颜色的变化. 简单的算法:利用JS操作元素.事件以及if分支,修改表单获取焦点和失 ...
世纪佳缘回应杭州小吴相亲事件：负有不可推卸的责任
新浪科技讯 2月25日晚间消息,在一个多月之后,世纪佳缘今日在其官方微博回应了"杭州小吴相亲"事件. 世纪佳缘表示,其服务部首先负有不可推卸的责任.而在事件经媒体曝光后,公关部门及 ...
python多线程爬取世纪佳缘女生资料并简单数据分析
一. 目标作为一只万年单身狗,一直很好奇女生找对象的时候都在想啥呢,这事也不好意思直接问身边的女生,不然别人还以为你要跟她表白啥的,况且工科出身的自己本来接触的女生就少,即使是挨个问遍,样本量也 ...
【转】推荐系统入门实践：世纪佳缘会员推荐（完整版）
推荐系统入门实践:世纪佳缘会员推荐(完整版) 版本作者联系日期 1.0 周巍然 weiran.chow@gmail.com 20120723 2.0 严程 supersteven198701@ ...

JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1

JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1相关推荐

最新文章

热门文章