web前端
左钦杨
程序员
展开
-
Error: Command failed: C:\Users\tangx\AppData\Local\Programs\Python\Python31
有些插件(如FFI)引入后,打包机器的硬件芯片和要打的包是对应的 比如 电脑是 Mac arm64的芯片 只能打 mac arm64的包。安装需要 使用管理员权限 启动powershell 且 需要很好的网络,耐心等待 安装不上就切换网络。于是,找了台windows电脑,在npm install 的时候报如题错误。所以windows 64位的包需要有一台 windows 64位的电脑。装完重启 powerShell,再执行npm install就好了。因为开发的Electron需要打包,发现了一个问题。原创 2023-06-12 15:55:14 · 870 阅读 · 0 评论 -
css 图片居中对齐多行文字中的第一行
文字text-indent(首行缩进让位) 图片绝对定位。/* 文字基线上对齐 *//* 和文字 行高一致*/原创 2022-11-11 11:44:26 · 756 阅读 · 0 评论 -
【svg.js】html2canvas插件object-fit样式不生效问题
修改html2canvas源码 将其中的方法代码换掉。原创 2022-10-14 17:42:58 · 772 阅读 · 1 评论 -
js常用正则表达式和工具方法
【代码】js常用正则表达式和工具方法。原创 2022-10-14 17:40:28 · 489 阅读 · 0 评论 -
【svg.js】 svg转canvas
在svg绘制好的图表想要使用html2canvas绘制图形时 会遇到很多bug 所以最好先转换为canvas获取base64图片连接。如有参考请自行过滤业务代码。原创 2022-10-14 17:28:49 · 939 阅读 · 0 评论 -
【svg.js】带上下箭头的圆角信息提示框
直接上代码:(宽 高 三角偏移量 圆角)原创 2022-10-14 17:22:08 · 295 阅读 · 2 评论 -
【svg.js】贝塞尔曲线
需要保证俩个点都在矩形范围内,上面代码 获取控制点的方法中。为了保证曲线不超出范围,像下面这样。原创 2022-10-14 17:12:14 · 1140 阅读 · 0 评论 -
css图片自动裁剪居中 不拉伸 自适应
object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。object-fit一般用于img和video标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。注意这几个属性值httpshttps。...原创 2022-07-20 10:39:56 · 2392 阅读 · 0 评论 -
【技术面试】自我介绍怎么介绍
背景最近在接触到一些投资方和合作伙伴的时候,被动面试了一波,觉得自己的面试回答,和我面试其他人的时候,我看不上的那些人的回答,不相上下,于是决定恶补一波,我作为面试官想听到的回答,虽然只是一个简单的自我介绍,但我自己应该如何去回答这个问题才让自己不被流于洪流之中,脱颖而出。自我介绍怎么介绍冗余回答:我xxxx年毕业于某大学,第一家公司是做asp.net的网站,我主要工作是在开发任务之余帮助大家调整一些css兼容问题,自己对于PS切图和布局非常熟悉,当时认为浏览器兼容问题无非css和js都可以解.原创 2022-02-21 20:11:13 · 448 阅读 · 0 评论 -
safari中flex布局时img宽高等比缩放自适应问题
图片的父元素设置align-items:center; 就好了原创 2021-12-22 14:29:00 · 1030 阅读 · 0 评论 -
React+TypeScript组件开发(一)TypeScript类型
TypeScript 基础类型// 布尔类型let isDone: boolean = false// 数值类型let age: number = 20let binaryNumber: number = 0b1111// string 类型let firstName: string = 'viking'let message: string = `Hello, ${firstName}, age is ${age}`// undefined 和 null 是所有类型的子类型l.原创 2021-10-31 11:16:35 · 618 阅读 · 0 评论 -
用canvas画圆形雷达图
首先需求设计稿如下,其中3个点(箭头指向)需要根据数据分值在实线半径上移动,同时阴影三角形面积随之改变。1 首先尝试有没有现成的轮子,echarts中找了一下,有相同的,但是改成完全一样,有些麻烦 需要修改源代码,其本身提供的API不满足于需求。 当然如果时间紧急,可以跟产品设计沟通,让他们妥协。2 自己画,首先我使用了前端canvas. 在html中加入一个dom<canvas id='radar-img' style="width:170;height:170" />画布的宽高需原创 2021-06-21 11:27:29 · 1296 阅读 · 1 评论 -
《你不知道的JavaScript》读书总结
第一章 作用域是什么总结:作用域是一套规则,用于确定在何处以及如何查找变量(标识符)。如果查找的目的是对变量进行赋值,那么就会使用 LHS 查询;如果目的是获取变量的值,就会使用 RHS 查询。 赋值操作符会导致 LHS 查询。=操作符或调用函数时传入参数的操作都会导致关联作用域 的赋值操作。JavaScript引擎首先会在代码执行前对其进行编译,在这个过程中,像var a = 2这样的声 明会被分解成两个独立的步骤:1. 首先,var a 在其作用域中声明新变量。这会在最开始的阶段,也就是代原创 2021-06-09 18:15:00 · 169 阅读 · 0 评论 -
css 内容正常显示 背景模糊
在精度条部分加的样式 主要是父元素内嵌套的子div position absolute 以及 backdrop-filter .progress { padding: 31px 40px 0 40px; position: fixed; top: 44px; left: 0; width: 100%; z-index: 11; } .progress-bg { content:""; position: absolute; t原创 2021-04-21 16:17:57 · 226 阅读 · 0 评论 -
tab切换滑动 把选中的tab滑到中间 避免看不到后面的标签
写在tab切换的方法里,其中tab标签绑定ID ‘pop-d-tab-’ + active_index父标签绑定ID pop-d-tab很简单的代码 记下来 随用随取。 const son_dom = document.getElementById('pop-d-tab-' + active_index); const father_dom = document.getElementById('pop-d-tab'); if (son_dom) { const原创 2021-04-14 17:04:38 · 751 阅读 · 0 评论 -
通用actionsheet css样式代码
在项目中可以写成组件使用,很简单,这里重在记录样式。记录一下以后就不重复写了。有需要用的可以拿走不谢。效果图 其中包含有底部弹出css3动画:div部分<div class="bottom-action-sheet-mask" v-if="resultShow"></div> <div class="bottom-action-sheet" :class="{'bottom-action-sheet-animation': resultShow}" v-i原创 2021-04-09 16:59:15 · 380 阅读 · 0 评论 -
The engine “node“ is incompatible with this module.
保留lock文件,忽略引擎版本检查yarn config set ignore-engines true原创 2021-03-03 13:54:59 · 1211 阅读 · 0 评论 -
JS文件下载
downloadFile(url, fileName){ // 浏览器支持fetch则用blob下载,避免浏览器点击a标签,跳转到新页面预览的行为 if (window.fetch) { fetch(url) .then(res => res.blob()) .then(blob => { let a = document.createElement('a'...原创 2020-12-30 15:09:11 · 94 阅读 · 0 评论 -
safari无法解析的时间格式
第一种 new Date(‘2019-07-30T16:00:00.000+0000’)前端解决办法:(当然最好的方法是让后端返回时间戳).toString().replace('+0000', '')第二种 new Date(“2020/03”).toString().replace('/', '-')附上 js判断时间是invalid date的方法function isValidDate(date) { return date instanceof Date &&原创 2020-09-10 20:32:35 · 270 阅读 · 0 评论 -
去掉input number上下箭头
/* 去掉input number上下箭头 */input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }原创 2020-09-02 18:17:32 · 138 阅读 · 0 评论 -
图片热区自适应屏幕大小 通用代码
<img class="img-link" src="https://jdxl-img.jdxlt.com/uploads/40e44122152f4d89bf17308777d3c09d.gif" border="0" usemap="#map7591222054" alt="" /><map name="map7591222054" id="map7591222054"><area shape="rect" coords="1,167,214,261" href="htt原创 2020-08-14 18:20:38 · 509 阅读 · 0 评论 -
nuxt + typescript 引入三方组件库(例如elment ui)报错
Interface 'NuxtApp' incorrectly extends interface 'Vue'. Types of property '$loading' are incompatible. Type 'NuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'. Type 'NuxtLoading' provides no ma.原创 2020-07-30 16:26:28 · 916 阅读 · 0 评论 -
input 在ios环境下,input选中出现灰色背景
input { -webkit-appearance:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }原创 2020-07-14 16:01:32 · 265 阅读 · 0 评论 -
ios 微信 键盘弹起 底部空白
/*iOS12以上版本,微信打开链接点击输入框获取焦点后虚拟键盘自动弹出收起键盘,原来弹出键盘的位置一片空白,页面没有自动适应整个屏幕解决办法:在当前页面滚动的位置上下滚动1px的距离即可实现页面的自适应*/document.body.addEventListener(‘focusout’, () => {//软键盘收起的事件处理let ua = window.navigator.userAgent;let app = window.navigator.appVersion;/.原创 2020-07-14 15:59:24 · 493 阅读 · 0 评论 -
vue v-for循环修改属性后页面不重新渲染
问题:修改for循环中一组数据的一个属性值后,页面没有重新渲染,尝试使用$set修改触发渲染,但是不好使。解决办法:强制刷新原创 2020-06-22 15:27:04 · 2147 阅读 · 0 评论 -
js通用导出csv
/* * 参数: * headers:表头 * 格式如: * [ * { * column:"userid", //列字段 * title: "姓名", //表头标题 * formatter:(value) =>{return ... } //格式化函数 * },转载 2020-06-11 10:09:08 · 287 阅读 · 0 评论 -
net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
NGINX配置反向代理到本地后一直出js 文件加载控制台报错看 nginx error_log2020/05/29 14:36:19 [crit] 64776#0: *155 open() "/usr/local/var/run/nginx/proxy_temp/3/01/0000000013" failed (13: Permission denied) while reading upstream, client: 127.0.0.1, server: localhost, request: "G原创 2020-05-29 14:44:14 · 2634 阅读 · 2 评论 -
JS获取URL后的参数并且解析汉字乱码
function GetRequest() { //获取到Url并且解析Url编码 var url = decodeURI(location.search); var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1);原创 2015-08-09 19:58:39 · 3995 阅读 · 0 评论 -
移动web之响应式布局
1.响应式布局的概念响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。2.Media Rule原创 2015-08-22 17:03:42 · 1307 阅读 · 0 评论 -
css图片上文字居中,兼容微信
用到了chart.js做了一个圆环,需要在圆环中间显示数字,canvas是有一个drawText方法,但以前用过文字会模糊所以用css将文字显示到canvas上并显示在中间css代码:.big-data-process p{text-align:center;position:relative;}.big-data-process p .chart-span{display:原创 2015-08-26 17:47:32 · 1711 阅读 · 0 评论 -
js 合并俩个json
json + = json var param = {};param = $.extend({},param,eval('('+'{company_id_'+c_count+':'+current_checked.value+'}'+')'));param = $.extend({},param,eval('('+'{company_cnt:'+c_count+'}'+')'));这里用原创 2015-08-09 21:19:28 · 940 阅读 · 0 评论 -
js获取Url后的数据转换为json
如下我希望得到的结果MatchId=124&companyId=12332 => {"MatchId":"124","companyId":"12332"}代码:var params = getUrlVars(MatchId=124&companyId=12332');console.log(params);function getUrlVars(url) {原创 2015-08-09 21:06:26 · 2532 阅读 · 0 评论 -
没有微信api提示浏览器微信分享按钮的位置
话不多说,上代码 //get browser type var ua = navigator.userAgent; var wx = /MicroMessenger/; var qqbrowser = /MQQBrowser/; var ucbrowse原创 2015-07-23 10:25:45 · 1528 阅读 · 1 评论 -
js 判断时间大小
上代码//转换时间格式 function get_date(datetime) { var s = datetime.indexOf("-")>-1?"-":":"; var arr = datetime.split(s); var currenttime = new Date(arr[0],arr[1],arr[2]); return curren原创 2015-07-28 16:04:27 · 1079 阅读 · 0 评论 -
给网站添加一个config.js,js无法声明常量,封装js变量取值器
调试通过后的代码。config.jsvar appSetting = (function() { // 常量 var constants = {"win": 3,"draw": 1,"lose": 0}; // 构造器 var constructorFunc = function(){}; // 静态方法,取值器 constructorFunc.getCo原创 2015-07-24 17:51:39 · 682 阅读 · 1 评论 -
require.js模块化js,r.js压缩js为为一个文件优化请求
传统的js加载在处理依赖时,需要在js文件前面加载依赖的js文件这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。使用require.js可以做到(1)实现js文件的异步加载,原创 2015-08-10 15:09:40 · 1531 阅读 · 3 评论 -
移动网站性能优化
代码优化可以提高网站的性能优化规则:1.尽量减少HTTP请求1).合并css 背景图片。background-position 属性设置背景图像的起始位置。2).合并样式表和脚本。优化方式:require.js3).压缩图片4).避免重定向2.脚本执行优化1).css写在头部2).javascript写在尾部或者异步3.css优化原创 2015-08-20 16:46:13 · 764 阅读 · 1 评论 -
h5 localstorage 不能存true和false
读取出来全是字符串原创 2015-09-30 18:29:53 · 608 阅读 · 0 评论 -
h5页面传递数据之localstorage简单使用。
在项目中的二级页面需要用到一级页面相同的数据,可以通过url传递参数在二级页面再次请求数据,但为了减少请求发现可以在一级页面中将请求的数据存到localstorage中,在二级页面读取localstorage中的数据。用到了三个方法存:localStorage.setItem('curr_match',data);读:var json_data = JSON.parse(l原创 2015-09-16 11:33:11 · 3579 阅读 · 0 评论 -
从github上引入包到eclipse
new->import->git->clone git->用户名密码原创 2015-10-08 11:09:36 · 445 阅读 · 0 评论