随笔分类 -  前端

html css javascript
webpack5打包出的js在ie11, ie10中报错
摘要：使用webpack5默认打包出来的js文件在ie11, ie10中报错SCRIPT1002: 语法错误bundle.js (1,14)。原因和babel设置无关，webpack5中默认打包出来的js文件会用es6语法中的箭头函数： // 打包出来的bundle.js (()=>{"use stric 阅读全文
posted @ 2021-07-09 23:35 必慎 阅读(2417) 评论(2) 推荐(0)
svelte项目中使用scss写样式时，VS Code报错解决办法
摘要：按官方文档配置scss后，VS Code会报如图所示错误，如图 解决办法： 原因是使用node-sass时需配置node路径，首先在cmd上输入where node(windows) | which node(Mac,Linux)，找到node路径 C:\Users\xixi> where node 阅读全文
posted @ 2021-04-24 21:18 必慎 阅读(485) 评论(0) 推荐(0)
使用 flex 布局竖直排列时，竖直换行后子元素未撑开父元素的问题解决
摘要：使用 flex 布局竖直排列时，竖直换行后子元素未撑开父元素的问题解决 现有 html 结构如下: <div class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> 阅读全文
posted @ 2021-04-21 23:20 必慎 阅读(3835) 评论(0) 推荐(1)
响应式网站中的导航栏自动合并实例
摘要：响应式网站中的导航栏自动合并 实现当屏幕宽度减小时，右侧导航栏合并进 more 选项中 转载自https://bradfrost.github.io/this-is-responsive/patterns.html 原网址实例：https://codepen.io/Dreamdealer/pen/w 阅读全文
posted @ 2021-04-20 22:42 必慎 阅读(232) 评论(0) 推荐(0)
CSS实现自适应固定长宽比的矩形
摘要：css实现自适应固定长宽比的矩形 需要先在内容(图片元素)外面套一层标签，并使用padding-bottom将底部撑开(100%就是正方形, 75%就是4:3的长方形), 然后内容元素使用绝对定位，配合flex布局实现自适应。 html <div class="box-wrapper"> <div 阅读全文
posted @ 2020-12-22 23:09 必慎 阅读(804) 评论(0) 推荐(0)
npm安装image-webpack-loader报错解决办法
摘要：安装 首先先安装 npm install image-webpack-loader --save-dev 然后顺利报错: > cwebp-bin@5.1.0 postinstall D:\...\code\node_modules\cwebp-bin > node lib/install.js ‼ 阅读全文
posted @ 2020-11-10 23:46 必慎 阅读(9939) 评论(1) 推荐(1)
修改博客园代码块高亮显示的主题颜色
摘要：博客园(默认编辑器设置为Markdowm)是使用heightlight.js进行代码块高亮的。 因此可以通过下载heightlight.js官网的主题css修改博客园中的代码块高亮颜色。 修改方法: 进入heightlight.js官网, 点击demo页面预览, 查看主题效果 在下载页面选择需要的语 阅读全文
posted @ 2020-11-01 21:21 必慎 阅读(1406) 评论(4) 推荐(2)
webpack项目安装vanilla-lazyload实现懒加载
摘要：npm安装 vanilla-lazyload 介绍 vanilla-lazyload是一个轻量级、灵活的脚本，可将图像、背景、视频、iframe等实现懒加载 使用 npm安装 npm install vanilla-lazyload --save-dev 入口文件导入 import LazyLoad 阅读全文
posted @ 2020-10-30 23:17 必慎 阅读(921) 评论(0) 推荐(0)
webpack项目中通过npm安装和使用Swiper
摘要：Swiper的npm安装 npm安装 npm install swiper --save-dev 添加HTML元素 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 阅读全文
posted @ 2020-10-28 23:37 必慎 阅读(4655) 评论(1) 推荐(0)
webpack中使用wow.js和遇到的问题
摘要：在webpack项目中使用wow.js动画效果 安装wow.js npm install wowjs --save 安装wow.js依赖的animate.css npm install animate.css --save 在入口文件index.js中引用animate.css和WOW import 阅读全文
posted @ 2020-10-22 23:04 必慎 阅读(551) 评论(0) 推荐(0)
适配移动端时，浏览器出现横向滚动条
摘要：html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; 阅读全文
posted @ 2020-09-27 22:50 必慎 阅读(540) 评论(0) 推荐(0)
css 修改浏览器滚动条
摘要：// 修改滚动条 ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(0,0,0,0.1); } ::-webkit-scrollbar 阅读全文
posted @ 2020-09-02 00:00 必慎 阅读(879) 评论(0) 推荐(0)
将数组转为树形结构
摘要：1. 有随机生成的数组如下(facode表示父节点code，facode = 0表示根节点): const oriData = [ { facode: "14220of5ccke", code: "pwyi3pvv81r" }, { facode: "wd2jonfr2gr", code: "qay 阅读全文
posted @ 2020-07-06 09:34 必慎 阅读(4829) 评论(0) 推荐(0)
html页面创建canvas画板，在画板添加图片，并实现图片拖拽
摘要：1. 在html页面中引入canvas标签，设置大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s 阅读全文
posted @ 2020-06-22 18:01 必慎 阅读(2118) 评论(0) 推荐(0)
vuecli4 给路径取别名
摘要：1. 创建vue.config.js文件 2. const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { chainWebpack: config => { // 阅读全文
posted @ 2020-05-24 19:15 必慎 阅读(1622) 评论(0) 推荐(0)
javascript 数组与字符串之间的转换
摘要：1、字符串转换为数组 let string = '123,456,789'; let stringResult = string.split(','); console.log(stringResult) //输出["123", "456", "789"] let string2 = 'abcdef 阅读全文
posted @ 2020-04-18 20:35 必慎 阅读(349) 评论(0) 推荐(0)
npm换源至淘宝镜像
摘要：1. 直接终端输入 npm config set registry https://registry.npm.taobao.org 2.查看是否设置成功 npm config list 阅读全文
posted @ 2020-04-14 17:00 必慎 阅读(500) 评论(0) 推荐(0)
leetcode no.22 javascrupt解法
摘要：题目： 输入一个链表，输出该链表中倒数第k个节点。为了符合大多数人的习惯，本题从1开始计数，即链表的尾节点是倒数第1个节点。例如，一个链表有6个节点，从头节点开始，它们的值依次是1、2、3、4、5、6。这个链表的倒数第3个节点是值为4的节点。 解法1： var getKthFromEnd = fun 阅读全文
posted @ 2020-04-13 21:26 必慎 阅读(166) 评论(0) 推荐(0)
node.js作为后端，前端页面播放视频时，无法拖动视频控件进度条的解决办法。
摘要：1. 前端的HTML页面中直接写视频的地址，虽然可以播放，但是视频的进度条将无法工作。 <div class="watcht" > <video id="player" width="620" height="452" controls> <source src="/vedio/1-2.mp4" t 阅读全文
posted @ 2020-04-03 18:35 必慎 阅读(3076) 评论(0) 推荐(0)