下雨不愁的博客

转载 移动端H5页面返回并且刷新页面

移动端H5页面返回并且刷新页面（BFcache）原文地址

原创 日历当前月 日期对应

var totalDay = res.data; //返回的数据 var day = totalDay[0].day.split('-'); var firstDay = new Date(day[0], day[1] - 1, 1).getDay(); //获取当月第一天 var monthDate = new Da...

原创 flex布局 实现局部滚动

实现 bottom-wrap 区域滚动.box-wrap { display: flex; flex-direction: column; height: 100vh; --- 可视区域}.top-wrap { flex: 0 0 wrap;}.bottom-wrap { flex: 1; overflow-y: auto;}套上壳子 里边自由发挥了...

原创 react 生成二维码并点击下载

const QRCode = require('qrcode.react');export default class ProductANDClickDownload extends React.Component{ constructor(props){ this.state={ Content:'https://www.baidu.com/'...

原创 多行超出省略号

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;width: 250px;border: 1px solid red;font-size: 30px;　因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注： 1、-web...

原创 解决键盘弹出后挡表单的问题

window.addEventListener('resize', function () {if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' || document.activeElement.getAttribute('contented...

原创 js 图片保存至手机相册

var triggerEvent = "touchstart"; //指定下载方式 function savePicture(Url) { var blob = new Blob([''], { type: 'application/octet-stream' }); var url = URL.createObjectURL(blob); var a = document.cr...

原创 echarts堆叠柱形图+折线图

直接代码var myBarthree = echarts.init(document.getElementById('barthree'));var option = { textStyle: { color: '#ddd' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross',...

原创 每三位数字逗号分隔

'1432546563565343'.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')

原创 Vue Echarts动态仪表盘

<template> <div class="dashboard" ref="test1"></div></template><script>export default { data() { return { options1: { tooltip: { formatter: "{a} ...

原创 Vue中微信打开网页 按钮错位问题

methods: { init() { let odiv = document.createElement("div"); odiv.style.height = "999px"; document.body.appendChild(odiv); setTimeout(() => { odiv.parentNode.remov...

原创 React性能优化总结

原文链接

原创 理解withRouter

withRouter的适用场景1.避免更新受阻因为react-redux的connect高阶组件会为传入的参数组件实现shouldComponentUpdate 这个钩子函数，导致只有prop发生变化时才触发更新相关的生命周期函数(含render)而很显然，我们的location对象并没有作为prop传入该参数组件// beforeexport default connect(mapS...

原创 将时间戳转为 Y-M-D h:m:s

/**将时间戳转为 2018-12-27 15:16:30 */ time(e) { let date = new Date(e); let Y = date.getFullYear() + '-'; let M = (date.getMonth()+1 &amp;amp;amp;lt; 10 ? '0'+(date.getMonth()+1) : date.getMon...

原创 Object.assign()

const object1 = { a: 1, b: 2, c: 3};const object2 = Object.assign({c: 4, d: 5}, object1);console.log(object2.c, object2.d); // 3 5语法：Object.assign(target, ...sources)参数：target ...

原创 React 标签页组件

import React from 'react';import Style from '@/commonality/queryTime/TimeTabs.less'class TimeTabs extends React.Component { constructor(props) { super(props) } state = { tabs: [ ...

原创 JS数组的深浅克隆

数组的拷贝，通常可以使用一个新的数组，指向现有数组var arr = ['liuche', 'zhouyafu', 'huoqubing', 'weiqing'];var arr2 = arr;arr2.push('liguang');alert(arr); // 'liuche', 'zhouyafu', 'huoqubing', 'weiqing', 'liguang'alert(...

转载 从 0 到 1再到 100：搭建、编写、构建一个前端项目

1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等。一般来说，一个现成的项目模板会预定义一定的目录结构、书写方式，在编写项目代码时需要遵...

转载 js数组API和字符串API汇总

一、数组API 1. 连接：arr.join(&amp;amp;quot;连接符&amp;amp;quot;) 用连接符把数组里面的元素连接成字符串。 arr.join(&amp;amp;quot;&amp;amp;quot;)能无缝连接。拼接：arr.concat(“a”,“b”,arr1)强调：(1)不会修改原数组，返回新数组。 (2)concat方法中的数组会被打散为单个元素再拼接。截取：arr.slice(start[,end])

原创 单例实践

var SingletonTester = (function (){//参数： 传递给单例的一个参数集合function Singleton(args) { // 设置args变量为接收的参数或者为空 var args = args || {}; //设置name参数 this.name = 'SingletonTester' //设置pointX参数 this.poi...

原创 React 封装标签云滚动组件 （希望看到的大佬给出优化意见^ ^）

import React from 'react';/*** option: [ {content:&amp;amp;quot;标签&amp;amp;quot;,href:&amp;amp;quot;###&amp;amp;quot;}, ], &amp;amp;amp;lt;TagCloud TagCloudData={tags} handleClick={this.tabClick} /&amp;amp;amp;gt;}*/

原创 JS打印出Fibonacci数（不使用全局变量）

(function () { var outLength = 20, nowValue = 0, prevValue = 1, swapValue; for (var i = 1, len = outLength - 1; i &lt; len; i++) { if (i &lt; 3) { nowValue = 1; } else { swapValue = nowVal...

原创 实现如下语法的功能：var a = (5).plus(3).minus(6); //2

Number.prototype.plus = function (num) { // 注：箭头函数会将this指向window return this + num}Number.prototype.minus = function (num){ return this - num}var a = (5).plus(3).minus(6);console.log(a)...

原创 找出数字数组中最大的元素（使用Match.max函数）

Math.max.apply(this, [2,50,30,90,322])

原创 给object数组进行排序（排序条件是每个元素对象的属性个数）

console.log(objArrSort([{attr1: 1, attr2: 2}, {}, {attr1: 1}]))function objArrSort(waitArr) { var objLengthArr = []; for (var i = 0, len = waitArr.length; i &amp;lt; len; i++) { objLengthArr.pus...

原创 封装没有嵌套关系的组件之间通信

let mEvent = null;class _Event { constructor() { this.EVENTARR = []; } on(name, fun) { // 注册事件 if (name &amp;amp;amp;amp;&amp;amp;amp;amp; name != undefined &amp;amp;amp;amp;&amp;amp;amp;amp; (typeof fun === 'func

原创 对象 替换为相同的key 并进行相加

 changeLAN(data) { let name = JSON.parse(JSON.stringify(data).replace(/局域网/g,&amp;quot;北京&amp;quot;)); let a = []; let result = {}; name....

原创 封装 http Get Post请求

httpGet(url, callback) { axios.get(URL + url, { }).then((data) =&amp;gt; { if (data.data.status == 1) { callback(data.data) } else { if (data.data.error) {...

原创 通过 search 进行传参

/*** getPageMessage(this.props.location.search)* @param {*} data 必须为对象*/getPageMessage(data) { let str = unescape(data); try { return JSON.parse(str.slice(1, str.length)); } ca...

原创 URL转码问题

let url = window.location.search.split('&amp;amp;');let iso = url[0].split('=')[1];let name = decodeURI(url[1].split('=')[1]); ---decodeURL()console.log(name)

原创 React 单击进行复制

安装npm install --save react react-copy-to-clipboard使用const App = React.createClass({ getInitialState() { return {value: '', copied: false}; }, onChange({target: {value}}) { this.setState...

原创 React 实现 antd中Table单击获取内容

&lt;Table columns={columns} dataSource={data} size="middle" onRow = {(record) =&gt; { return { onClick: () =&gt; { console.log(record) }) } } }} /&g...

原创 React实现Echarts 点击当前内容进行匹配

onChartClick = (e) =&amp;gt; { let ip = e.name; const obj = this.state.haviorData.find((e) =&amp;gt; { return e.key === ip; }); console.log(obj)}let onEvents = { 'click': this.onChartClick,}&amp;lt...

原创 js 根据数组中对象的某一个属性值进行排序

var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8}]; compare = (property) =&gt; { return function(a,b){ var value1 = a[property]; var value2 = ...

转载 React 实现页面全屏效果

HTML代码：&amp;amp;amp;amp;amp;amp;lt;a onClick={this.fullScreen} style={{ margin: &amp;amp;amp;amp;amp;quot;0 6px 0 6px&amp;amp;amp;amp;amp;quot;}}&amp;amp;amp;amp;amp;amp;gt;全屏&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;am

原创 React 引入外部下载字体

在css 文件中声名@font-face { font-family: 'myFamily'; --自定义名字就好 src: url('../../assets/LcdD.ttf'); --下载的字体文件路径}在HTML中引用 &lt;p style={{ color: '#FFF', fontSize: '36px', fontFamily: 'myFamily' }} &g...

原创 React 时钟

原创 关于Echarts修改自己碰到的 会持续更新

修改 X轴样式：xAxis: {type: ‘category’,data: dataArr,axisLabel: {interArrival: 0, —x轴全部显示rotate: 30 —倾斜度}},

原创 修改antd 日期选择框默认时间为前一天

1.安装并引入momentimport moment from ‘moment’设置区间和默认选择时间const dateFormat = ‘YYYY-MM-DD’// 默认选择时间为前一天const defaultSelectDate = {startDate: moment().startOf(‘day’).subtract(2, ‘days’),endDate: moment(...