js
关注
分享
扫一扫
追逐春天的大孩子
......
展开
-
web端上传图片添加水印
let imgFile = file.source.source let reader = new FileReader() reader.readAsDataURL(imgFile) // input.files[0]为第一个文件 let base64 = '' reader.onload = () => { const canvas = document.create..原创 2022-03-10 14:25:44 · 312 阅读 · 0 评论 -
全局添加水印
import React, { useEffect, useState } from 'react';function HooksDemo() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); useEffect(()=>{ watermark({ watermark_txt: "测试水印" }) }) const watermark=(settings)=> ...原创 2022-03-01 15:43:50 · 489 阅读 · 0 评论 -
react滑动删除组件
js部分/** * 滑动删除 */import React from "react"; import "./index.less"; class SlideDelete extends React.Component { constructor(props) { super(props); this.state = { width:0, isShow:false }; }原创 2021-12-06 11:21:32 · 895 阅读 · 0 评论 -
webpack
在使用dev-server是报错 我的版本信息 webpack: ^5.50.0；webpack-cli: ^4.7.2； webpack-dev-server: ^3.11.2报错信息：`Error: Cannot find module webpack-cli/bin/config-yargs`这里了webpack-cli 与webpack-dev-server 版本不兼容的问题，解决办法1.webpack-cli的版本降为3.3.12 解决办法2.`npx webpack serve..原创 2021-08-14 17:35:08 · 135 阅读 · 0 评论 -
h5拍照添加水印上传
/** * 可预览图片 ++水印 名字 部门 当前时间 */import React, { Component } from 'react';import { ImagePicker } from 'antd-mobile';import { Toast } from '@/pages/project/yjpt/components/PandaToast.jsx'import envconfig from "@/envconfig/envconfig";import Carousel.原创 2021-08-04 17:29:35 · 1482 阅读 · 0 评论 -
解决引入fastClick 导致antd中upload ios 点击两次生效问题
// FastClick.attach(document.body);//绑定事件判断绑定事件// 解决引入fastClick 导致antd中upload ios 点击两次生效问题 shangshunli 2021/07/02 --上传附件try{ let versionNumber = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)[1].replace(/_/g, ".") .原创 2021-07-05 14:47:27 · 832 阅读 · 0 评论 -
可预览图片组件
/** * 可预览图片 */import React, { Component } from 'react';import { ImagePicker } from 'antd-mobile';import { Toast } from '@/pages/project/yjpt/components/PandaToast.jsx'import envconfig from "@/envconfig/envconfig";import Carousel, { ModalGateway, Mo.原创 2021-07-04 15:43:23 · 375 阅读 · 0 评论 -
react中城市选择器组件
在react项目当中使用城市选择器，import React from 'react'import './index.less'import { Picker } from 'antd-mobile';// 城市选择器class CitySelect extends React.Component{ static defaultProps = { label: '', name: '', value: '', readO.原创 2021-07-04 15:22:19 · 1455 阅读 · 2 评论 -
pdfjs不显示电子签名
今天在使用pdfjs进行预览的时候，发现在预览的时候电子签名不能显示，后来用了这种方法。padf//解决PDF预览不显示电子签名的问题 就是直接把这段代码注释掉就好了//if(data.fieldType==='Sig'){//this.setFlags(AnnotationFlag.HIDDEN);//}...原创 2021-06-30 19:05:02 · 1336 阅读 · 1 评论 -
原生js实现ajax解决跨域---获取当前登录设备ip地址
/** 原生js实现Ajax* */function Ajax(params) { params = params || {}; params.data = params.data || {}; var _json = params.jsonp ? jsonp(params): json(params); // 判断是json还是jsonp function json(params) { // 普通请求 params.type = (params...原创 2021-06-25 09:46:44 · 393 阅读 · 0 评论 -
实现企业微信自动登录
1.要想实现企业微信自动登录，首先在自己本地进行测试的时候，需要把映射自己本机域名，因为微信后台可信域名对于ip格式，本地域名的格式是不支持的2.在自己本地进行调试的时候，首先你本人必须是当前应用的后台管理员，然后你就可以把上面的可信域名换成自己的域名，这样就完成了登月的一小小步，下一步就是，下载微信开发者工具，夺笋，必须要在微信开发者工具上面才能进行模拟在微信里面的环境微信开发者工具下载之后应该是这样的，然后在企业微信后台开通使用微信开发者进行调试然后在开发工具输入后台配置原创 2021-04-29 15:22:28 · 1424 阅读 · 1 评论 -
创建空白数据库
CREATE TABLE [dbo].[表名]([ID][int] IDENTITY(1,1) NOT NULL,[编码][varchar](100) NULL,[录入时间][datetime] NULL,[是否删除][int] NULL,) ON [PRIMARY]原创 2021-03-20 21:33:07 · 593 阅读 · 0 评论 -
js引用本地json文件
1.想要制作一个省市区的地址选择，需要在本地引入json文件 $.getJSON('/web4/product/oa/CommercialManage/area.json',data=>{ this.areaData=data })data就是你data文件里面的数据2.这个是第二种方法function readTextFile(file, callback) { var rawFile = new XMLHttpRequ原创 2021-03-02 11:20:33 · 6776 阅读 · 0 评论 -
制作下拉多选框
1.下拉框的一些样式<div class="checkBoxDiv"> <span style="font-size:12px;color:#808080;font-weight:normal;">业务类型：</span> <input type="text" readonly autocomplete="off" value="全部" class="checkBoxProject原创 2021-02-25 11:36:28 · 461 阅读 · 0 评论 -
点击其他部分隐藏下拉框
checkBox 表示隐藏的下拉框注意其他点击选中的部分一定要进行阻止冒泡e.stopPropagation()原创 2021-02-25 11:30:55 · 179 阅读 · 0 评论 -
js计算两个日期之间工作日，去除周末
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>6.计算工作日</title></head><body></body><script> function getWeekday(first, last) { //计算工作日方法：遍历这两个日期区间的原创 2020-11-16 16:39:25 · 1879 阅读 · 0 评论 -
highcharts的简单使用
代码：var option = { chart: { spacingBottom: 20, spacingTop: 60, }, title: { text: null }, credits: {原创 2020-11-03 17:10:03 · 377 阅读 · 0 评论 -
复杂甘特图的使用
对于程序员来说，在制作图表的时候使用频率最高的应该是echarts和highcharts两种，最近这段的时间我在使用highcharts进行开发甘特图的功能，做的比较简单，进行一个简单的分享。如果你用的是比较流行的前端框架，基本网上都用进行使用的简单教程，直接进行引入highcharts-gantt.js即可。甘特图js下载地址由于我们使用的backbone作为前端的框架，简单的记录一下自己在本系统制作甘特图的过程中遇到的一些棘手的问题。首先遇到的第一个问题就是high-gantt.js引入的问题，原创 2020-09-07 20:17:48 · 828 阅读 · 0 评论 -
highcharts图表中的相关配置
Highcharts.setOptions({ global: { useUTC: false //中文区时间格式 }, // 所有语言文字相关配置都设置在 lang 里 lang: { resetZoom: '重置', resetZoomTitle: '重...原创 2020-08-24 17:11:49 · 194 阅读 · 0 评论 -
自定义input:[type=range]问题
使用input:[type=range]实现进度条的问题同时能够自定义样式，进行相应的修改，改造成符合自己需要的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal原创 2020-08-13 21:07:54 · 399 阅读 · 0 评论 -
原生css实现滚动条显示
今天拿到设计图需要作出这样的一个效果，就是使用html加css实现滚动条的效果，效果图是这样的实现上面效果图的代码## html代码 <div style=" position: relative;"> <img src="assets/images/oa/集团OA/项目周期.png" alt="" class="project_modal_task" > <span class="project_modal_name原创 2020-08-13 19:26:49 · 1039 阅读 · 0 评论 -
react中实现鼠标跟随移动事件
import React, { Component } from 'react'export default class Mouse extends Component { state = { x: 0, y: 0 } componentDidMount() { window.addEventListener('mousemove', this.handleMouseMove) } componentWillUnmount() { window.r原创 2020-08-09 20:34:28 · 3531 阅读 · 0 评论 -
使用highEcharts做出中国地图的效果图
直接上代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <原创 2020-08-05 19:25:52 · 1767 阅读 · 0 评论 -
将当前本地分支推送到git的另一个分支上，同时在git上面已经有本地分支
将当前分支上面的代码推送到git上面的另一个分支上面假设在你本地的分支是project_gck,而且在git的远程分支上面已经有project_gck和dev两个分支，我们想要将自己本地project_gck分支上面的代码首先推送到dev分支上面，同时再推送到project_gck分支上面。假设已有主仓库team，fork自己的仓库origin。首先重命名主仓origin为team： git remote rename origin team然后添加新的remote: git remote a原创 2020-08-05 19:22:35 · 2074 阅读 · 0 评论 -
在echarts和highEcharts中设置渐变色
在echarts中areaStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色原创 2020-07-30 20:50:36 · 612 阅读 · 0 评论 -
highEcharts中解决legend过长的问题，实现翻页效果
在使用highEcarts中的饼图的时候，我们可能会遇到自己的想要展示的图例过多，在当前高度又不允许又这么多的图例展示出来我们就可以将图例条目变成可以进行点击滑动的对于图例的样式可以使用legend中的一下方法，进行设置样式下面是我的代码var chart = Highcharts.chart('container', { chart: {}, title: { floating: true, text: null }, tooltip: { pointFormat: '{se原创 2020-07-30 17:27:52 · 2032 阅读 · 0 评论 -
高德地图自定义点标记踩坑
先看一下要做的效果如上图所示，箭头所指示的就是我们要进行的点标记，先说一下我做的这个步骤1.上图所指示的坐标当时是用墨卡托坐标，要将其转成高德地图坐标表示的经纬度的形式，才能在高德地图中表示出来所指示的地点。墨卡尔托坐标表示形式：12738037.307083402,3562717.500125364就是上面这个坐标进行相应的点标记。首先我们要对当前坐标进行相应的转换，转变成我们想要的坐标，供我们在下面调用进行使用。转换方法：// 转换坐标 MercatorWeblonLat ()原创 2020-07-23 14:28:18 · 1987 阅读 · 0 评论 -
点击复制号码进行复制
在移动端我们经常会用到点击复制号码按钮将当前号码进行复制解决方案：1.我们在复制号码这个添加一个点击按钮，同时在点击的时候将当前号码作为参数传递过来2.在点击方法里面接收传递过来的想要复制的号码，在号码复制过来之后，我们会在当前页面添加一个input输入框，并将当前号码作为输入框的value值。具体代码此时是当点击复制号码之后调用的事件copyNumber = (number) => { let transfer = document.createElement('input');原创 2020-07-17 14:41:45 · 3625 阅读 · 0 评论 -
将城市按照拼音首字母进行分类
将城市名称按照首字母进行分类，使用js-pinyin包，首先第一步下载包npm i js-pinyinimport React,{Component} from 'react'import pyjs from 'js-pinyin' //包下载完成之后在要使用的页面进行引入const cityList=[ { value:'北京', label:'北京' }, { value:'上海', label:'原创 2020-07-15 16:05:28 · 1307 阅读 · 0 评论 -
给定某一日期，获取下周，本周，上周的日期
//获取上周起始时间结束时间、下周起始时间结束时间开始时间和本周起始时间结束时间;（西方）function getTime(n) { var now = new Date(); var year = now.getFullYear(); //因为月份是从0开始的,所以获取这个月的月份数要加1才行 var month = now.getMonth() + 1; var date = now.getDate(); var day = now.getDay(); console.l.转载 2020-07-08 20:19:44 · 502 阅读 · 0 评论 -
三种方法实现页面滚动条直接滚动到顶部
1.document.body.scrollTop=document.documentElement.scrollTop=0 //页面滚动到顶部2.document.body.scrollIntoView()3.document.getElementById('site-nav').scrollIntoView()原创 2020-05-28 10:13:40 · 7888 阅读 · 0 评论 -
数组去重的几种方法
1.简单数组去重function uniq(array){var temp = []; //一个新的临时数组for(var i = 0; i < array.length; i++){if(temp.indexOf(array[i]) == -1){temp.push(array[i]);}}return temp;}var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];console.log(uniq(aa));2.排序后相邻去重/*给传入数组排序，原创 2020-05-19 15:34:42 · 185 阅读 · 0 评论 -
改变数组中对象的属性名称
在一定的时间，我们可能需要将数据进行相应的转换，才能进行使用，今天我就需要将一个数组中的对象的属性名进行替换，才能进行数据的调用，1.首先先得到我们将要转换的数组， { day: '2018-12-26 14:31:55' }, { day: '2018-12-27 1...原创 2020-04-17 15:48:24 · 2158 阅读 · 2 评论 -
展开运算符spread和剩余运算符Rest
展开运算符和剩余运算符展开运算符是三个点你（...），可以将一个数组转为用逗号分隔的参数序列。说的通俗易懂点，就好像化骨绵掌，把一个大元素给打散成一个个单独的小元素。 //demo 1 传递数据代替多个字符串的形式 function test(a,b,c){ console.log(a); console.log(b); ...原创 2020-01-16 15:48:31 · 245 阅读 · 0 评论 -
自定义随机的数组名称
这两天在写一个功能的时候，需要用到使用上个数组中的值作为另外一个数组的值，这个时候需要将上一个数组的每一个的值，作为新的数组中每一项的名称，我使用的是新创建出来一个对象，将这个新的数组作为这个对象的属性值，将上一个数组的名称作为对象的属性，然后将每一个对象添加到新数组当中，这样就新创建一个数组，用来存储多个对象对应的属性值。 for (var i = 0; i <...原创 2020-01-11 17:12:57 · 340 阅读 · 0 评论 -
两个js文件之间的函数调用
这个问题是今天在工作中遇到的，需要在每个页面都是用这个函数，需要做函数的封装，在进行单独的调用，所以想到能不能在一个js中引用另一个js中的function这样的话能大大的减少代码量需要用到的两个文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset...原创 2019-12-11 13:46:15 · 2695 阅读 · 0 评论