web前端
关注
分享
扫一扫
web前端专栏
东之建大坏蛋
这个作者很懒，什么都没留下…
展开
-
js的Promise
Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值。原创 2024-04-02 15:24:04 · 745 阅读 · 0 评论 -
js防抖和节流
通过减少连续重复事件的执行次数来减少消耗，优化用户体验。防抖主要用于输入框input事件等，节流主要用于页面resize，scroll事件等。原创 2024-04-02 15:18:51 · 379 阅读 · 0 评论 -
js键盘和鼠标事件汇总
js键盘和鼠标事件汇总原创 2023-02-15 10:35:10 · 275 阅读 · 0 评论 -
Error: Cannot find module ‘process-nextick-args‘，error:0308010C:digital envelope routines::unsupport
出现在node版本升级时，在原来的node文件夹里直接安装新版本node，却没有删除原来的node，导致运行npm命令报错。：将node换到V16版本，这样既可以运行以前的项目，也可以运行新的vite项目。用V17或以上版本的node运行之前的项目所报的错误。：先移除当前电脑上的Node，再安装新版本。原创 2022-10-27 10:18:47 · 572 阅读 · 0 评论 -
ts给Number类型数据添加自定义方法报错：类型“Number”上不存在属性“divideStr”的解决方案
代码】ts给Number类型数据添加自定义方法报错：类型“Number”上不存在属性“divideStr”的解决方案。原创 2022-08-05 08:52:39 · 1595 阅读 · 0 评论 -
html的tabindex属性，让普通元素能够执行聚焦(foucs)和失焦(blur)事件
html的tabindex属性，让普通元素能够执行聚焦(foucs)和失焦(blur)事件。原创 2022-08-02 10:57:55 · 1256 阅读 · 0 评论 -
前端websocket的一些属性，以及websocket的断开重连
代码】前端websocket的一些属性，以及websocket的断开重连。原创 2022-08-02 10:33:08 · 2173 阅读 · 0 评论 -
页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径
页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径。原创 2022-08-02 09:50:13 · 1066 阅读 · 0 评论 -
chrome浏览器f12的network里的请求行变得很大的解决方案
只需点击下面这个按钮来切换。原创 2022-07-07 16:00:12 · 1396 阅读 · 0 评论 -
js用变量保存函数名，并使用该变量调用函数的方式
1.用eval方法function fn1(){ console.log(123) } function fn2(){ console.log(456) } function fn3(){ console.log(789) } let index = 1 let fnName = 'fn' + index eval(fnName)() // 最终输出1232.使用对象保存函数原创 2022-04-25 09:50:41 · 1656 阅读 · 0 评论 -
使用axios插件传数据的Content-Type以及格式问题
1.一般来说，前后台对接，常用的Content-Type有：application/json，application/x-www-form-urlencoded 以及 multipart/form-data，当我们使用axios时，一般不需要我们主动去设置Content-Type，而是跟着我们传的数据格式自动适应。2.get请求get请求时传递的参数是会出现在url里面的，我们使用aixos传递get请求时可用格式如下（1）将参数拼接在url里this.$axios({ method: 'get原创 2022-04-01 10:07:34 · 6519 阅读 · 3 评论 -
Uncaught SyntaxError: await is only valid in async functions...，以及async的就近原则
当你遇到这个问题时：Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules。你就要去看一下你的await关键字是否放在async声明的函数里面，正确写法如下：async function insideFn() { await promiseFn() console.log('第二步执行完毕') }async的就近原则有时候我们在async声明.原创 2022-04-01 09:26:33 · 12216 阅读 · 0 评论 -
‘$‘ is defined but never used，‘func‘ is defined but never used
1. ‘$’ is defined but never used删除下面这一行2. ‘func’ is defined but never used删除下面这一行原创 2022-03-15 09:59:25 · 367 阅读 · 2 评论 -
win11配置node环境的问题汇总
1.无法识别node或npm命令①去配置node路径②win11下有两个打开powershell的方式，有时用第一个方式打开的powershell无法识别node或npm命令，而用第二种方式可以。2.全局安装资源失败，例如 npm i @vue/cli -g 失败，报错The operation was rejected by your operating system…以管理员身份运行powershell 或者命令行，再全局安装资源3.npm run serve时报错’vue-cli-ser原创 2022-02-28 17:16:45 · 2325 阅读 · 2 评论 -
使用a链接平滑滚动到页面某一元素位置
效果：代码：<div class="box"> <div class="top"> <div><a href="#content_1">1</a></div> <div><a href="#content_2">2</a> </div> <div><a href="#content_3">3</a> &l原创 2022-02-11 10:37:40 · 442 阅读 · 0 评论 -
js用数组的reduce方法实现一些简单的计算：数组累加，累乘，求最大项，去重，求每个元素出现的次数
累加const arr = [1, 2, 3, 4]arr.reduce((preV, curV) => preV + curV) // 10累乘const arr = [1, 2, 3, 4]arr.reduce((preV, curV) => preV * curV) // 24求数组最大项const arr = [1, 4, 3 ,5, 2 ,4]arr.reduce((preV, curV) => Math.max(preV, curV)) // 5.原创 2022-01-25 11:22:43 · 847 阅读 · 0 评论 -
js简单实现input输入框的防抖处理，input输入时延迟一段时间后自动搜索
<input type="text" oninput="input()">let timer1 // 声明定时器function input(){ // 防抖处理 if(timer1){ clearTimeout(timer1) } timer1 = setTimeout(search, 500) // 500ms后执行 search 函数}function search(){ console.log('正在搜索...')}...原创 2022-01-11 16:41:36 · 1823 阅读 · 0 评论 -
after伪元素模拟title效果，ie不能使用fit-content，伪元素的文本内容换行，伪元素content绑定html标签的属性
事情是这样的：1.那天，领导觉得元素的默认title效果不好，叫我换一种效果，我说行，不就是模拟title效果吗，于是我用了after伪类，结果如下： span{ color: black; background: #da8c8c; position: relative; top: 100px; left: 400px; } span:hover::after{ display: inline-block; background: rgb(212原创 2021-12-24 21:09:00 · 1067 阅读 · 0 评论 -
js控制两个页面之间的交互，一个页面的行为影响另一个页面
先说解决方案：用localstorage1.在一个页面监听storage变化：window.addEventListener('storage', function() { alert('storage变化了！' + localStorage.getItem('name')) XXX //这里写你的逻辑}2.在另一个页面修改localstoragelocalStorage.setItem('name', '一颗红星');...原创 2021-12-22 15:53:05 · 1927 阅读 · 0 评论 -
vs code配置eslint代码自动修复，让你的代码自动适应eslint规则
1.vs code安装eslint插件2.settings.json中配置// eslint配置自动补全 "eslint.workingDirectories": [ ".eslintrc.js", { "mode": "auto", } ], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }...原创 2021-12-20 11:33:14 · 1219 阅读 · 0 评论 -
用百度富文本编辑器UMeditor实现对html文本的编辑功能，vue中使用UMeditor编辑器
百度 UMeditor 编辑器资源免费下载地址：https://download.youkuaiyun.com/download/WanweI897/67333059（注意：我修改了 UMeditor 源码里面的css样式文件以用于自己项目，同时在 umeditor.min.js 文件中导入了jquery以适应vue环境，所有你使用时可能会有样式问题或在 umeditor.min.js 文件中报错，自己修改就好。）该编辑器没有官方文档，不过百度另一个编辑器UEditor有官方文档，两者有相似之处，可以前往查看：h原创 2021-12-20 10:54:31 · 1089 阅读 · 0 评论 -
Parsing error: Unexpected token ＜与 移除vue项目的eslint
起因：想要关闭vue里的eslint，所以在package.json文件里面删除一些eslint的配置。我删除了这两行，结果报错。实际上只要删除下面一行就行，这样就不会报错了。原创 2021-12-16 15:13:36 · 773 阅读 · 0 评论 -
行内元素之间存在间隙，消除多个行内元素之间的间隙
元素里如果有多个行内子元素，子元素之间就会存在间隙，解决方法有：（1）给前面子元素设置浮动：float: left（2）给父元素设置flex布局：display: flex（这个方式最好，能给父元素内所有行内子元素消除间隙，且最稳定）（3）给后面子元素设置负的偏移：margin-left: -6px（不建议使用）...原创 2021-12-09 22:17:31 · 1095 阅读 · 0 评论 -
页面多出一块无法选中的区域，ie浏览器使用transform: translate属性使页面多出一块空白区域且造成不必要的滚动条
今天写项目时发现在ie浏览器下，页面右侧多出一块很小的无法选中的区域，造成页面出现横向滚动条，而在其他浏览器下均无此情况。经过一个个元素排查最后发现是ie浏览器下使用transform: translate的bug造成的。比如如下代码会让页面出现横向滚动条：而我们给span设置transform属性后一般来说因为span的transform属性使元素向左移动40px大于right属相向右的20px，所以此时页面不会出现横向滚动条，在chrome浏览器下测试的确如此，而在ie下仍然会有滚动条，滚原创 2021-12-08 14:48:34 · 1287 阅读 · 2 评论 -
页面内容太多分步加载，用js和vue实现滚动条下拉加载功能
效果：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-11-14 14:53:09 · 706 阅读 · 0 评论 -
谷歌，火狐等浏览器美化滚动条与ie使用自定义滚动条
1.谷歌等webkit内核/*滚动条美化 webkit内核*/*::-webkit-scrollbar { width: 8px; height: 8px;}*::-webkit-scrollbar-track { /*background-color: #F1F1F1;*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}*::-webkit-scrollbar-thumb原创 2021-11-03 16:29:24 · 1041 阅读 · 0 评论 -
@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。
使用ttf字体文件在ie下会报错，因为ie不支持ttf文件，不过ie支持eot文件。解决方法：@font-face { font-family: MicrosoftYaHei-Bold; src: url("../plugin/font/MicrosoftYaHei-Bold.eot"),url("../plugin/font/MicrosoftYaHei-Bold.ttf");}...原创 2021-11-03 16:15:56 · 1430 阅读 · 0 评论 -
js实现页面全屏和退出全屏（模拟F11效果），禁止F11全屏，监听页面是否全屏
1.js实现全屏和退出全屏（模拟F11效果）此方法实测支持ie11，chrome，firefox，qq浏览器，360，搜狗，edgevar element = document.documentElement;//全屏，注意api中单词的大小写if (element.requestFullscreen) { element.requestFullscreen()} else if (element.msRequestFullscreen) { // 兼容ie11，11以下不支持 eleme原创 2021-11-03 16:01:14 · 4641 阅读 · 0 评论 -
ie浏览器等兼容es6
我们的页面要兼容ie时会发现ie不能使用es6的内容，可以使用 browser 和 browser-polyfill 两个插件让ie支持es6，同时要将script标签的type改为"text/babel"<script src="../static/plugin/browser.min.js"></script><script src="../static/plugin/browser-polyfill.min.js"></script><scr原创 2021-11-03 15:36:14 · 2017 阅读 · 0 评论 -
ie下元素被覆盖且设置z-index无效的解决办法
ie下给元素设置 z-index 高于另一个元素但还是被覆盖，而且ie11以下又不支持 pointer-events 属性，导致元素无法点击。可以试试给该元素设置定位属性如 position: relative 等;原创 2021-10-15 17:04:07 · 294 阅读 · 0 评论 -
做多页面项目不搭建框架时，html文件使用vue自定义组件的方法
①创建一个组件<template> <div>这是一个自定义组件!</div></template><script>module.exports = { //注意这里要用module.exports,不能用export default,不然可能会出问题 data(){ return {} }}</script><style scoped></style>②html导入原创 2021-08-05 10:30:30 · 599 阅读 · 0 评论 -
vue组件中dom元素绑定store仓库中的属性
vue组件中dom元素绑定store仓库中的属性原创 2021-07-27 14:53:23 · 705 阅读 · 0 评论 -
解决google浏览器无法自动播放音视频问题
浏览器报错：Unmuting failed and the element was paused instead because the user didn’t interact with the document before 或 Uncaught (in promise) DOMException。由于google的一些制度，我们在写html5项目时会发现刷新页面时无法自动播放audio和video，即使你添加了autoplay属性也无济于事，下面提供两种解决方案。方案一：解铃还须系铃人googl原创 2020-10-14 21:42:26 · 6425 阅读 · 0 评论 -
Not allowed to load local resource 这类问题的解决方案
当我们在开发前端项目时，要引用一张图片或者音频等的绝对路径时会引发上述问题，这是google处于安全因素考虑不让引用放在本地电脑上的资源解决方案：google浏览器在chrome网上应用店下载 Web Server for Chrome 应用https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/reviews安装并打开后：这个插件能让我们的本地资源运行在一个原创 2021-02-04 02:04:41 · 3600 阅读 · 0 评论