![](https://img-blog.csdnimg.cn/92b3b84b0885457fa65980b09e68e43c.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 71
与JavaScript相关的原生功能,会在该分栏!!!!!!
满脑子技术的前端工程师
一枚热爱分享知识的前端程序猿!!!
现用名:【满脑子技术的前端工程师】 曾用名:[机智的前端小白][前端程序]
展开
-
navigator.clipboard 读取剪贴板和写入剪贴板
系列文章目录前言一、介绍下navigator.clipboard(新Api)二、使用方法如下(获取和读取)1.读取剪贴板内容API名称如下(promise类型):使用方法如下:2.将文本写入剪贴板API名称如下(promise类型):使用方法如下:三、错误汇总1.使用http会出现Api报错错误如下图解决方法如下图报错原因总结(猛男💪💪💪必看)7条总结如下原创 2023-10-13 16:20:46 · 1195 阅读 · 0 评论 -
楼层滚动效果(超级简单,易懂)
系列文章目录一、楼层滚动效果图如下1. 下图是纯Css实现的楼层滚动2.通过Js优化后的楼层滚动如下图(🌹🌹)二、楼层滚动(Css实现)1.滚动原理2.代码如下三、楼层滚动(Js+Css优化后的楼层滚动)HTML、CSS代码如下JS代码如下总结(收工)原创 2023-04-26 16:58:34 · 1667 阅读 · 0 评论 -
JS检测是否安装了某应用(移动端和PC端)
系列文章目录前言一、URl SchemeURL Scheme是什么URL Scheme可以做什么URL Scheme 的组成二、js检测本地应用app1.代码如下(有使用注释)2.具体如下图所示三、浏览器调用PC端本地应用(与App大致类似)1.代码如下所示2.问题说明总结1.移动端⚠️2.PC端⚠️原创 2023-03-17 14:58:12 · 3086 阅读 · 5 评论 -
canvas使用toDataURL() 报错(解决canvas污染 和 图片跨域问题)
解决Canvas中toDataURL()的跨域问题报错说明(如下👇👇)一、不可用toDataURL()的原因如下:1.安全性和`"被污染"`的Canvas2.不止 toDataURL() 会被🚫(canvas画布被污染)3.控制台错误如下图二、画布污染的解决方法第一步:前端配置1.设置img的属性 (crossorigin)说明如下2.代码使用如下(HTML设置和JS设置)3.设置后的效果图如下(设置完出现了如下图所示)第二步.后端配置(下方有资源🔗,基于Node写的一canv原创 2022-11-02 16:07:40 · 3575 阅读 · 7 评论 -
复杂轮播图(原生js展示)
超详细--轮播图轮播图的1.HTML部分代码2.style样式区的代码3.JS代码(封装动画函数)4.JS代码(轮播图功能区)1.图片展示区:2.优化方案:轮播图的1.HTML部分代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &原创 2021-10-11 20:39:16 · 193 阅读 · 0 评论 -
腾讯云(图片处理)
处理图片用的到简易网站,可以对首屏展示图片进行优化!!!!!制作缩略图等原创 2023-02-09 15:18:03 · 131 阅读 · 0 评论 -
vue点击复制文本功能及原理
一、技术使用背景二、Vue2(点击复制粘贴功能的实现)1.安装库并引入2.定义methods和template结构(两种实现的方法)3.测试结果第二种使用的方法三、Vue3(点击复制粘贴功能的实现,只在TypeScript中生效)1.安装库并导入2.解构api、定义methods3.测试结果如下:四、复制技术的实现原理1.第一种原理方法(已废弃⚠️,但是可以继续使用)如下图代码如下2.第二种方法(上面废弃方法的替代规则)链接如下:点击⬇️下方🔗原创 2022-06-05 02:02:09 · 4979 阅读 · 4 评论 -
什么是跨域 - 如何解决请求跨域问题(前端和后端)
一、什么是跨域?1.浏览器的跨域和同源策略介绍2.火狐中的出现跨域(如下图)3.谷歌中的出现跨域(如下图)二、Vue代理服务器解决请求跨域三、工具解决跨域1.使用CORS Everywhere工具进行跨域四、Node解决跨域问题1.使用cors解决跨域(暂时3种方法,还会更新的)2.设置Access-Control-Allow-Origin解决跨域(单一接口)3.配置中间件解决跨域(全局)4.Node解决跨域的完整代码(如下)1.Node代码2.Html的代码五、HTML标签或J原创 2022-07-13 16:22:43 · 763 阅读 · 0 评论 -
如何控制滚轮横向滑动(原生JS实现方法)
控制滚轮横向滑动解决思路如下`1.如何在页面中展示横向滚动条``2.如何获取鼠标的【滚动轮】``3.通过什么Api去实现滚动效果 `一、如何创建横向滚动条1.代码如下(HTML和CSS)2.效果如下图所示:二、鼠标滚动轮事件(mousewheel和wheel事件)1.wheel鼠标滚轮(完美支持所有浏览器)JS代码如下所示:`*&*需要注意的事项(wheel滚动方向)*&*`:2.mousewheel支持该鼠标事件的浏览器如下(生产环境不可使用,应该使用wheel)测试效果图如下原创 2022-10-22 18:51:09 · 7470 阅读 · 0 评论 -
Canvas - 绘制图片模糊问题(canvas 生成图片模糊)
Canvas绘制模糊零、问题背景与解决思路一、涉及到的Api1.关于window.devicePixelRatiocanvas出现模糊的原因第一块屏幕测试 window.devicePixelRatio 的值(微软系统)第二块屏幕测试 window.devicePixelRatio 的值(mac系统)2.关于Window.matchMedia()二、解决方法(canvas绘制图片模糊)1.图片代码如下(记得查看注释)2.canvas效果图(图片处理前):3.canvas效果图,与原来的原创 2022-10-20 19:28:23 · 4177 阅读 · 0 评论 -
案例一:javascript的拖拽事件(drag,drop)
一、拖拽效果如下步骤所示1.正常的排序如下:2.拖拽列表1与列表2互换位置常按的效果如下图:切换位置后的效果如下图:二、具体代码如下1.HTML部分代码块2.javascript部分代码块3.js代码说明:总结:下面的🔗是跳转到案例二(关于 表格的拖拽的效果)原创 2022-10-17 20:30:01 · 3855 阅读 · 0 评论 -
前端本地文件上传预览 (拖拽,表格上传的三种方法)
零、补充1.文件预览&&文件拖拽2.表单数据上传(三种方法)一、如何实现上传文件?1.使用标签 input:2.效果图:二、获取到上传的文件info1.获取Dom节点代码如下:2.绑定事件代码如下:说明图如下:in show & 🔗...原创 2022-07-22 14:53:29 · 2664 阅读 · 2 评论 -
ES6 Promise/async await 处理地狱回调
系列文章目录一、地狱回调(代码案例):二、什么是Promise?三、使用Promise解决地狱回调:1.写一个返回Promise实例的方法代码分析图如下代码如下(示例):2.调用 requestMethods()查看结果代码分析图如下代码如下(示例):3.使用Promise封装真实请求结果如图所示:代码如下(示例):控制台结果如下:图1图2四、使用Promise语法🍬解决地狱回调(async await):Async await 代码如下:代码如下图所示:控制台如下图原创 2022-07-11 19:56:02 · 800 阅读 · 3 评论 -
滚动条的触底加载(原生和Vue实现三种方法)
滚动条的触底加载一、触底加载的原理1.原理如下所示:2.代码如下所示二、触底下载代码如下1.原生JS实现触底加载,代码如下:2.在Vue中如何使用原创 2022-07-06 23:23:27 · 4028 阅读 · 0 评论 -
JavaScript深浅拷贝(三种方法)
深浅拷贝实现方法(三种)提示:JavaScript中的深浅拷贝实现方法(三种)文章目录深浅拷贝实现方法(三种)前言一、如下图所示(图片非自己制作)二、深拷贝方法的实现(三种方法)1.通过递归的方式实现深拷贝(jquery中的extend)2.使用JSON.parse()和JSON.stringify()3.通过递归的方式实现深拷贝前言基本数据类型:数据存储在栈中。引用数据类型:数据存放在堆内存中,栈中存放了一个引用地址,指向堆内存中的数据。引用数据赋值,a 在栈区中,使用了 *b *原创 2021-11-20 12:00:00 · 2939 阅读 · 0 评论 -
前端文件下载的八种方法(解决pdf、图片在浏览器自动打开问题)
系列文章目录一、直接使用a标签下载文件(三种方法)第一种:下载.zip(压缩文件)第二种:下载.txt(文本文件)第三种:指定网络地址下载文件第四种:下载pdf文件(浏览器不自动打开)二、使用JavaScript(四种方法)第一种:绑定点击事件第二种:指定location的href地址第三种:使用form表单的下载文件第四种:使用saveAs(url)方法(谷歌、火狐等新浏览器不适用,只支持老的IE6、7、8)三、使用canvas进行图片下载(防止浏览器自动打开图片)代码片段如下所示原创 2021-11-18 22:41:42 · 29621 阅读 · 13 评论 -
JavaScript 上传文件并显示进度条(主页资源中有后端服务器).
系列文章目录提示:具体呈现内容如下图片,点击上传会出现进度条文章目录系列文章目录图片展示一、HTML和CSS样式如下二、JS代码块1.引入jquery库2.JavaScript代码(实现上传进度)总结:图片展示提示:以下是本篇文章正文内容,下面案例可供参考一、HTML和CSS样式如下HTML代码块<body> <input type="file" name="uoload" id="uoload"> <div class="progres原创 2021-11-18 21:43:06 · 1473 阅读 · 0 评论 -
form表单上传数据的三种方式(ajax传递 / FormData文件 / serialize序列化传递 )
Form表单数据上传前言一、第一个版本(通过ajax发送post请求)二、第二版本(formData上传文件)三、第三版本(serialize将传递表单中的数据序列化)HTML结构前言提示:form表单上传数据,可以使用…POST 和 GET 请求发送数据…服务器!!!一、第一个版本(通过ajax发送post请求)代码如下(基于jquery实现的)://第一个版本 $(function() { $('button').on('click', function(e) {原创 2021-11-18 21:13:28 · 9082 阅读 · 0 评论 -
JavaScript 上传文件并展示
文章目录js的拖拽上传,并在页面中展示文章目录前言一、js实现拖拽功能(文件拖拽到指定位置)二、关于怎么读取文件内容(用到FileRead()对象)1.第一步:遍历传递过来的file2.第二步:判断传递过来的文件是否是图片格式3.第三步:创建 new FileRead() 对象,然后 拿到创建的对象调用 readAsDataURL(f) 方法4.第四步: new FileRead()对象中的 onload方法,通过 e.target.result :获取到当前图片的base64地址,然后给图片的src问原创 2021-11-18 20:40:47 · 1750 阅读 · 0 评论 -
JavaScript 异步 实现异步的五种实现方法
JavaScript实现异步的五种实现方法文章目录JavaScript实现异步的五种实现方法前言一、同步和异步是什么?1.同步任务:2.异步任务:二、异步方法有哪些(5种):1.webWork(创建分线程)2.promise(es6方法)3.Async await 异步的实现方法4.window.fetch() 的实现方法5.jquery中的deffered对象 的实现方法总结异步处理方法前言一、同步和异步是什么?1.同步任务:js中的同步任务就是按照顺序执行(可以理解为A------>原创 2021-11-14 20:40:36 · 15531 阅读 · 0 评论 -
Promise的resolve和reject使用
前言(可以跳转解决地狱回调的问题👇🔗)一、Promise是什么?二、Promise的用法如下(resolve)1.promise的操作演示如下2.reject的用法如下总结原创 2021-08-28 17:49:58 · 15155 阅读 · 0 评论 -
简单的事件操作(jQuery键盘事件)
提示:简单的事件操作(jQuery键盘事件)文章目录一、jQuery键盘事件是什么?二、使用步骤1.引入jQuery库2.Js部分代码如下总结一、jQuery键盘事件是什么?方法: ①keypress(按下-起来),②keyup(起来),③keydown(按下),三个方法个人感觉用第一种超级多keypress(按下-起来)二、使用步骤1.引入jQuery库<script src="../jQuery地址库/jQuery.js"></script>2.Js部分代码如原创 2021-07-16 22:55:44 · 1680 阅读 · 2 评论 -
JS实现鼠标悬停显示二级菜单简单代码 jQuery实现(DOM操作基本类似)
JS实现鼠标悬停显示二级菜单简单代码 jQuery实现实现图片(效果图) 代码在最下面实现图片(效果图) 代码在最下面这是开始的一个标签---->鼠标移动到(div上弹出来下拉菜单)就成功出现了简单的代码如下(横向菜单以及竖向菜单,自己可以用table或者浮动解决问题):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http原创 2021-07-16 22:18:29 · 3788 阅读 · 0 评论