JS简单实现姓名（单姓、复姓）的脱敏

前言互联网个人姓名隐私，大部分都喜欢对名称脱敏处理。形如： 许** 马** 欧阳**代码实现 function formatName(name) { // 复姓氏 var doubleSurname = [ '欧阳', '太史', '端木', '上官', '司马', '东方', '独孤', '南宫', '万俟', '闻人', '夏侯', '诸葛', '尉迟', '公羊', '赫连', '澹台', '皇甫', '宗政', '濮阳', '公冶', '太叔', '申屠', '公孙', '慕容', '仲孙', '钟离', '长孙', '宇文', '司徒', '鲜于', '司空', '闾丘', '子车', '亓官', '司寇', '巫马', '公西', '颛孙', '壤驷', '公良', '漆雕', '乐正', '宰父', '谷梁', '拓跋', '夹谷', '轩辕', '令狐', '段干', '百里', '呼延', '东郭', '南门',

学习 · 2022-02-16

JavaScript简单实现表格滚动

前言年前安排了个人才云大数据前端项目，其中大部分用到了Echarts实现图标展示，有两个人才表滚动。当初以为是单纯表格，然后以为是scroll类型的鼠标滚轮的表格滚动。再次确认才知道需要自动滚动技术要点js定时器基本操作预览图实现代码CSS样式摘要.container .box-body { position: relative; height: 70%; color: #fff; padding: 3%; overflow: hidden; } .main-bottom table thead { background: rgba(94, 138, 226, 0.1); } /* 排名 */ .main-bottom table .first { background: linear-gradient(90deg, #6648F5, transparent, transparent) } .main-bottom table .second { background: linear-gradient(90deg, #

学习 · 2022-02-08

Javascript 常用数据处理函数集合 - 持续更新

数字取整可用于input change 的数字输入处理/** 数字整形 */ numInputChange(val, max) { // 转数字 let transferNum = parseInt(val); // 小于0 if(transferNum < 0) { transferNum = Math.abs(transferNum); } else if(transferNum === 0) { transferNum = 1; } else if(transferNum >= max) { transferNum = max; } return transferNum; },简单Ajax实现function simpleAjax(options) { options = options || {}; options.async = options.async || true; options.type = (options.type || 'GET').toUpperCase();

学习 · 2022-01-12

Canvas 简单实现分享海报

前言现存大部分系统中，用于引流分享必不可少的就是海报分享，海报分享的特性莫过于便捷的传播、新用户的了解和加入系统。在每次开发系统中，都需要重新编写一套海报生产代码，造成了大量时间的荒废，故此简单封装canvas生产海报的方法，如有bug请勿打扰！实现入参规范1.canvas 整体宽高 width height2.背景色3.渲染内容 completelyCanvas(750, 1334, '#fff', overly) 其中渲染内容是一个数组，数组内容包含背景图，二维码和相应文本内容等等...字段说明{ // 二维码图片 type: 'image', // 绘制类型 text / image data: 'https://qiniu.lettered.cn/2022/01/06/100073.png', // 内容信息（图片使用的url） width: 175, // 绘制宽度 height: 175,// 绘制高度度 xAxis: 77, // x轴位置（起始点） yAxis: 1108 // y轴位置（起始点） }举个例子let overly = [ {

学习 · 2022-01-07

自定义实现简单柱形图

前言前两天下发一个需求，需要实现一个月统计图，但是只显示最近周。思来想去找到了Echats，但是具体跟UI设计差别过大，数据也不好整理。鼓捣了一早上之后选择放弃了。其实Echats也蛮好的，提供了多样化的数据图表，示例中涵盖各行各业。实现设计图如下，实现要求是当日加粗实体显示，其他模糊化，但可以选中查看。HTML结构结构规划比较简单，整体+容器+项目（头部/内容/底部），内容分有背景条和柱形条，就目前背景还没有去实现，主要点就是柱形条的高度变化和整体高度之间的处理。<div class="zin-chat"> <div class="zin-chat-container"> <!-- 柱形 --> <div class="zin-chat-item" :class="{ today: index === today }" @click="today = index" v-for=&q

学习 · 2022-01-06
2020 - 2025 LETTERED. All Rights Reserved.
Theme Jasmine by Kent Liao | 桂ICP备15008025号-6| 桂公网安备45102902000030号