w459315789的博客

原创 js如何处理循环中的异步操作

async function example(){ const arr=[1,2,3,4,5] const newArr=[] for( let i=0; i<arr.length; i++){ await fn().then((data)=>{ if(data > arr[i]) { newArr.push(arr[i]) } }) } .

原创 个人VS code自动保存时格式化代码的一些配置

首先.prettierrc的一些配置{ "printWidth": 150, "tabWidth": 2, "useTabs": false, "singleQuote": true, "semi": false, "trailingComma": "all", "bracketSpacing": true, "jsxBracketSameLine": true, "arrowParens": "avoid", "proseWrap": "never"}

原创 移动端 CSS Reset 该怎么写

@charset "utf-8";* { /** * 简单粗暴, 一劳永逸的写法 */ padding: 0; margin: 0; font: inherit; vertical-align: baseline;}* { /* * 这个属性只用于iOS, 当你点击一个链接或者通过Javascript定义的可点击元素的时候 * 它就会出现...

原创 vs code个人插件配置

原创 使用vw适配H5，ios中img标签设置宽高无法显示

最近项目全线用了新的vw适配方案，设置了img的宽度，在ios上无法显示图片，google之，找到了解决办法，全局使用img{content:normal!important;}既可解决。找了一下原因，是因为在content中写了viewport-units-buggyfill来兼容不支持vw的设备，导致这个原因。那上面的方法就不是最佳解决方案，应该在图片外层套一个div，设置位置跟宽度，...

原创 js 读取跨域图片转为base4

var getBase64ByUrl = function(src, callback, outputFormat) { var xhr = new XMLHttpRequest() xhr.open('GET', src, true) xhr.responseType = 'arraybuffer' xhr.onload = function(e) { ...

原创 读取html内容，生成图片

需要用到html2canvas代码如下： <div id="box" className={style.box}> </div> <div id="shareImg"> {/* 内容 */} </div>js： let shareContent = document.getElementById('pos...

原创 设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿，解决办法

设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿，所以在这个div上加一个css:-webkit-overflow-scrolling : touch;

原创 js 安卓和ios复制文本，文本要有换行的某种写法

HTMLjsios下复制需要需要文字的节点，安卓可以新建textarea文本框复制，需要复制的文本如果有换行(\n)，在安卓下可以正常显示，ios下需要加上style={{ "white-space": "pre"}}，复制出来的文字\n会解析出来...

原创 VS Code-react项目格式代码配置

自动保存代码的时候希望可以格式话代码，下面是我的一些配置！{"window.zoomLevel": 0,"editor.fontSize": 20,"editor.tabSize": 2,"vsicons.projectDetection.autoReload": true,"git.enableSmartCommit": true,"search.follow...

原创 react-route4.0 通过js跳转页面

最近的项目是react和antd-mobile结合的h5项目，使用的路由是4.0+，有个场景是在组件里面通过点击不同tab跳转不同页面，route4.0+提供了withRouter来解决这个问题，具体实现如下：class xxxxx extends React.Component { handleClick(param) { this.props.history.pus...

转载 Promise构造函数的方法all，race

all的用法Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数，看下面的例子：用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面...

转载 js通过文件的url下载文件到本地

同源单文件针对单文件的情况下，同源的文件，可以通过 < a> 标签的 download 属性下载文件const elt = document.createElement('a');elt.setAttribute('href', url);elt.setAttribute('download', 'file.png');elt.style.display = 'none';...

转载 三言两语之js事件、事件流以及target、currentTarget、this那些事

http://www.cnblogs.com/54td/p/5936816.html

原创 js上传图片预览，以及求得图片宽高

&lt;input type="file" name="" id="aa" value="" /&gt;&lt;div id="a2"&gt;&lt;/div&gt;var aa = document.getElementById('aa'); var a2 = document.getElementById('a2'); aa.onchange = fun

原创 关闭窗口

var wroxWin = window.open("http://www.wrox.com/"); 调用 close()方法可以关闭新打开的窗口。wroxWin.close(); 但是，这个方法仅适用于通过 window.open()打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。不过，弹出窗口倒是可以调用 top.close()在不经用户允许的情况下关闭自己。...

原创 读书笔记

    location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性；换句话说，window.location 和 document.location 引用的是同一个对象。下表列出了 location 对象的所有属性：    以...

转载 btoa 与 atob

javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性，导致Base64基本中看不中用。当前html5标准正式化之际，Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现。好了，前言说了一大堆，开发者需要重视：一.我们来看看，在javascr