smile、暖冬-CSDN博客

原创数字转换为分割千位数

export function numberToThousands(num: number): string { let result = ""; let counter = 0; const dot = String(num).indexOf("."); if (dot !== -1) { const dotCnt = String(num).substring(dot ...

2019-11-28 17:47:44 208

原创生成ITable格式数据

公司内部使用 if (data.length < 1) { return "data无数据"; } const legendList = Array.from(new Set(data.map<string>(item => item[1]))); const xData = Array.from(new Set(data.map<string&...

2019-11-28 17:46:56 222

原创 js 计算返回十的倍数

项目开发需要封装一下计算最大最小值的十的倍数/** 返回最大数据的十的倍数 */function getMaxValue(sourceList: number[]) { const maxValue = Math.max(...sourceList); const multiple10 = (Math.floor(maxValue / 10) + 1) * 10; return...

2019-11-06 16:23:48 2747

原创 css测试动画进度条单次

css测试动画进度条单次 <div onClick={this.judgeProgressClick}>判断打开进度条</div> <AnimationProgress> <div className="animation-axis" style={{ animation: judgeAnimationProgress ? "progres...

2019-10-09 10:34:12 209

原创水波纹动画

水波纹动画代码/** 标题头点击波纹事件 */ private titleButtonClick = (event: any) => { const eventTarget = event.target; const leftX = event.pageX - this.getLeft(eventTarget); const topY = event.pag...

2019-10-08 18:19:45 423

原创原生调起文件上传input/file

原生事件调起input/file类型上传功能前言前端经常开发的过程中都会遇到上传文件这一功能，下面咱们介绍一个不用组件，（随便的事件）原生快速的调起input type=“file” 上传功能！首先需要一个input标签<input type="file" style={{ display: "none" }} id="input_file" multiple onChange...

2019-05-29 11:22:44 1466

原创 Css获取视图宽高vh&vw

css推出的快速获取视图宽高的新单位今天开发项目的时候，本人开始不知道有这个新技术，使用的还是js获取视图的宽高，来进行相应的页面布局，同事突然提出你用的什么单位来判断的视图宽高，用过vh吗？？？？纳尼？？？vh什么鬼？然后很尴尬的问问度娘！新单位vhcss3新单位，view height的简写，是指可视窗口的高度。假如高度是900px的话。那10vh就是90px（以前一直使用js写，...

2019-04-01 17:51:02 1629

原创数字处理，保留几位有效数字

数字处理：保留几位有效数字不废话，直接分享代码与思想数字过大或者过小的时候，js解析为科学计数的格式，怎么把数字转换为string类型的呢？请看刚刚分享的Js 科学计算法，number类型与string类型转换，然后就是根据保留几位有效数字进行判断转换，处理字符串！

2019-03-07 16:20:23 4017

原创 Js 科学计算法，number类型与string类型转换

前言今天开发项目的时候收到数字精确转换，（原因0.1+0.2 != 0.3）在处理的过程中遇到数字过大或者过小的时候，number类型转换为科学计数的格式，百度查找转换一遍竟然没有找到，呃呃

2019-03-07 16:07:13 510

原创 Canvas 弹幕的优先选择

前言随着网络的发展，现在直播或者线上视频网站与app如雨后春笋，在观看视频的时候为了让用户互动，绚丽效果，弹幕应用而生，js dom操作臃肿且影响性能（大量重复的操作dom是开发大忌），为了更加美观且提高性能的前提下，使用canvas标签功能体现其独特的魅力。今天分享一下使用Canvas标签开发弹幕的经验！为了调起大家的学习兴趣，先展示一下效果图首先咱们创建目标框架（样式布局就不展示...

2019-02-20 16:52:58 566

原创 React封装列表拖拽排序高阶组件

引言项目开发中，特别是后台数据管理端，经常需要用到数据列表拖拽排序的需求，又不需要改变原有的数据结构与布局的情况下，使用高阶组件无疑是最好的选择，接下来于小伙伴们分享一下个人经验：首先咱们给予react-beautiful-dnd插件环境下yarn add react-beautiful-dnd实践是检验真理的唯一标准import { DragDropContext, Droppa...

2019-02-19 18:16:14 5282 1

原创 CropperJS封装的图片剪辑器

引言现在SPA（单页面网站）发展正火，项目开发过程中难免遇到图片上传的需求，图片上传前肯定需要剪切，以方便后续的处理与展示；此次分享一个图片剪切的组件！yarn add react-cropper使用例子说明： import CropperJS from 'react-cropper'; import 'cropperjs/dist/cropper.css'; ...

2019-02-19 17:32:11 205

React v16.3版本后生命周期的钩子函数的变化前言：自从React 官方正式发布了 v16.3 版本，在这次的更新中，新引入的两个生命周期函数 getDerivedStateFromProps，getSnapshotBeforeUpdate 以及在未来 v17.0 版本中即将被移除的三个生命周期函数 componentWillMount `，componentWillReceivePr...

2019-02-19 16:32:47 1179

smile_ycm的博客