前言

阅读使人充实，会谈使人敏捷，写作使人精确。 ——培根

1.据时间事件改变状态

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {width: 200px;height: 200px;}</style>
</head><body><img src="./img/shanyu.jpg" alt=""><div>上午好</div><script>var img = document.querySelector('img')var div = document.querySelector('div');var date = new Date();var h = date.getHours();if (h < 12) {img.scr = './img/shanyu.jpg';div.innerHTML = '上午好';} else if (h < 18) {img.src = './img/山鱼妹.jpg';div.innerHTML = '下午好';} else {img.src = './img/hopegirl.jpg'div.innerHTML = '晚上好';}</script>
</body></html>

根据早中晚不同时间，进行一个判断，然后再进行一个事件的改变，近而可以从不同时间段获得不同的图片状态

2.表单元素的属性操作

相关用法：type（类型）、value（值）、 checked（默认选择）、 selected（下拉）、 disabled（禁用）

<body><button>点击按钮嘿嘿嘿！</button><input type="text" value="请输入文字"><script>// 获取元素var button = document.querySelector('button');var input = document.querySelector('input');// 注册事件  处理程序// 通过点击按钮 改变value的值button.onclick = function () {input.value = '一个Q接大招把你腿打折！';// 使用disable来进行对按钮的禁用，就是使用过该按钮就不能再用了// 点击按钮之后，该按钮就变灰色的，就证明禁用成功了button.disabled = true;// 也可以用this来进行禁用操作// 这里的this指向的是事件函数的调用者this.disabled = true;}</script>

3.实现密码显示隐藏

1.点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码

2.一个按钮两个状态，点击次，切换为文本框,继续点击次切换为密码框

3.算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框, flag设置为0 ,如果是0就切换为密码框, flag设置为1

这里用到了定位，把图片定位到相应的位置

</head><body><div class="box"><label for=""><img src="./img/biyan.png" alt="" id="eye"></label><input type="password" name="" id="pw"></div><script>// 获取元素var eye = document.getElementById('eye');var pw = document.getElementById('pw');var img = document.querySelector('img');// 注册事件 执行程序var flag = 0;eye.onclick = function () {if (flag == 0) {img.src = './img/zhengyan.png';pw.type = 'text';flag = 1;} else {img.src = './img/biyan.png'pw.type = 'password';flag = 0;}}</script>
</body>

相关style样式

注：当然，这里只是展现实现密码框的转换，现在大多数浏览器都自带“小眼睛”，不再需要进行手动设置

    <style>.box{position: relative;width: 400px;border-bottom: 1px solid black;margin: 100px auto;}.box input{width: 370px;height: 30px;border: 0;outline: none;}.box img{position:absolute;top:8px;right: 30px;width: 24px;}</style>

JS修改style样式操作,产生的是行内样式，CSS权重比较高

    <style>div {width: 200px;height: 200px;background-color: deepskyblue;}</style>
</head><body><div></div><script>var div = document.querySelector('div');div.onclick = function () {this.style.backgroundColor = 'red';}</script>

4.循环精灵图

1.写上12个大小为24的小盒子（根据精灵图大小进行样式的书写）

2.然后在进行对精灵图的计算和使用（计算下，y轴）

3.可以利用for循环设置一组元素的精灵图背景，修改背景位置background-position

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>// 1.获取元素所有的小livar lis = document.querySelectorAl1('li');for (var i = 0; i < lis.length; i++) {//让索引号乘以44就是每个li的背景y坐标工var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';}</script>
</body></html>

相关css代码

    <style>li {list-style: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 15px;background-image: url('./img/jinglingtu.jpg')}</style>

【JavaScript-事件②】表单元素的属性操作，密码显示隐藏的实现相关推荐

js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
html5 表单必填项,javascript - HTML5表单必填属性。设置自定义验证消息？
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
html表单提交后显示,javascript – 在表单提交后在页面上显示消息
我有一个包含2个字段的表单(对于此示例),我使用 JavaScript验证,如果字段包含数据,则表单将在用户单击"提交"按钮时提交.我在表单标签中使用iframe将输出发送到同一页 ...
JavaScript之表单元素操作
获取radio的checked: 1 $("#radio")[0].checked;//true or false 本文转自爱笑嘚蛋蛋 51CTO博客,原文链接:http: ...
非表单元素如何使用焦点事件
在前端开发中,常用的焦点事件有focus和blur. 来看看在菜鸟教程(https://www.runoob.com/jsref/met-html-focus.html)中的介绍: focus() 方 ...
非表单元素跟表单元素
非表单元素的属性有: href ,title, id src className 表单元素属性: value:用于大部分表单元素内容获取除了option type 可以获取input标签的类型(输入框 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
新增表单元素属性事件
表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. ①email.②url.③number.④range ⑤Date pickers (d ...
H5--新增表单元素控件属性事件
H5网站重构先简单回顾一下H5新标签:结构性标签.功能性标签结构性标签:负责web上下文件结构的定义功能性标签:功能性内容的表达表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些 ...

【JavaScript-事件②】表单元素的属性操作，密码显示隐藏的实现

前言

1.据时间事件改变状态

2.表单元素的属性操作

3.实现密码显示隐藏

4.循环精灵图

【JavaScript-事件②】表单元素的属性操作，密码显示隐藏的实现相关推荐

最新文章

热门文章