![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 70
鹿蹊zz
这个人很懒,什么都没有留下~~~
展开
-
JS 微任务和宏任务(面试题常用)
2.微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。也可以理解为 自执行函数属于for循环一部分,每次遍历i,自执行函数也会立即执行。5. 渲染完毕后,js线程接管,开启下一次事件循环,执行下一次宏任务(事件队列中取)。1. 宏任务:当前调用栈中执行的代码成为宏任务。4. 当前微任务队列中的任务执行完毕,检查渲染,GUI线程接管渲染。2. 执行过程中遇到微任务,将微任务添加到微任务队列中。3. 当前宏任务执行完毕,立即执行微任务队列中的任务。原创 2022-09-16 20:15:05 · 1110 阅读 · 1 评论 -
JavaScript——随机点名练习
随机点名1、使用 HTML+CSS 布局出随机点名系统的页面。2、嵌入 JS 代码,定义要随机姓名数组变量,并初始化姓名信息。3、为开始按钮添加点击事件,并编写定时器程序,随机显示姓名信息。4、编写停止按钮事件处理程序,终止定时程序并显示随机出来的姓名信息,最后完成输出。 效果:...原创 2022-07-11 20:47:52 · 3215 阅读 · 0 评论 -
JavaScript DOM总结(文档事件)
目录DOM文档事件1、事件概述2、窗口事件3、表单事件4、键盘事件5、鼠标事件6、媒体事件7、其他事件8、事件冒泡9、事件委派10、事件判定11、事件传播 HTML事件可以触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript。 由窗口触发该事件 (同样适用于 标签): 案例: 表单事件在HTML表单中触发 (适用于所有 HTML 元素,但该HTML元素需在form表单内): 案例: 通过键...原创 2022-07-11 19:48:56 · 326 阅读 · 1 评论 -
JavaScript DOM总结(文档操作)
目录DOM文档操作1、查找 HTML 元素2、获取 HTML 的值3、改变 HTML 的值4、修改 HTML 元素5、查找 HTML 父子(1)方法 通过CSS选择器选择多个元素。 (2)案例: (1)方法(2)案例:(1)方法(2)案例(1)方法(2)案例 (1)方法(2)案例...原创 2022-07-09 17:04:01 · 249 阅读 · 0 评论 -
JavaScript DOM总结(文档节点)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model,简称DOM)HTML DOM 模型被结构化为 对象树 。DOM树又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面。正在上传…重新上传取消DOM是W3C组织制定的一套处理 html和xml文档的规范。所有的浏览器都遵循了这套标准。通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元原创 2022-07-08 20:14:46 · 473 阅读 · 0 评论 -
JavaScript事件高级导读
2. 方法监听注册事件 addEventListener ie9才以上支持 (1)里面的事件类型是字符串 必须加引号 而且不带on (2)同一个元素 同一个事件可以添加 多个侦听器(事件处理程序)二·.删除事件方式1.传统方式删除事件2.removeEventListener删除事件三.事件对象四.常见事件对象属性和方法1.鼠标事件 e.target返回的是触发事件的对象(元素) this 返回的是绑定原创 2022-07-07 15:57:53 · 52 阅读 · 0 评论 -
JavaScript——本地存储 用户名存储案例
1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量大,sessionStorage约5M、localStorage约20M 4、只能存储字符串,可以将对象JSON.stringify()编码后存储 1、生命周期为关闭浏览器窗口 2、在用一个窗口页面下数据可以共享 3、以键值对的形式存储使用设置数据获取数据删除数据清空数据练习: 1、生命周期永久生效,除非手动删除,否则关闭页面也会存在2、可以多窗口页面共享(同一个浏览器原创 2022-07-06 16:18:09 · 739 阅读 · 4 评论 -
JavaScript——网页轮播图( 实现点击小圆点、图片滑动、小圆点样式改变)
实现点击小圆点、图片滑动、小圆点样式改变1.利用html+css完成轮播图片,底部小点的整体效果的布局。2.通过原生js完成图片轮播,无缝自动切换,底部小点随图片切换而切换。html部分JS部分动态效果图如下:...原创 2022-07-05 20:11:08 · 9060 阅读 · 4 评论 -
JavaScript----点击按钮弹出登录框以及拖拽效果练习
目录一、练习要求:二、效果图三、需求分析:四、拖拽原理: 五、代码如下: CSS部分 html JS 六、演示效果: 点击登录注册,弹出登陆窗口,且该窗口可以关闭,可以拖拽,在弹出窗口的同时,整个页面变成灰色半透明。如下:图1是起始页面,图2是点击“点击,弹出登陆框”按钮后页面,图3是登陆框自由拖动后页面。图1 图2 图3 1.让整个页面变成灰色半透明,需要使用div对整个屏幕进行覆盖,这个div称为覆盖层。 2.点击按钮的时候,弹原创 2022-07-04 16:12:33 · 3431 阅读 · 0 评论 -
JavaScript---节点操作
为什么要学节点操作?利用节点的层次关系 主要是父子兄节点关系来获取元素逻辑性强,但兼容性稍差一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。元素节点nodeType为1属性节点nodeType为2文本节点nodeType 为3(文本节点包含文字、空格、换行等)利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。 1.父级节点 node.parentNode 2.子节点node.childNod原创 2022-07-03 08:41:11 · 95 阅读 · 0 评论 -
JavaScript---表单验证
目录一、表单属性二、 表单验证基础练习 type、value、checked、selected、disabled1、输入内容6-16位 效果:2. 输入内容6-12位效果:原创 2022-06-30 19:24:41 · 327 阅读 · 2 评论 -
js小练习----分时提醒问候、表单密码显示隐藏效果、文本框焦点事件、关闭广告
目录1.分时提醒问候2.表单密码显示隐藏效果3.文本框焦点事件4.关闭广告 根据系统不同时间来判断,所以需要用到日期内置对象 上午打开页面就说:上午好,尊敬的用户! 0-12 下午打开页面就说:下午好,尊敬的用户!12-18 晚上打开页面就说:晚上好,尊敬的用户! 大于18 需要一个div元素,显示不同问候语,修改元素内容即可效果:css部分效果: 文本框点击时,里面的默认文字隐藏,鼠标离开文本时显示文字原创 2022-06-29 19:34:19 · 237 阅读 · 1 评论 -
JavaScript----操作元素
操作元素的步骤:- 事件源:触发事件的元素(获取事件源)- 事件类型: 例如 click 点击事件(绑定事件)- 事件处理程序:事件触发后要执行的代码(函数形式),事件处理函数一.改变元素内容(innerText 和 innerHTM)innerText 和 innerHTML的区别innerText 不识别html标准 非标准 去除空格和换行 1.通过Element.style.属性 改变元素宽度,高度,颜色,背景色等等............原创 2022-06-28 20:34:31 · 258 阅读 · 1 评论 -
JavaScript-----获取元素的几种方法
在开发中,我们想要操作页面上的某个部分(如控制一个div元素的显示或隐藏、修改div元素的内容等),需要先获取到该部分对应的元素,再对其进行操作。下面我们将分别介绍获取元素的几种常见方式。案例:2.根据标签获取元素案例: HTML5中为document对象新增了gelElentsByClassName()、 querySelector()和querSelectorAlI()方法,在使用时需要考虑到浏览器的兼容性问题。接下来我们就来讲解这3种方法的具体使用情况。document.getElemen原创 2022-06-27 17:34:19 · 8268 阅读 · 10 评论 -
JavaScript-----页面显示倒计时
目录一、倒计时效果二、转换公式三、主要代码四、效果展示 1.核心算法:输入的时间减去现在的时间就是剩余的时间(剩余时间毫秒数 转换为 剩余时间的 年月日时分秒),即倒计时 。但是,不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。 比如 将来时间戳 2000ms - 现在的时间戳 10000ms = 10000ms。1000ms转换为就是0小时0分1秒。原创 2022-06-26 17:16:10 · 1904 阅读 · 1 评论 -
JavaScript-----函数
函数就是用来完成特定任务的代码块(1)声明函数语法:function 函数名(){函数}(2)调用函数语法: 函数名()sayHi()(1)利用函数关键字定义函数(命名函数)(2)函数表达式(匿名函数)三、函数的参数1.函数可以重复相同的代码2.我们可以利用函数的参数实现函数重复不同的代码function 函数名(形参1,形参2...){在声明函数的小括号里面是 形参(形式上的参数)}函数名(实参1,实参2...); 在函数调用的小括号里面是实参(实际的参数)案例:3.原创 2022-06-24 20:50:11 · 202 阅读 · 0 评论 -
JavaScript---数组
目录一、数组的概念二、数组的定义三、数组的创建1、使用Array构造函数2、字面量创建数组方式3、使用构造函数创建四、获取数组元素五、遍历数组六、数组中新增元素七、数组的索引八、数组常用的方法1、push 方法2、pop 方法3、unshift 方法4、shift 方法5、splice 方法6、reverse方法7、 sort 方法2、字面量创建数组方式字面量(直接量)创建数组方式是最简单的方式,只需要直接使用 并在括号中设置数组元素即可3、使用构造函数创建使用构造函数Array 是创原创 2022-06-15 20:08:19 · 115 阅读 · 1 评论 -
JavaScript---数组小练习
1.将数组[12,34,2,5,76]中数字内容求和2.将数组[4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0]中的0项去掉,将不为0的值存入一个新的数组 /* var array = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0]; var newArray = []; for (var i = 0; i < array.length; i++) {原创 2022-06-13 20:38:47 · 294 阅读 · 2 评论 -
JavaScript——运算符与流程控制
目录一、运算符1.赋值运算符2.算术运算符3.复合运算符4.一元运算符5.比较运算符6.逻辑运算符7.优先级二、流程控制1.if2.if/else三元表达式3.switch4.while5.do/while6.for7.break/continue使用 进行变量赋值包括以下几种算术运算符。3.复合运算符可以使用 简写算术运算。即 等同于 。4.一元运算符前置操作前置操作会在表达式最先执行。++n 就是 n=n+1 的简写形式。使用后置操作符, 会在最先执行,所以 f 的结原创 2022-06-11 17:05:10 · 172 阅读 · 1 评论 -
js小练习
目录1.用户输入一个数字,判定数字是奇数还是偶数,如果不是数字也要给出提示2.判定两个数字之间的最大值(用户输入两个数字,判定哪个数字大)3.成绩等级的判定4.用户输入一个年份,判定该年份有多少天5.制定学习计划表,输入星期几,能提示今天要学习什么课程6.出租车,起步价(2公里以内)为7元,超过2公里的按照每公里3元计算。要求根据路程计算费用7.判断闰年(闰年的条件是能被4整除,但不能被100整除;或能被400整除。)8.根据性别和体重计算输血量。女性体重不超过50kg的输血量为200毫升,否则250毫升;原创 2022-06-09 22:59:02 · 909 阅读 · 1 评论 -
JavaScript——数据类型的转换
目录一、其他类型转化成字符串类型 1. 把数字型转换为字符串型 变量.toString() 2. 利用 String(变量) 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换二、其他类型转化成数字类型(重点) 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数 3. 利用 Number(变量) 4. 利用了算数运算 - * /原创 2022-06-08 20:13:31 · 1210 阅读 · 1 评论