分类：JS

2023
03-16

原生js实现简单轮播图效果

本文实例为大家分享了js实现简单轮播图效果的具体代码，供大家参考，具体内容如下效果如下：分析：分析效果：分析实现：1、通过document.querySelector('.类名')的形式获取到装轮播图的大盒子（.carousel）、装轮播图左右按钮的标签的父元素（.chevron）、获取左右按钮（.chevron-left、.chevron-right）、获取放轮播图图片的父元素ul（.carousel-body）【注：这里获取ul而不是回去li，是因为移动轮播图的时候是整个ul一起移动... 继续阅读 >
2023
01-13

JavaScript中各种二进制对象关系的深入讲解

目录前言各种对象的关系ArrayBufferTypedArrayUint8ClampedArray字符的相互转换DataViewBlobURL数据读取FileFileListFileReader相关资料总结前言现代JavaScript要面临更加复杂的场景，对于各种类型的数据传输也多了起来，其中涉及二进制传输，为了方便处理数据提高效率于是创造了ArrayBuffer对象。但是使用中会发现不仅仅有ArrayBuffer，还有TypedArray、DataView、Blob、FileReader等一系列对象，让人迷惑它们之间关系是什么？... 继续阅读 >
2023
01-13

使用JavaScript实现轮播图特效

本文实例为大家分享了JavaScript实现轮播图特效的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.aaa{width:600px;height:350px;position:relative;/*相对定位*/margin:50pxauto;/*离顶部50px，并且居中*/}.pictureimg{position:absolute;/*绝对定位*/}.dot{position:absolute;botto... 继续阅读 >
2023
01-03

js canvas实现圆角图片

本文实例为大家分享了jscanvas实现圆角图片的具体代码，供大家参考，具体内容如下圆角图片的代码实现：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><bodystyle="background:rgba(199,237,204,1)"><divstyle="display:flex;flex-direction:row"><!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。--><canvasid="drawing"width="40... 继续阅读 >
2022
11-02

JavaScript canvas实现九宫格切图效果

本文实例为大家分享了canvas实现九宫格切图效果的具体代码，供大家参考，具体内容如下首先页面展示直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>body{text-align:center;}... 继续阅读 >
2022
11-02

爬虫进阶-JS自动渲染之Scrapy_splash组件的使用

爬虫进阶-JS自动渲染之Scrapy_splash组件的使用 目录1.什么是scrapy_splash？2.scrapy_splash的作用3.scrapy_splash的环境安装3.1使用splash的docker镜像3.2在python虚拟环境中安装scrapy-splash包4.在scrapy中使用splash4.1创建项目创建爬虫4.2完善settings.py配置文件4.3不使用splash4.4使用splash4.5分别运行俩个爬虫，并观察现象4.6结论5.了解更多6.小结1.什么是scrapy_splash？scrapy_splash是scrapy的一个组件scrapy-splash加载js数据是基于Splash来实... 继续阅读 >
2022
10-31

javascript实现查询商品功能

本文实例为大家分享了javascript实现查询商品功能的具体代码，供大家参考，具体内容如下这是没有点击查询的主界面图这是点击名称查询之后按照价格查询代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>JavaScript查询功能</title><style>body{font-family:"微软雅黑";font-size:18px;}table{width:800px;border:1pxsolid#000;border-collapse:collapse;marg... 继续阅读 >
2022
10-31

JS 函数的 call、apply 及 bind 超详细方法

目录JS函数的call、apply及bind方法一、call()方法1、call()方法的模拟实现二、apply()方法1、apply()方法的模拟实现三、bind()方法1、bind()方法的模拟实现四、总结JS函数的call、apply及bind方法一、call()方法调用call()方法会立即执行目标函数，同时改变函数内部this的指向。this指向由方法的第一个参数决定，后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。/*正常模式*/letobj={sum(... 继续阅读 >
2022
10-08

JS中的reduce()方法使用小结

目录一、语法二、实例三、其他相关方法过去有很长一段时间，我一直很难理解reduce()这个方法的具体用法，平时也很少用到它。事实上，如果你能真正了解它的话，其实在很多地方我们都可以用得上，那么今天我们就来简单聊聊JS中reduce()的用法。一、语法arr.reduce(function(prev,cur,index,arr){...},init);其中，arr表示原数组；prev表示上一次调用回调时的返回值，或者初始值init;cur表示当前正在处理的数组元素；index... 继续阅读 >
2022
08-11

JavaScript CollectGarbage函数案例详解

首先看一个内存释放的实例：<SCRIPTLANGUAGE="JavaScript"><!--strTest="1";for(vari=0;i<25;i++){strTest+=strTest;}alert(strTest);deletestrTest;CollectGarbage();//--></SCRIPT>CollectGarbage,是IE的一个特有属性,用于释放内存的，使用方法应该是,将该变量或引用对象,设置为null或delete，然后在进行释放动作，在做CollectGarbage前,要必需清楚的两个必备条件:-一个对象在其生存的上下文环境之外，即会失... 继续阅读 >
2022
07-11

JavaScript中BOM和DOM详解

目录BOM（浏览器对象模型）1.window获取浏览器c窗口尺寸2.screen获取电脑屏幕大小3.window开启关闭窗口4.浏览器事件5.location 6.history7.navigator获取浏览器相关信息8.弹窗DOM(文档对象模型)DOM分类DOM对象Document文档对象element文档对象DOM事件操作鼠标事件键盘事件触屏事件特殊事件表单事件浏览器兼容处理兼容性写法，封装工具BOM（浏览器对象模型）所有浏览器都支持window对象，他表示浏览器窗口。所有... 继续阅读 >
2022
07-11

一文带你走进js数据类型与数据结构的世界

一文带你走进js数据类型与数据结构的世界 目录1.什么叫动态类型2.数据类型2.1原始类型（6种原始类型，使用typeof运算符检查）2.2null与Object2.3typeof操作符重点说明3.原始值3.1原始值基本概念3.2各类型说明1.什么叫动态类型JavaScript是一种弱类型或者说动态语言。我们不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据leta;//初始不给任何类型a=11;//a此时是n... 继续阅读 >
2022
07-06

js Promise并发控制数量的方法

目录问题背景思路&实现问题要求写一个方法控制Promise并发数量，如下：promiseConcurrencyLimit(limit,array,iteratorFn)limit是同一时间执行的promise数量，array是参数数组，iteratorFn每个promise中执行的异步操作。背景开发中需要在多个promise处理完成后执行后置逻辑，通常使用Promise.all：Primise.all([p1,p2,p3]).then((res)=>...)但是有个问题是，因为promise创建后会立即执行，也就是说传入到promis... 继续阅读 >
2022
06-29

JavaScript setTimeout与setTimeinterval使用案例详解

这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码，不过两者各有各的应用场景。实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代... 继续阅读 >
2022
06-13

JavaScript定时器实现限时秒杀功能

本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码，供大家参考，具体内容如下文件index.html代码：<!DOCTYPEhtml><html><head><metacharset="GBK"/><title>show</title><linkrel="stylesheet"href="css/index.css"type="text/css"/></head><body><divclass="divMain"><imgsrc="img/secondBuyImg.jpg"id="imgMain"/><h3style="color:#FF0000;">距离本厂秒杀结束还剩:</h3><divid="... 继续阅读 >