javascript
文章平均质量分 76
YinJie…
罗曼罗兰说:“这个世上只有一种真正的英雄主义。那就是,认清生活的真相,并且仍然热爱它。
展开
-
【JavaScript进阶】 一步一步带你手写 Promise,理解核心的异步链式调用及JS执行机制原理
现在网上有非常多的手写 Promise 教学文章,但无不例外都是给你一堆代码,或者某些核心代码,让你看完之后感觉,嗯,很厉害,但还是不知所云,不知其所以然。那么本文真正从一个小白开始带你深入浅出,一步一步实现自己的 Promise,这种自己造轮子的过程一定是进步最快的过程,快上车开始吧!原创 2022-08-19 23:31:23 · 963 阅读 · 17 评论 -
JS数组扁平化实现的四种方法
数组的扁平化就是将一个嵌套多层的数组 array(嵌套可以是任何层数)转换为只有一层的数组。本文就是要用多种方法实现这个 flatten 函数原创 2022-08-11 11:13:17 · 338 阅读 · 1 评论 -
14道高频手写JS面试题及答案,巩固你的JS基础
作为前端开发,JS是重中之重,最近结束了面试的高峰期,基本上offer也定下来了就等开奖,趁着这个时间总结下14个手写JS问题,这些都是高频面试题,希望对你能有所帮助。原创 2022-08-07 22:38:14 · 2137 阅读 · 0 评论 -
原生JS实现飞机大战游戏 超详细解析 快来做一个自己玩吧
案例分析:1.开始前 :一个弹窗面板2.游戏中:背景滚动 hero的操作 敌机的创建与运动 子弹的创建与运动 碰撞检测3.游戏结束:一个弹窗面板下面介绍一下一些核心的代码:背景滚动的实现:function start() { var timer = setInterval(function() { bgMove(); },30) }start();这是我们的初始化函数,为了实现背景滚动的效果我们需要定义一...原创 2022-05-19 17:50:46 · 5796 阅读 · 55 评论 -
详解 JavaScipt 深拷贝与浅拷贝
一、JS中数据的存储形式-堆栈我们先简单理解一下堆栈分别是啥:什么是栈:计算机为原始类型开辟的一块内存空间 string number ...什么是堆:计算机为引用类型开辟的一块内存空间 object我们分别分析下面两段代码:var a = 'jack'var b = ab = 'andy'console.log(a,b);//jack andyvar c = {key : 1}var d = cd.key = 2console.log(c,d);//{ key: 2原创 2022-05-09 14:36:43 · 372 阅读 · 14 评论 -
硬核解析Promise对象(这七个必会的常用API和七个关键问题你都了解吗?)
什么是promisePromise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。通俗讲,Promise是一个许诺、承诺,是对未来事情的承诺,承诺不一定能完成,但是无论是否能完成都会有一个结果。1.Promise的基本使用Promise 是异步编程的一种解决方案,主要用来解决回调地狱的问题,可以有效的减少回调嵌套。从语法上说:Promise就是一个构造函原创 2022-04-23 08:00:39 · 1353 阅读 · 45 评论 -
原生JS实现FlappyBird游戏 超详细解析 快来做一个自己玩吧
1.适配设备pc:320*568移动:占满窗口适配设备:新建一个public.js文件,来判断是否是移动端设备function isPhone() { var arr = ["iPhone","iPad","Android"] var is = false; for(var i = 0;i<arr.length;i++) { if(navigator.userAgent.indexOf(arr[i])!=-1) { i原创 2022-04-18 18:17:43 · 8571 阅读 · 45 评论 -
我用JS做了一个记账本 [数据可本地存储] 附万字详解
我们所有的操作都是围绕点击添加新交易来进行的那么我们先给添加新交易这个按钮绑定点击事件,那么显然我们要对输入进去的内容进行一个判断,我们待会把isAlert函数补全,isAlert函数就是在输入框内容不符规范时返回flase,这样就弹出一个有问题的对话框提醒用户,我们先做一个简易的,主要先把逻辑搞懂,然后再加以完善var add = document.querySelector('#add');//添加交易var name = document.querySelector('#name');//原创 2022-04-15 13:27:31 · 5441 阅读 · 21 评论 -
JS DOM节点操作详解
这里写目录标题一、获取元素的两种方式🍀1.利用DOM提供的方法获取元素2.利用层级关系获取元素二、节点概述💨三、节点层级🔥1.父级节点2.子节点3.第一个子元素和最后一个子元素4.小案例(新浪下拉菜单)5.兄弟节点6.创建添加节点7.删除节点8.复制节点一、获取元素的两种方式🍀我们获取元素通常用两种方式:1.利用DOM提供的方法获取元素1.document.getElementByld()2.document.getElementsByTagName3.document.querySelecto原创 2022-04-16 08:39:51 · 3198 阅读 · 5 评论 -
原生JS实现表单验证(基于正则表达式)
🙋在做这个表单之前我们先想看一下做出来的静态表单:👏看一下大致的html结构:<div class="box"> <form action="" id="form-com"> <p class="main">姓名</p> <input type="text" placeholder="请输入姓名" id="main-in" class="test">原创 2022-04-12 18:17:36 · 1910 阅读 · 1 评论 -
详解JS 作用域与作用域链
作用域和作用域链方面的知识是JS的重点,去面试十个有八个都会问你这块的知识,所以说这块是特别特别的重要,下面我们好好理解一下什么是作用域先上一段代码:var a = 'jack';function fn() { var a = 'frank';}console.log(a);我们在函数里定义了一个a变量,在函数外也定义了一个a变量,那最后输出的应该是哪一个a的值呢?这个时候就有了作用域这个概念了,简单地说作用域就是限制某个变量只能在某个区域内有效。作用域有全局作用域和局部原创 2022-04-09 21:47:30 · 5149 阅读 · 1 评论 -
[JavaScript] 数组迭代方法详解
目录1.Array.forEach()2.Array.map()3.Array.filter()4.Array.reduce()5.Array.every()6.Array.some()7.Array.indexOf()1.Array.forEach()forEach() 方法为每个数组元素调用一次函数(回调函数)。该函数接受 3 个参数:项目值 项目索引 数组本身特点:这个方式是没有返回值的,只是遍历数组中的每一项,不对原来数组进行修改,但是可原创 2022-04-06 16:18:08 · 1199 阅读 · 1 评论 -
[JavaScript] 本地存储(sessionStorage与localStorage)
小案例:在这个登录注册页面案例里,我们并没有连接数据库而是用到了本地存储这个知识点完成的,我们看看本地存储究竟是什么:本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大, sessionStorage约5M、localStorage约20M .只能存储字符串,可以将对象JSON.stringify()编码后存储window.sessionStorage特点生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用使用存储原创 2022-03-29 00:26:33 · 483 阅读 · 1 评论 -
通过swiper插件制作旋转木马轮播图
实现效果:1.swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀,我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下下载swiper-5的压缩包然后解压然后进入js文件夹,复制里面的swiper.min.js文件然后粘贴到我们的项目文件夹中,同理再进入css文件夹,将里面的swiper.min.css复制到项目文件夹中回到我们swiper插件的页面,单击这里的新窗口打开:然后右击点击查看网页源代码:原创 2022-03-26 12:05:51 · 6285 阅读 · 2 评论 -
移动端网页特效入门
文章目录1.触屏事件2.触摸事件对象(TouchEvent)3.移动端拖动元素4.移动盒子小案例1.触屏事件移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生S书写效果,但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件),Android和IOS都有。常见的触屏事件如下:触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指在一个D原创 2022-03-25 16:07:34 · 2570 阅读 · 1 评论 -
JS 仿淘宝固定右侧侧边栏(可返回顶部)案例
我们先看一下淘宝的侧边栏:功能需求1.原先侧边栏是绝对定位2.当页面滚动到一定位置,侧边栏改为固定定位3.页面继续滚动,会让返回顶部显示出来比如说这是我们的页面:当被页面卷去的部分刚好为header高度时,我们就将右侧侧边栏改为固定定位当页面滚动到main主体部分时,让侧边栏显示返回顶部字样,点击返回顶部可以通过缓动动画滑到顶部案例分析:1.需要用到页面滚动事件scroll因为是页面滚动,所以事件源是document2.滚动到某个位置,就是判断页面被卷去的上部值。3.页面被卷去的头原创 2022-03-25 10:48:30 · 1934 阅读 · 0 评论 -
[JavaScript] client系列属性及scroll系列属性
文章目录client系列scroll系列页面被卷去的头部三大系列总结他们的主要用法:client系列client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。client相关属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、原创 2022-03-24 17:59:40 · 2009 阅读 · 1 评论 -
JS实现轮播图(自动+手动)
网页轮播图效果:核心原理:tips:代码在文章末尾这个ul就是我们这四张图片的父盒子,我们通过对这个父盒子添加动画函数来实现移动,然后给父盒子来一个溢出隐藏就达到了轮播的效果动画函数如下:function animate(obj,target,callback) { //先清除以前的定时器,只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { //步长值写到定时器原创 2022-03-23 16:34:24 · 18715 阅读 · 16 评论 -
[JavaScript] 动画函数的封装
文章目录动画实现原理核心原理:实现步骤:js的动画:css的动画:动画函数简单封装给不同对象添加不同的定时器核心原理:代码示例:缓动动画原理思路:实现效果:代码示例:动画函数添加回调函数回调函数原理:示例代码:实现效果:动画函数封装到单独js文件里面当我们学习了动画之后,我们就能做各种各样的网页特效了。有的同学总是杠,js能做的动画css也能做。首先你是来学js的没必要杠,css的灵活度远不如js,其次做网页轮播图等特效时用js是不是方便的多动画实现原理核心原理:通过定时器setInterval()原创 2022-03-23 10:11:14 · 1275 阅读 · 2 评论 -
[JavaScript] 仿京东放大镜案例
实现效果:案例分析:整个案例可以分为三个功能模块第一个模块:鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能第二个模块:黄色的遮挡层跟随鼠标功能。第三个模块:移动黄色遮挡层,大图片跟随移动功能。相关的代码会在最后给大家贴出来,为方便理解先给大家对本例进行一下讲解:第一部分:preview_img 代表装手机图片的盒子 ,mask代表用来遮罩的淡黄色盒子,big代表用来装放大效果手机图片的大盒子那么显而易见第一个模块主要就是做一个显示与隐藏的效果然后重头戏,第二个原创 2022-03-19 07:57:15 · 983 阅读 · 1 评论 -
[JavaScript] offset系列属性
offset概述offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等1.获得元素距离带有定位父元素的位置2. 获得元素自身的大小(宽度高度)注意:返回的数值都不带单位offset系列常用属性注意:1.element.offsetTop及element.offsetLeft以带有定位的父亲为准,如果没有父亲或者父亲没有定位则以body为准2.element.offsetWidth和element.offsetHeight 返回的宽度及高原创 2022-03-17 23:03:42 · 873 阅读 · 1 评论 -
[JavaScript] 获取URL参数(登陆卡片案例)
我们有两个html文件login.html是我们的登陆页面第一个登录页面,里面有提交表单,action提交到index.html页面第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果第二个页面之所以可以使用第一个页面的数据,是利用了URL里面的location.search参数在第二个页面中,需要把这个参数提取。第一步去掉?利用substr第二步利用=号分割键和值 split( '= )...原创 2022-03-17 21:53:05 · 1314 阅读 · 1 评论 -
[JavaScript] 仿新浪自动跳转页面案例
当我们在新浪网输入不正确的网址时,会弹出这样的页面,然后五秒钟后会返回首页但是新浪网的这个效果是不动的,我们想实现一种倒计时的效果那先看一下我们的实现效果吧(单击按钮实现倒计时跳转):案例分析:1.利用定时器做倒计时效果2.时间到了,就跳转页面,使用location.href示例代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <met.原创 2022-03-17 15:54:08 · 235 阅读 · 0 评论 -
[JavaScript] location对象的属性与方法
文章目录什么是location对象?什么是URL?location对象的属性location对象的方法什么是location对象?window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。什么是URL?通俗点说,URL就是我们所说的网址。官方点说,URL是对互联网上得到的资源的位置和访问方法的一种简洁表示,是互联网上标准资源的地址。URL它具有全球唯一性,正确的URL应该是可以原创 2022-03-17 15:13:46 · 4249 阅读 · 0 评论 -
[JavaScript] 发送验证码案例(基于定时器)
实现效果:案例:发送验证码点击按钮后,该按钮在设定时间内不能再次点击,防止重复发送短信案例分析:1.按钮点击之后,会禁用disabled为true2.同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改3.里面秒数是有变化的,因此需要用到定时器4.定义一个变量,在定时器里面,不断递减5.如果变量为0说明到了时间,我们需要停止定时器,并且复原按钮初始状态。示例代码:<body> 手机号码: <input type="numb原创 2022-03-15 18:16:10 · 1033 阅读 · 0 评论 -
[JavaScript] 定时器
两种定时器window对象给我们提供了2个非常好用的方法定时器。setTimeout()setInterval()setTimeout()定时器window.setTimeout (调用函数,[延迟的毫秒数]); //这个延迟单位是毫秒setTimeout(方法用于设置一个定时器 ,该定时器在定时器到期后执行调用函数。这个window在调用时可以省略setTimeout()定时器里的调用函数有这两种主要写法:1.setTimeout (function() { co原创 2022-03-15 15:24:29 · 768 阅读 · 1 评论 -
[JavaScript]京东秒杀倒计时案例
我们要做的是类似京东秒杀的倒计时效果:核心算法:1.输入的时间减去现在的时间就是剩余的时间,即倒计时,但是不能拿着时分秒相减,比如05分减去25分,结果会是负数的。2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。3.把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)转换公式:转换公式如下:●d= parselnt(总秒数/ 60/60/24); //计算天数●h= parselnt(总秒数/ 60/60 %24) //计算小时●m原创 2022-03-14 18:55:17 · 3150 阅读 · 0 评论 -
[JavaScript] 模拟京东快递单号查询案例
要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容实现效果:案例分析:1.快递单号输入内容时,上面的大号字体盒子显示(这里面的字号更大)2.表单检测用户输入:给表单添加键盘事件3.同时把快递单号里面的值( value )获取过来赋值给盒子( innerText )做为内容4.如果快递单号里面内容为空,则隐藏大号字体盒子盒子注意:注意: keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中。keyup事件触发的时候,文字已经落入文本原创 2022-03-13 18:08:49 · 576 阅读 · 1 评论 -
[JavaScript] 常用的键盘事件
文章目录常用的键盘事件键盘事件对象示例练习:模拟京东按键输入内容常用的键盘事件事件除了使用鼠标触发,还可以使用键盘触发我们主要学习以下三个键盘事件:这里举一下onkeyup的示例,当我们按键弹起的时候事件触发:document.addEventListener('keyup', function() { console.log('弹起'); })只要我按键弹起一次,控制台就会输出一次。键盘事件对象注意: onkeydown和onkeyup 不区分字母大小写,onkeypre原创 2022-03-13 16:50:51 · 7269 阅读 · 1 评论 -
[JavaScript] DOM编程-事件高级
一、注册事件注册事件有两种方式:传统方式和方法监听注册方式传统注册方式:利用on开头的事件onclick<button onclick= "alert('hi~')” ></button>btn.onclick = function() { }特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数代码示例:我们给传统注册事件按钮绑定了两个事件,那么在浏览器中会执行哪一个呢?这体现了传统注册方式的唯一性,同原创 2022-03-11 11:38:24 · 913 阅读 · 0 评论 -
[JavaScript小案例] 跟随鼠标移动的天使
文章目录什么是事件对象?鼠标事件对象跟随鼠标移动的天使案例:案例分析:实现效果:代码示例:什么是事件对象?假如我们有一个div盒子,我们要给他绑定一个点击事件应该怎么做?<script> var div = document.querySelector( 'div ' ); div.onclick = function() {}</script>以前我们function里是不写东西的,现在我们在括号里面添加一个事件对象event:div.onclick原创 2022-03-10 16:17:25 · 1010 阅读 · 1 评论 -
[JavaScript] 简易版发布/删除留言案例
效果浏览:当我们在文本框里输入想要发布的内容然后单击发布后:留言会在下方弹出且文本框中内容清空,下面再发布一条留言:可以看到最新发布的留言是插入在最上方的,下面我要删除第二条留言就单击对应的删除键:示例代码及注释:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev原创 2022-03-09 12:33:34 · 523 阅读 · 0 评论 -
[JavaScript] 密码框验证信息案例
文章目录案例要求:案例分析:示例代码:最终效果:样式属性操作案例要求:我们要仿制的是新浪的注册页面:默认状态:如果输入不够六个字符:案例分析:1.首先判断的事件是表单失去焦点onblur2.如果输入正确则提示正确的信息颜色为绿色3.如果输入不是6到16位,则提示错误信息颜色为红色4.因为里面变化样式较多,我们采取className修改样式示例代码:<!DOCTYPE html><html> <head> <met原创 2022-03-06 15:14:23 · 1058 阅读 · 0 评论 -
【JavaScript】前端必学的tab栏切换布局分析
文章目录综合案例:案例分析:示例代码:自定义属性的操作:1.获取属性值:2.设置属性值3.移除属性值综合案例:本案例要完成的就是当鼠标点击上面相应的选项卡(tab),下面内容跟随变化:比如此时我们在商品介绍页面,然后我们单击售后保障选项卡:可以看到下面的内容也会发生变化案例分析:(1) tab栏切换有两个大的模块(布局html)(2) 模块选项卡中,点击某一个,当前这一个底色会是红色,其余不变(排他思想(3) 下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到选项卡里面最终效原创 2022-03-06 14:19:01 · 1317 阅读 · 1 评论 -
JavaScript 显示/隐藏文本框内容
案例要求:当鼠标单击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示默认状态:单击文本框时:可以看到里面的手机两字消失了,当我们鼠标移动到别的位置时,手机二字又会出现案例分析:1.首先表单需要两个新事件,获得焦点onfocus 失去焦点onblur2.如果获得焦点,判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容3.如果失去焦点,判断表单内容是否为空,如果为空,则表单内容改位默认文字示例代码:<!DOCTYPE html><html原创 2022-03-04 16:28:23 · 3665 阅读 · 0 评论 -
JavaScript 仿京东显示隐藏密码
我们想要仿照京东登陆页面做一个密码框:这个密码框部分右侧有一个闭着的小眼睛,此时默认密码框输入的密码是看不见的当我们单击这个闭着眼睛的小图标时,图标变成了睁着的眼睛,并且输入的密码也可见了,如下所示:那么下面附上这个小案例的代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt原创 2022-03-04 13:08:38 · 1553 阅读 · 2 评论 -
【JavaScript】DOM编程-什么是事件
学到事件,我们才开始与浏览器有一些交互,所以学起来也是非常有意思的一、事件三要素事件是有三部分组成的:事件源,事件类型,事件处理程序下面我们做一个通过点击按钮,弹出对话框的小程序:代码示例:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initia原创 2022-03-03 09:10:22 · 541 阅读 · 0 评论 -
JavaScript DOM编程-通过DOM获取页面元素的方法
文章目录一、什么是DOM?DOM树:1.文档:2.元素:3.节点:二、获取页面中的元素的几种方法:1.根据 id 获取元素2.根据标签名获取元素3.通过HTML5新增的方法获取元素4.根据特殊元素获取元素一、什么是DOM?DOM简称:文档对象模型,是一种处理可扩展编程语言的标准编程接口,我们通过这些接口来改变网页的内容、结构和样式。DOM树:1.文档:一个网页就是一个文档,DOM中使用document表示2.元素:页面中的所有标签都是元素,DOM中使用element表示3.节点:网页原创 2022-03-02 22:41:16 · 1567 阅读 · 0 评论 -
【javascript】arguments伪数组的使用
当我们不确定有多少个参数传递的时候,可以用arguments来获取。在javascript中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参下面给大家一个例子对arguments这个伪数组有个大概的了解,体会一下为何他叫伪数组:<!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2022-02-25 15:58:23 · 313 阅读 · 1 评论