JavaScript
文章平均质量分 57
网络点点滴
一点一滴汇聚成江流河海
展开
-
JavaScript构造函数小挑战
/ 编码挑战 #1/*a. 执行一个 “accelerate ”方法,将汽车的速度提高 10,并将新速度记录到控制台;3.a. 执行一个 “刹车 ”方法,将汽车速度降低 5,并将新速度记录到控制台;4. 创建 2 个汽车对象,并尝试在每个对象上多次调用 “加速 ”和 “制动”。数据 CAR 1:“宝马”,时速 120 公里数据车 2:“奔驰”,时速 95 公里祝您好运*/原创 2024-07-23 23:52:53 · 81 阅读 · 0 评论 -
内置对象的原型继承
【代码】内置对象的原型继承。原创 2024-07-22 23:34:01 · 111 阅读 · 0 评论 -
原型继承和原型链
如果在一个对象上访问属性或方法时,对象本身没有定义,JavaScript 引擎会沿着这个对象的。(即它的构造函数的 prototype)向上查找,直到找到对应的属性或方法或者到达原型链的顶端(即 Object.prototype)。● 原型对象:每个函数在创建时都有一个 prototype 属性,它指向一个对象,这个对象包含函数的默认属性和方法。● 原型链:通过原型链,对象可以访问其构造函数的原型对象上定义的属性和方法。● 实例的原型:通过 new 关键字创建对象实例时,实例会有一个。原创 2024-07-21 23:02:08 · 297 阅读 · 0 评论 -
JavaScript原型
*原型的使用:**可以通过原型对象来添加共享的方法,这样所有通过该构造函数创建的对象实例都可以访问和使用这些方法。原创 2024-07-15 14:57:45 · 240 阅读 · 0 评论 -
构造函数和新操作符
在JavaScript中,构造函数是用来创建对象的函数。它们通常与 new 关键字一起使用,用来实例化对象并初始化其属性。构造函数可以看作是一种特殊的函数,专门用来定义和初始化对象的特性和行为。原创 2024-07-15 14:54:32 · 287 阅读 · 0 评论 -
JavaScript中的面向对象编程
● 对象(实例)由类实例化,类的功能类似于蓝图,通过蓝图来实现建筑(实例)● 行为(方法)从类复制到所有实例。原创 2024-07-13 23:11:11 · 349 阅读 · 0 评论 -
什么是面向对象编程
● 面向对象编程是一种基于对象概念的编程范式;(所谓的编程范式,就是代码风格,我们“如何”编写和组织代码);● 我们使用对象来模拟(描述)现实世界(例如用户或者待办事项列表项)或抽象特征(例如 HTML 组件或数据结构);● 对象可包含数据(属性)和代码(方法)。通过使用对象,我们可以将数据和相应的行为打包成一个块;例如下方:● 在面向对象编程 中,对象是自成一体的代码块;● 对象是应用程序的构件,并可相互影响;原创 2024-07-12 18:53:13 · 874 阅读 · 0 评论 -
高效的 Scirpt 载入_延迟和异步
● 当我们js文件处于末尾时,有一个等待的时间。原创 2024-07-10 20:37:57 · 195 阅读 · 0 评论 -
DOM(文档对象模型)生命周期事件
DOM 生命周期事件涉及到从创建、更新到销毁 DOM 元素的不同阶段。● 我们来看下当HTML文档加载完再执行JavaScript代码', e);})● 除此之外,浏览器在解析 HTML 时会逐行加载并执行● 监听 load 事件当整个页面及其依赖资源(如图片、样式表)全部加载完成时触发。这种事件对应于 DOM 生命周期中的最后阶段,标志着页面的完全加载,开发者可以在这时执行最终的初始化操作或其他相关任务。})原创 2024-07-09 21:29:43 · 385 阅读 · 0 评论 -
构建滑块组件_第 2 部分
每个按钮表示一个幻灯片的点或指示器,其中 data-slide 属性设置为 slides 数组中对应幻灯片的索引。当用户点击一个具有 dots__dot 类的元素时,它会获取该点对应的幻灯片索引,并调用函数来处理跳转到指定幻灯片并激活相应的点元素。● 之后我们讲来当我们按下键盘的右键或者左键的时候,幻灯片也会进行切换。● 接着我们要创建活跃的点,及点击到第一个幻灯片中,第一个点就为白色。● 最后,让我们来重构一下我们这乱七八糟的代码把,重构的代码如下。● 最后,我们删除图片,让原本的内容展现出来吧!原创 2024-07-06 22:18:11 · 164 阅读 · 0 评论 -
构建滑块组件_第 1 部分
● 本次将和大家一起学习实现滑块的功能● 由于这有些错乱,我们将用图片来代替,以实现功能● 这里我们简单的说一下原理,如下图所示,通过改变tanslateX的值来达到滑动的效果,所以最核心的就是我们需要通过JavaScript来改变图片的切换。原创 2024-07-05 23:22:02 · 292 阅读 · 0 评论 -
JavaScript懒加载图像
懒加载图像是一种优化网页性能的技术,它将页面中的图像延迟加载,即在用户需要查看它们之前不会立即加载。这种技术通常用于处理大量或大尺寸图像的网页,特别是那些包含长页面或大量媒体内容的网站。原创 2024-07-04 23:07:10 · 513 阅读 · 0 评论 -
JS滚动时显示元素
● 之后,我们定义一个函数来处理观察者监听到变化的时候,我们应该干啥,就是移除掉section–hidden这个class。● 我们的目的呢,就是当滚入到某一节中,将section–hidden给去除就可以了。● 最后呢,我们对section元素进行迭代处理,默认情况是,这些元素是不可见的。● 接着呢,我们需要定义对象来监视页面上所有的section的视口变化。● 首先,我们先获取想要的class,存储变量中。原创 2024-07-03 23:11:17 · 157 阅读 · 0 评论 -
更好的方法_交叉观察器API
注:isIntersecting: isIntersecting 是 IntersectionObserverEntry 接口的一个属性,用于指示观察的目标元素(target element)当前是否与其所监听的根元素(或视口)相交(intersecting)。● 创建一个 IntersectionObserver 实例 headerObserver,用于观察页面中的页面顶部的 .header 元素与视口的交叉状态,并在交叉状态变化时调用 stickyNav 回调函数进行处理。● 首先我们先拿到导航元素。原创 2024-07-02 22:12:17 · 340 阅读 · 0 评论 -
实施粘贴式导航_滚动事件
● 所谓的粘贴式导航,就是当我们滑动页面到某一个位置的时候,导航不会因为滑动而消失,会固定在页面的顶部,我们来看一下如何实现;● 首先我们要获取我们想要滚动到哪一部分的时候让导航栏显示出来,这就需要我们去获取这一部分的相对于视口的一个位置信息。原创 2024-07-01 20:31:13 · 917 阅读 · 0 评论 -
JavaScript将参数传递给事件处理程序
这样就可以实现当我们移入到某个元素的时候,有个高亮动画,但是,这样肯定是让代码的臃肿,我们需要去重构这段代码,一般呢,我们会选择通过函数的方式来重构这段代码,例如。● 这样也是可以实现的,但是这个点击事件的匿名回调函数还是不够优雅,我们可以通过bind方法来去除这个重复的匿名回调函数。● 现在可以实现,但是有一个问题,当我们移出的时候,并不会恢复,所以我们还需要一个移除的事件。本篇文件我们将实现导航栏中,选中时候,会将您选中的进行高亮显示;● 首先我们来获取我们想要的HTML元素。原创 2024-07-01 20:15:55 · 412 阅读 · 0 评论 -
JavaScript创建标签式组件
● 接着我们通过条件保护来设定,当我们获取的元素为null时候,直接返回不执行后面的代码。● 接着我们要移除所有的活跃样式,这些活跃样式大家看一下之前的html和css代码。注:clicked.dataset.tab是为了获取class中的data数据。● 接着我们需要通过点击事件来获取我们点击的那个button的信息。● 当然我们首先将我们需要的元素存储到变量中,方便后面使用。● 接下来就是我们点击哪个按钮,就给哪个按钮创建活跃样式。我们本篇将实现下面的这个标签式组件。● 接着就是激活内容。原创 2024-06-25 10:53:47 · 305 阅读 · 0 评论 -
DOM遍历
需要注意的是,这两个属性获取的节点可能是元素节点也可能是文本节点(或者其他类型的节点)。● 我们也可以找到元素的所有子元素节点,不包括文本节点和注释节点。● 找到元素的最近的父元素节点。如果 h1 的父节点是一个元素节点,则返回这个元素节点;● 找到元素的父节点,无论父节点是什么类型的节点(元素节点、文本节点等)。● 我们也可以找到元素的所有子节点(包括元素节点、文本节点和注释节点)的 NodeList 对象。● 那我们怎么知道元素的所有兄弟元素呢,我们可以找父元素的所有子元素。原创 2024-06-25 10:51:25 · 348 阅读 · 0 评论 -
事件委托_实现页面导航
● 但是这种效率并不高,如果我们导航里面有1000个链接,我们就需要取创建1000个副本来完成此次点击事件,这显然效率很低;原创 2024-06-21 13:57:11 · 207 阅读 · 0 评论 -
JavaScript事件传播实战
● 我们会发现当我们点击子元素时候,点击事件会被触发,他的父元素也会被触发,这是因为当你点击子元素时,事件会向上冒泡到父元素,也就是说会在父元素上触发相同的事件。这种行为称为事件冒泡。● 当我们将第三个参数设置为true,事件传播就会被设置为捕获,设置为捕获只会,刚开始是从父级元素开始变化,之后向下传播!● 我们可以通过事件类型的第三个参数来设置事件的传播类型,默认是flase,即冒泡。● 接着,我们使用随机数来创建随机的rgb,来实现随机颜色。● 接着我们来获取导航栏的连接,实现点击一下,随机更换颜色。原创 2024-06-19 20:21:41 · 387 阅读 · 0 评论 -
JavaScript事件传播_冒泡和捕获
● 举例来说,如果你单击了一个嵌套的元素,首先会触发该元素上的单击事件,然后事件会向上传播至其父元素,再到父元素的父元素,以此类推,直到传播至文档的根节点。● 冒泡是指当一个元素上的事件被触发时,该事件会从最内层的元素开始向外层元素逐层传播,直到传播到最外层的祖先元素。● 在捕获阶段,事件会从文档的根节点一直传播至目标元素。● 捕获是指事件从最外层的元素向内传播到最内层的元素。原创 2024-06-18 19:06:56 · 284 阅读 · 0 评论 -
JavaScript事件类型和事件处理程序
● 之前我们用过了很多此的点击事件,这次让我们来学习另一种事件类型。原创 2024-06-17 20:44:43 · 180 阅读 · 0 评论 -
JavaScript实现平滑滚动
● 现在确实可以跳转了,但是细心的小伙伴会发现,这个必须在顶部才能正常跳转,往下面滑动一点就不行了,因为页面滑动就会章节的到顶部的X轴就会变动,我们必须加上滑动的距离才可以。//通过调用e.target.getBoundingClientRect(),你可以获取触发点击事件的元素相对于视口的位置和尺寸信息。● 我们也可以输出输出视口(viewport)的高度和宽度,也就是可见视口的高度。● 现在就简单了,我们只需要点击按钮的时候更改一下我们想要的章节坐标即可。● 首先我们获取到按钮信息和想要滚动到得章节。原创 2024-06-01 20:47:43 · 374 阅读 · 0 评论 -
JavaScript样式、属性和类别
● 这种赋予style的方式是内联式的,所以我们通过这种方式去读取非内联式的CSS元素式读取不到的,但是在内联式里面的style可以读取到。● 但是这个只能读取到标准属性,例如我们在HTML中再添加一个属性。● 我们也可以动态设置文档根元素( 元素)的 CSS 变量的值。● 我们可以使用getAttribute()方法去读取到。● 我们可以通过JS读取到HTML文档中的各个属性。● 我们也可以使用上面的方法将高度增加。● 我们也可以对属性进行修改。● 当然我们也可以创建属性。● 下面的尽量不要使用。原创 2024-05-22 14:57:01 · 356 阅读 · 1 评论 -
JavaScript选择、创建、删除元素
在以后的学习中我们的源码如下:选择元素我们也可以在其后面插入元素● 但是我们发现,使用prepend或者append不仅仅是插入元素,也是移动它,因为元素只能出现在DOM的一个地方,就像一个人只能出现在一个地方一样,如果我们想在两个地方都出现,我们就需要去复制这个元素● 我们可以在元素之前或者之后插入● 现在我们将我们上面创建的元素删除掉在remove的方法没有出现之前,我们使用下面的这个方法,原创 2024-05-20 21:08:29 · 725 阅读 · 0 评论 -
DOM 的真正工作原理
● DOM允许我们使JavaScript与浏览器交互;● 我们可以编写JavaScript来创建、修改、删除HTML元素;设置样式、类和属性;监听和响应事件;● DOM树是从HTML文档中生成的,我们可以与它进行交互;原创 2024-05-19 21:50:59 · 180 阅读 · 0 评论 -
JavaScript实施倒计时器
● 我们先简单的写一个计时器● 然后再用户登录的代码段中去调用它● 但是这种明显不好看,我们以分钟和秒来倒计时会更加的好看${${● 接着我们再time为0的时候注销用户并更新UI${${● 上面的代码就能够实现,当time为0的时候注销用户了,但是细心的你会发现,这个代码定时器并不是立即执行的,而是过一秒再执行,但是我们想要的是立即执行。${${● 这样我们将函数拿出来,再定时器之前直接调用它,它就会被立即执行● 但是细心的我们又发现了一个问题,当时间为01的时候,就会更新UI,并不是等到00的时候。原创 2024-05-18 21:06:15 · 463 阅读 · 0 评论 -
定时器函数setTimeout 和 setInterval
定时器函数支持我们在几秒后再来运行代码;● 在回调函数中也可以传入参数${${● 定时器是JavaScript异步函数的一种,它并不是影响后面代码的执行${${● 清除定时器${${//这段代码设置了一个定时器来模拟制作披萨的时间。如果菠菜是其中一种配料,它会在定时器到期之前清除定时器,表示披萨已经准备好了。原创 2024-05-17 22:15:15 · 279 阅读 · 0 评论 -
国际化数字(intl)
上一篇文章我们学习了使用国际化的API对日期进行格式化,本次我们来学习使用国际化API对时间进行格式化;● 当然我们也可以像格式化日期一样,使用浏览器的语言来判断用户的地区● 还可以传入不通的参数,例如给数字加上一个单位,m/s● 或者加入摄氏度之类的温度单位● 或者是添加百分号● 或者是添加欧元或者其他货币符号其他的更多的使用方法可以从MDN上面进行查看学习!原创 2024-05-16 23:57:04 · 265 阅读 · 0 评论 -
国际化日期(inti)
我们可以使用国际化API自动的格式化数字或者日期,并且格式化日期或数字的时候是按照各个国家的习惯来进行格式化的,非常的简单;● 再次回到我们的应用程序,我们给每个用户中定义了国家码,要实现每个人登录按照他国家的习惯来显示时间。比如说这是按照中国的习惯来进行格式化,我们习惯按照年月日时分秒来排列时间。● 我们也可以直在浏览器中自动的获取你的地区,无需手动的去指定地区。大家也可以根据下面的文档详细的学习这个国际化API。● 除了这些,存取款的时间也需要根据用户国家改变。原创 2024-05-15 22:02:26 · 320 阅读 · 0 评论 -
JavaScript中带日期的操作
当我们把日期转换为Number类型的时候,就会变成时间戳(毫秒)● 所以我们就可以利用时间戳去做点东西,例如你的女朋友给你两个时间,一个时间是第一次约会的时间,第二个时间是第二次约会的时间,问你第一次约会和第二次约会间隔多少天?但是为了防止出现负数,我们还是给加上绝对值。原创 2024-05-14 21:31:29 · 443 阅读 · 0 评论 -
向银行家应用程序添加日期
● 首先我们将下面图片上的时间更换成现在的时间${${${${${● 但是一般情况下,我们更喜欢能看到04/05这样的表达方式${getDate${getMonth1${getHours${getMinutes${${${${${注:padStart后面有两个参数,第一个参数就是必须为几位数,不够的用第二个参数补齐;原创 2024-05-13 22:33:19 · 388 阅读 · 0 评论 -
JavaScript创建日期
● 将年转换为毫秒(创建了一个表示从1970年1月1日午夜(UTC时间)起经过3天的毫秒数)注:在JavaScript中月份是从0开始的,所以上面显示是六月份。我们知道5月只有30天,所以往后延两天,输出的是6月2日。● 直接按照年、月、日、时、分、秒输入,以逗号隔开。● 我们也可以让时间以一种良好的方式输出。● 如果日超出了一个月的天数,往后延。● 以时间戳(毫秒数)的方式输出。● 我们也可以修改日期中的年份。● 直接输入月、日、年、时间。● 获取日期中的年月时分秒。● Unix创建的时间。原创 2024-05-11 22:06:29 · 405 阅读 · 1 评论 -
JavaScript使用 BigInt
在 JavaScript 中,最大的安全整数是 2 的 53 次方减 1,即 Number.MAX_SAFE_INTEGER,其值为 9007199254740991。这是因为 JavaScript 中使用双精度浮点数表示数字,双精度浮点数的符号位占 1 位,指数位占 11 位,尾数位占 52 位,因此能够准确表示的整数范围是有限的。超过这个范围的整数可能会失去精度。● 可以看到,超过这个精度,整数的精度就会丢失,可能会出现一些问题。原创 2024-05-10 20:09:51 · 300 阅读 · 1 评论 -
JavaScript数字分隔符
● 如果现在我们用一个很大的数字,例如2300000000,这样真的不便于我们进行阅读,我们希望用千位分隔符来隔开它,例如230,000,000;这好像行不通,JavaScript会自动的忽略掉这个数字中的分隔符;● 除此之外, 最好不要在数字中添加上面的分隔符,有时候会出错。● 就目前而言,我们可以使用API的方式来实现我们上述的需求。原创 2024-05-08 21:20:11 · 349 阅读 · 1 评论 -
JavaScript余数运算符
● 我们可以利用这个特性来判断一个数是奇数还是偶数${${原创 2024-05-07 20:36:28 · 207 阅读 · 1 评论 -
JavaScript中Math函数与舍入
● 使用Math.trunc()方法只是简单的去除小数部分,这里也有其他四舍五入的方法。● 页面的贷款功能实际上一般情况下不会出现小数部分的,我们来通过四舍五入来解决。● 接下来,我们将所有的值都编程两位小数。● 生成一个给定范围内的随机数。原创 2024-05-06 19:29:21 · 286 阅读 · 0 评论 -
JavaScript转换和校验数字
● 除了这些,也可以解析浮点数。但是这种解析必须开头是数字。● 判断一个数值是不是数字。原创 2024-04-30 21:57:01 · 147 阅读 · 1 评论 -
JavaScript代码挑战#4
/ 编程挑战 #4/* 朱莉亚和凯特仍在研究狗,这次她们研究的是狗是否吃得太多或太少。吃得太多意味着狗当前的食物份量比推荐份量大,吃得太少则相反。吃得适量意味着狗当前的食物份量在推荐份量的正负 10% 的范围内(参见提示)。祝你好运😀 */原创 2024-04-29 22:09:05 · 985 阅读 · 2 评论 -
JavaScript数组方法练习
注: ++count不要写成了count++,很好理解,++count是先运算后赋值,而count++先赋值后运算!● 将一段话的首字母转换为大写字母,其他都是小写,但是请注意,有一些字符不需要进行转换。● 计算所有账号中大于1000存款的有多少笔?接着我们来改进一下上面的代码。● 分别计算存款和取款之和。可以将计数的代码改进一下。原创 2024-04-28 21:50:00 · 121 阅读 · 1 评论