js
_freely
这个作者很懒,什么都没留下…
展开
-
input输入日期时间,自动格式化组件/工具
【代码】input输入时间,自动格式化组件/工具。原创 2023-07-15 14:11:39 · 2294 阅读 · 0 评论 -
js读取jpg图片扩展信息,处理二进制数据
js 读取图片私有扩展信息,处理二进制数据原创 2022-07-24 15:46:52 · 1441 阅读 · 0 评论 -
array(21种)原型方法实现(push pop unshift shift slice splice reverse sort reduce indexOf find findIndex)
array原型方法实现push pop unshift shift slice splice reverse sort reduce reduceRight concat join every some filter map indexOf lastIndexOf find findIndex includeslet arr = [0, 1, 2, 3]let len = arr.push(4); // 返回数组的个数, 改变原数组// console.log(len) // 5/** * p原创 2021-12-31 21:51:51 · 565 阅读 · 0 评论 -
JavaScript在chrome浏览器实现录屏功能
js实现录屏功能代码实现 <video class="video" controls width="600px"></video> <button class="record-btn">record button</button> <a class="download">下载</a><script> let btn = document.querySelector('.record-btn'); btn.add原创 2021-11-25 22:59:36 · 1566 阅读 · 2 评论 -
原生js实现拖拽、缩放功能
原生js实现拖拽、缩放功能效果如下图代码实现html<div id="box"> <img class="bgimage" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg&refer=http%3A%2F%2Ffile02.16suc原创 2021-11-25 22:49:54 · 1498 阅读 · 0 评论 -
devServer.proxy 配置本地代理、测试环境配置nginx解决canvas图片跨域问题
proxy本地代理访问图片解决跨域问题devServer.proxy代理devServer: { port: 8001, proxy: { '/busy': { target: 'http://beijing-image.oss-cn-beijing.aliyuncs.com/', changeOrigin: true, pathRewrite: { '^/busy': '/busy' }原创 2021-10-15 22:25:28 · 717 阅读 · 0 评论 -
js canvas拼图及压缩
使用canvas拼图将多张图片绘制在canvas上图片尺寸: 1920 * 1080 拼4张图 canvas: width = 1920 * 4 height = 1080 <canvas id="myCanvas" width="7680" height="1080"></canvas> let canv = document.getElementById('myCanvas'); let ctx = canv.getContext('2d'); let原创 2021-08-25 21:18:05 · 330 阅读 · 0 评论 -
利用canvas的getImageData和putImageData实现截图功能
canvas截图将图片用canvas绘制出来 <canvas id="myCanvas" width="400" height="400"></canvas> let canv = document.getElementById('myCanvas'); let ctx = canv.getContext('2d'); let image = new Image(); image.onload = function() { ctx.drawImage(image,原创 2021-08-24 21:10:47 · 2738 阅读 · 0 评论 -
模拟实现element-ui的消息通知notification
实现消息通知notification创建vue文件<template> <transition name="fade"> <div class="zh_notification" v-if="notificationVisible"> <div class="notificationModule"> <div class="notifiTitle"> <span>有一条消息</span>原创 2021-06-29 22:25:45 · 919 阅读 · 1 评论 -
js事件队列(event-loop)宏任务、微任务
#为什么要有事件循环呢?eventloop顾名思义就是事件循环,为什么要有事件循环呢?因为V8是单线程的,即同一时间只能干一件事情,但是呢文件的读取,网络的IO处理是很缓慢的,并且是不确定的,如果同步等待它们响应,那么用户就起飞了。于是我们就把这个事件加入到一个事件队列里(task),等到事件完成时,eventloop再执行一个事件队列。所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务...原创 2021-06-07 21:11:22 · 2194 阅读 · 0 评论 -
使用echarts简单实现双柱状图重叠效果
如何使用echarts简单实现双柱状图重叠效果代码实现在series中配置如下代码// 设置柱状的圆角itemStyle: { barBorderRadius: 10},// 允许展示背景图showBackground: true,// 设置背景图颜色和圆角backgroundStyle: { color: 'rgba(255, 255, 255, 0.2)', barBorderRadius: 10}柱状图横向展示配置// X轴设置type为value,y轴设置为c原创 2020-10-22 22:59:52 · 6471 阅读 · 0 评论 -
数组方法reduce 高级用法
reduce 高级用法reduce 语法语法接收两个参数第一个参数是一个函数第二个参数可以是数组、对象、Number等数据类型[].reduce(() => {}, [])有返回值克隆数据let arr = [ { a: 1, name: '234' }, { a: 3, name: 'sdfa' }]function mockData(arr) { return arr.reduce((mock, item) => { mock.push(原创 2020-08-12 22:23:33 · 525 阅读 · 0 评论 -
数据量太大,接口请求报错:net::ERR_INCOMPLETE_CHUNKED_ENCODING 200
报错原因是,接口返回数据量大,连接中断临时解决方法,设置Nginxbuffers大小http{................................ proxy_buffer_size 128k; proxy_buffers 32 128k; proxy_busy_buffers_size 128k; ................................原创 2020-04-10 09:39:19 · 1744 阅读 · 0 评论 -
element ui form表单动态prop规则校验问题
应用场景如图:选择第三方平台右侧计费规则非必选选择手动配置,右侧计费规则必选解决方案1. rules校验规则stationFeeType: [{ required: true, message: '请选择计费配置方式', trigger: 'change' }]2. prop动态,...原创 2020-03-30 20:38:42 · 5105 阅读 · 3 评论 -
javascript学习笔记--更新
1. 普通函数和闭包函数的区别,闭包携带了执行的环境2. 宏任务和微任务的区别 宏任务 由宿主环境API创建的任务 例如: setTimeout 微任务 由执行环境创建的任务 例如: promise...原创 2020-04-03 17:38:40 · 161 阅读 · 0 评论 -
报错Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
使用jquery.datetimepicker.full.min.js报错经过无数次操作,找到报错的操作过程:操作一次时间控件,切换到其他页面,打开控制台,拉动控制台缩放大小,这个时候就会发现一直报错报错原因是,拖动控制台的时候,获取不到控件的根元素,无法给控件定位查看报错信息 window.getComputedStyle(e),提示e不是元素,打印结果为null在...原创 2019-12-18 20:38:57 · 8268 阅读 · 1 评论 -
海康威视的视频web端(vue开发)的实时预览、录像回放和页面拖拽
效果图实现步骤1. 安装海康web插件,去海康威视官网上下载,官方不支持Mac,只支持Windows https://open.hikvision.com/2. 在index.html引入js文件,安装包里面有<script src="static/jquery-1.12.4.min.js"></script><script src=...原创 2019-11-20 22:04:52 · 26037 阅读 · 119 评论 -
webpack分环境打包,静态资源部署到不同的服务器上
静态资源部署到独立的服务器可以减轻服务器带宽压力所谓静态资源:static目录下的文件项目需求背景:1. 项目环境分为测试环境、预发布环境、生产环境2. 不同的环境,静态资源存放的路径不一致,每次打包都需要更改路径,容易忘记切换路径解决方法:根据不同环境配置不同打包命令,实现路径切换安装cross-envnpm install cross --save配置打包...原创 2019-10-14 21:08:05 · 1404 阅读 · 0 评论 -
原生js实现图片放大及拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m原创 2019-02-13 17:21:17 · 1119 阅读 · 0 评论 -
字符串可以直接进行比较原因
相同格式时间字符串可以直接进行比较 '2018-11-14 13:59:02' > '2018-11-14 13:59:00'原因是,按照unicode编码进行比较原创 2019-02-19 20:57:37 · 1330 阅读 · 0 评论 -
对象方法之hasOwnProperty
工作中发现,使用for..in遍历对象时,多了一个没有定义的属性var obj = { city: 'beijing', age: '2000' } for (var i in obj) { console.log(i); // 多了一个hi属性 /* city age hi */ }通过打印obj...原创 2019-03-12 20:54:55 · 250 阅读 · 0 评论 -
vue非父子/非兄弟组件通信bus发布/订阅者模式
使用背景如下图二级菜单为一级菜单的子路由,二级菜单加载M组件业务逻辑:一级菜单中有一个功能按钮,点击按钮可以改变状态state,组件M根据按钮状态state加载数据实现思路,使用事件总线,发布/订阅者模式1. 创建一个公共的Vue实例 新建一个bus.js,导出实例import Vue from "vue";export default n...原创 2019-05-07 21:49:50 · 244 阅读 · 0 评论 -
vue实现文件下载的两种方式
项目背景将列表数据导出到excel文件,下载到本地<button @click="exportFile">导出</button>代码实现调用接口,将后端返回的流数据new一个文件对象exportFile () { Vue.prototype.$axios[method]("http:// xxxxxx.com", { data: {id:...原创 2019-05-29 21:27:10 · 15432 阅读 · 2 评论 -
jquery删除表单动态添加的某一行
jQuery删除表单某一行报错先删除第一行,可正常删除,再删除第三行报错js代码delete: function (index, fn) { rows.map(function (item, i) { if (i > index) { fn && fn(item, --i); ...原创 2019-08-27 23:53:18 · 926 阅读 · 0 评论 -
nodeJS+express+art-template实现评论
实现一个简单的评论目录结构app.jsconst fs = require('fs')// const http = require('http')const bodyParser = require('body-parser')const express = require('express')const app = express()// 配置artempla...原创 2019-09-19 21:02:33 · 192 阅读 · 0 评论 -
vue+axios+element formData实现文件上传
文件下载分为两步1. 上传模板EXCEL,使用formData提交2. 提交成功后,接口返回文件流,前端写入EXCEL实现下载ps: 使用表单提交的原因是,excel文件中包含ID,后端需要读取ID查询记录后,再把数据流通过接口返回代码实现1. vue组件<template> <el-dialog title="批量导入" ...原创 2019-09-19 21:50:43 · 1249 阅读 · 0 评论 -
解决内容高度不够,底部上移问题
第一种方法if(document.documentElement.clientHeight-$("footer").height- header.height>$(".container").height()){ $("footer").css({ marginTop:document.documentElement.clientHeight-$("footer").o...原创 2018-06-27 17:59:47 · 2029 阅读 · 0 评论