前端
我的欢
啦啦啦
展开
-
案例:密码框格式提示错误信息
用户如果离开密码框。里面输入个数不是6~16,则提示错误信息,否则提示输入正确信息分析:(1)首先判断的事件是表单失去焦点onblur(2)如果输入正确则提示正确的信息颜色为绿色小图标(3)如果输入不是6~16位,提示错误信息颜色为红色小图标(4)因为变化样式较多,采用className修改样式<!DOCTYPE html><html lang...原创 2019-11-16 23:57:14 · 3210 阅读 · 0 评论 -
案例:淘宝点击关闭二维码
当鼠标点击二维码关闭按钮的时候,则关闭整个二维码分析:(1)利用样式的显示和隐藏完成,display:none 隐藏元素 display:block显示元素(2)点击按钮,让二维码盒子隐藏起来即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...原创 2019-11-16 23:53:07 · 1267 阅读 · 0 评论 -
案例:密码的显示与隐藏
点击按钮将密码框改为文本框,并可以查看明文密码核心思路:点击眼睛按钮,把密码框改为文本框就可以看到密码一个按钮有两个状态,点击一次切换为文本框,继续点一次,切换为密码框算法:利用一个flag变量,判断 flag 的值 。如果flag为1,切换为文本框,并将flag设置为0;如果flag为0,切换为密码框,并将flag设置为1。<!DOCTYPE html>...原创 2019-11-12 22:01:05 · 532 阅读 · 0 评论 -
05-操作元素
javaScript的DOM操作可以改变网内容、结构和样式。我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性1、改变元素内容element.innterText从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉<body> <button>显示当前系统时间</button> <...原创 2019-11-12 20:57:36 · 196 阅读 · 0 评论 -
03-获取页面元素
如何获取页面元素DOM在实际开发中主要用来操作元素获取页面元素的方式:(1)根据ID获取使用getElementById()方法可以获取带有ID的元素对象<div id="time">2019-11-9</div> <script> //1.因为我们文档页面从上往下加载,所以先得有标签,所以我们script要写在标签...原创 2019-11-12 20:34:01 · 118 阅读 · 0 评论 -
04-事件基础
JavaScript 使我们有能力创建动态页面,而事件是可以被JavaScript 侦测到的行为。简单理解为:触发——响应机制网页中的每一个元素都可以产生某些可以触发JavaScript的事件,例如我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。1、事件三要素<body> <button id="btn">唐伯虎</button&...原创 2019-11-12 20:29:30 · 166 阅读 · 0 评论 -
02-DOM
什么是DOMDOM(文档对象模型),是W3C组织 推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。DOM树文档:一个页面就是一个文档,DOM中使用document表示元素:页面中所有标签都是元素,DOM中使用element表示节点:页面中所有内容都是节点(标签、属性、文本...原创 2019-11-12 20:26:17 · 103 阅读 · 0 评论 -
01-Web API 与 API
1、Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)2、API是为程序员提供的一个接口,帮助我们实现某种功能,要会使用3、Web API 主要针对浏览器提供的接口,主要针对浏览器做交互效果4、Web API 一般都有输入和输出(函数的传参和返回值),Web API很多都是方法(函数)5、学习Web API 可以结合前面学习内置对象方法的思路...原创 2019-11-12 20:23:18 · 231 阅读 · 0 评论