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

图片压缩之CompressorJS

官方文档地址https://fengyuanchen.github.io/compressorjs/主要目录dist/ ├── compressor.js (UMD) ├── compressor.min.js (UMD, compressed) ├── compressor.common.js (CommonJS, default) └── compressor.esm.js (ES Module)使用查看下载和使用，简要代码如下<input type="file" id="file" accept="image/*">new Compressor('这里传入文件对象fileObj', { width: 1000, quality: 0.8, success: function (result) { console.log('Output: ', result); var sourceSize

学习 · 2021-12-21
2020 - 2025 LETTERED. All Rights Reserved.
Theme Jasmine by Kent Liao | 桂ICP备15008025号-6