
javascript
microcosm1994
这个作者很懒,什么都没留下…
展开
-
vue-socket.io发送中文问题
乱码 or “unexpected EOF”使用encodeURI方法将中文转码,显示时在使用decodeURI解码原创 2020-02-04 00:47:46 · 486 阅读 · 0 评论 -
vue使用gojs做流程图项目
Installnpm i gojs --saveUseimport go from 'gojs'代码太多,直接上地址吧项目地址,down下来就可以跑,贴个截图需要改下请求路径,项目为阉割版,去掉了一些功能,只保留最简单的节点操作...原创 2018-11-26 17:28:21 · 6766 阅读 · 3 评论 -
vue使用websocket创建连接与重连
我自己把websocket封装成一个模块,包括创建连接、发送消息、重连等,里边也封装了一些我自己项目需要的一些功能Importimport ws from '@/assets/lib/ws'Vue.prototype.$ws = wsUse// 创建websocket连接 this.$ws.init(self.$Socket_url, this.ruleForm, functi...原创 2018-11-27 10:56:14 · 7423 阅读 · 0 评论 -
vue使用html2canvas进行页面截图
Installnpm install html2canvasUseimport html2canvas from 'html2canvas';html<!-- 截图区域 --><div id="faultTree" ref="faultTree" :style="{width: '100%', height: height + 'px'}"></di...原创 2018-11-27 11:32:08 · 7887 阅读 · 1 评论 -
canvas绘制图片
html&amp;lt;canvas id=&quot;canvas&quot; style=&quot;display: block;margin: 0 auto;border: 1px solid #ccc;&quot;&amp;gt; 你的浏览器不支持canvas&amp;lt;/canvas&amp;gt;js let canvas = document.原创 2018-11-27 16:38:27 · 246 阅读 · 0 评论 -
canvas图片滚轮放大缩小
html<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #ccc;"> 你的浏览器不支持canvas</canvas>js let canvas = document.querySelectorAll('#canvas')[0] let cont...原创 2018-11-27 18:16:19 · 8123 阅读 · 3 评论 -
vue全局注册使用过滤器
html中使用<label>实时时间</label><input type="text" v-bind:value="Real_time | timeFormat" disabled>过滤器新建一个js,filters.js// 项目中使用的全局过滤器export default { // 时间格式化:0:0:0 timeFormat:...原创 2019-03-27 15:09:54 · 286 阅读 · 0 评论 -
react配置proxy出现报错:When specified, "proxy" in package.json must be a string. Instead, the type of "pro
原因可能是react-scripts版本太高,不支持,在package.json中查看react-scripts的版本号,把node_modules/react-scripts删除了,重新安装 :npm i react-scripts@1.1.1 --save原创 2019-05-09 10:54:06 · 5833 阅读 · 1 评论 -
egg-sequelize设置不返回密码
示例module.exports = app => { const { STRING, INTEGER, DATE } = app.Sequelize; const User = app.model.define('users', { id: { type: INTEGER, primaryKey: true...原创 2019-05-24 16:20:36 · 719 阅读 · 0 评论 -
react中引入大量图片
原文地址:React 引入大量本地图片const requireContext = require.context('../img', true, /^\.\/.*\.png$/)const images = requireContext.keys().map(requireContext)转载 2019-06-20 15:29:03 · 2244 阅读 · 0 评论 -
js简单实现拖拽上传
html<div contentEditable='true' onDrop={this.dropHandler.bind(this)} onDragOver={this.dragoverHandler.bind(this)}></div>js// 拖放事件 function dropHandler(e) { e.preventDefa...原创 2019-06-25 12:12:24 · 3524 阅读 · 1 评论 -
获取光标位置以及在光标出插入元素
获取位置可以参考window.getSelection()api// 获取光标位置let selection = window.getSelection()let range = selection.getRangeAt(0)range.setStart(range.endContainer, range.endOffset) // 设置开始插入位置range.insertNode...原创 2019-06-24 19:28:57 · 7909 阅读 · 3 评论 -
js获取ip地址
使用webrtc可以获取IP地址getlocalIP: async function () { let ip let PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection let peer = new PeerConnecti...原创 2019-07-04 23:09:18 · 1411 阅读 · 0 评论 -
canvas制作图片粒子效果
先将图片写到画布上,然后再获取图片在canvas标签中每一个像素点的rgb值、x坐标、y坐标,然后把x坐标和y坐标加一个随机数,使其可以在一定范围之内随机排列,之后清除画布,根据前面获取到的x坐标和y坐标重新绘制let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height) // 获取图像数据html<canv...原创 2018-11-29 17:19:28 · 2337 阅读 · 1 评论 -
canvas点击计算得到点击坐标
根据计算得到点击坐标位置&lt;canvas id="snake" style="background:#0A597A;border: 1px solid #ccc;margin: 0px auto;display: block"&gt;&lt;/canvas&gt;&lt;script&gt; const canvas =原创 2018-11-29 11:12:00 · 6417 阅读 · 0 评论 -
canvas写一个贪吃蛇小游戏
截图html&lt;body&gt;&lt;div class="game-container"&gt; &lt;canvas id="snake" style="background:#0A597A;border: 1px solid #ccc;margin: 0px auto;display: block&quo原创 2018-11-29 11:00:59 · 561 阅读 · 0 评论 -
用angular方法简单实现了吃了么搜索小功能,还不太完善,后续会继续添加新内容。
用angular方法简单实现了吃了么搜索小功能,还不太完善,后续会继续添加新内容。最近接触了Angular框架,今天用里面的http请求方法做了一个小的案例,是一个查询地名获取附近美食的小案例。还不太完善,后面面有时间会继续添加新的内容。这个小案例没有用到任何的jQuery与原生js方法。先上HTML结构代码与HTML结构中的angular指令。<body ng-app="app"><div ng原创 2017-09-29 16:15:28 · 346 阅读 · 0 评论 -
整理数组去重与数组排序等方法
整理数组去重与数组排序等方法实用且比较简单的数组排序与数组去重的方法,也较好理解;原创 2017-09-29 16:20:15 · 606 阅读 · 0 评论 -
点击空白处隐藏
点击空白处隐藏原创 2017-09-29 17:47:41 · 388 阅读 · 0 评论 -
window系统安装node.js以及环境搭建
下载node百度node进入官网下载即可安装根据默认提示安装即可配置环境计算机(或者我的电脑)右击属性-》高级系统设置-》环境变量。新建一个用户变量。变量名:NODE_PATH值:C:\Program Files\nodejs\node_modules注意:值为nodejs安装目录同时修改path下的目录为C:\Program Files\nodejs\node_modules在下方系统变量中也同样原创 2017-10-26 20:18:30 · 204 阅读 · 0 评论 -
js设置背景视频全屏显示
原理很简单,获取浏览器窗口尺寸对video标签进行设置,下边代码为react项目中视频背景, window.onresize = () =&gt; { const windowWidth = document.body.clientWidth const windowHeight = document.body.clientHeight ...原创 2018-07-04 17:30:23 · 3055 阅读 · 2 评论 -
axios实现拦截器
项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置。// util.jsimport axios from 'axios'import cookies from 'vue-cookies'import router from 'vue-rout...原创 2018-08-22 11:00:20 · 5198 阅读 · 0 评论 -
js16进制数转bit
/* * 16进制数转bit(8位) * @str16: 十六进制字符串 * */ BitParse (str16) { let map = { '0': '0000', '1': '0001', '2': '0010', '3': '0011', '4': '0100', '5': '0101',...原创 2018-09-17 16:10:06 · 3448 阅读 · 1 评论 -
vue中简单使用dom选择器
直接上代码vue中操作dom及其不方便,可以自己依据jquery选择器的方法来实现简单可以使用的dom选择器// 方法写在methods中$ (e) { let eType = 'queryeAll' if (e.indexOf('#') === 0) { eType = 'getElementById' e = e.substr(...原创 2018-09-07 11:04:34 · 21076 阅读 · 0 评论 -
node实现简单websocket连接
js let api = 'ws://localhost:8001' const Socket = new WebSocket(api) // 连接建立时触发 Socket.onopen = function () { // 验证webscoket连接是否建立,是否可以进行通信 // 0表示连接尚未建立 if (Socket.ready...原创 2018-09-30 15:27:34 · 3122 阅读 · 0 评论 -
vue中使用Json编辑器-------jsoneditor
Installnpm install jsoneditor --saveUse# main.jsimport jsoneditor from 'jsoneditor'Vue.prototype.$jsoneditor = jsoneditorlet container = document.getElementById('jsoneditor')let json = { ...原创 2018-11-09 16:41:35 · 29885 阅读 · 1 评论 -
vue重置data数据
// 重置data数据Object.assign(this.$data, this.$options.data())原创 2018-11-10 22:21:45 · 9307 阅读 · 1 评论 -
js获取当前日期前几天
let dateCount = 14 // 当前日期前几天 let date = new Date() // 获取当前时间 let dateArray = [] // 日期数组 date.setDate(date.getDate() - dateCount); // 设置日期为几天前 for (let i = 0; i < dateCount; i...原创 2018-11-22 14:18:04 · 831 阅读 · 0 评论 -
一个用原生js实现的小游戏---FlappyBird
一个用原生js实现的小游戏—FlappyBird这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习原创 2017-09-29 16:10:11 · 1244 阅读 · 1 评论