日常技巧
关注
分享
扫一扫
文章平均质量分 85
主要为日常开发中的技巧
旅行中的程序员
旅行中的程序员
展开
-
利用React实现多个场景下的鼠标跟随框提示框
本文结合实例，详细的介绍了鼠标跟随框在三种场景下的三种具体实现的方法原创 2023-02-19 16:29:02 · 1095 阅读 · 1 评论 -
前端web实现（@、At、艾特）选人或引用数据
在我们日常的网络社交中，@XXX功能可以说是一个比较常见的功能了。本文将结合实践，介绍一种可以快速实现@选人或引用数据的方式。原创 2022-09-29 22:20:11 · 3874 阅读 · 4 评论 -
关于web中的颜色表示方法，你知道多少？
想要表示web中的各种颜色，大家首先想到的大概就是用十六进制或者RGB来表示。但在实际web中，是远不止这两种的。今天这篇文章就和大家聊一聊，在web中颜色的各种表示方法。原创 2021-12-09 21:16:07 · 4149 阅读 · 0 评论 -
前端批量获取文件并打包压缩解决方案
前言前端文件下载我相信很多小伙伴并不陌生，下载文件的形式也有很多，例如，后端返回一个文件地址，我们把地址放在<a></a>标签里面点击下载；或者是通过后端接口返回文件流，我们再对流进行一系列的操作等等。单个件下载的解决方法有很多，但是当我们需要批量下载文件的时候，我们该怎么去做呢？方案面对这样的需求，我们提出了以下几个方案：方案一：直接获取后端返回文件地址数组，然后一个一个的去下载。但是这样每次下载一个文件，浏览器会显示比较多的下载任务；方案二：后端对先对文件进行打包压缩原创 2021-06-16 09:17:11 · 1609 阅读 · 3 评论 -
nrm和yrm ，npm源管理器，可以快速在源间进行切换
前言我们在开发时，有时需要进行npm源的切换。nrm和yrm作为npm / yarn的镜像源管理工具，可以快速地在 npm 源间切换，提高我们的效率。nrm安装npm install -g nrm使用查看可用源列表nrm ls其中带*为当前使用的源 npm -------- https://registry.npmjs.org/ yarn ------- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpmjs.or原创 2021-06-07 10:07:38 · 1459 阅读 · 0 评论 -
工作效率upup，一起来实现一个Node.js-CLI开发工具吧
前言我们平时项目开发中，经常会有很多类似的代码文件，而我们在使用的时候也会经常的去复制粘贴。为此我之前也写过一篇文章，探讨过提高开发效率的方法，但是说实话，也并不是很好用。看如今火热的前端框架，都有自己的CLI工具，例如Vue CLI，creat-react-app等等，搭建项目十分的方便。所以我也在想，要不也实现一个CLI工具，不一定要和前面几个那样高大上，但只要能提高工作的效率，就值得试一试。初始化项目首先，我们要打开CLI界面，用npm初始化一个项目：npm initpackage.js原创 2021-01-28 09:26:16 · 185 阅读 · 0 评论 -
利用HTML5拖放(Drag 和 Drop)实现Table间数据的交互
前言作为开发者，我们总是会不经意间的遇到一些令人头疼的需求。比如五彩斑斓的黑，根据手机壳变换APP的颜色等等，你说怎么办。虽然在一般情况下不会这么棘手，但是有些需求刚拿到的时候还是会一筹莫展。表格间数据传递曾经遇到一个类似这样的需求：A表的数据需要沿用B表中的数据，而且要尽量少的步骤。具体什么意思呢，意思就是完成一个类似于下面这种效果：这个该这么搞，直接给产品说，对不起实现不了。可是产品却告诉我，不行不行，必须实现。没办法，只好妥协。梳理OK，我们来理理思路，首先确定一下现有的主要开发环境原创 2021-01-11 10:16:03 · 532 阅读 · 0 评论 -
分享一些可能会用到的原生前端CSS例子，要不进来看看？
前言今天来分享一些原生的CSS或者是CSS+JS的实际例子，这些例子比较的简单，但是都是实际开发之中可能遇到的。相信还是会对部分童鞋有所帮助~css时间轴效果时间轴算是很常见效果，我们可以通过CSS的相对定位和绝对定位来实现，在开发的时候我们可以根据实际情况来调整各个属性的值，以满足需求。效果：代码：HTML<div class="message_item"> <div class="message_time">2020-05-13 19:11</div原创 2020-07-08 09:09:51 · 250 阅读 · 0 评论 -
厌烦了Ctrl+CV ？试试用node自动生成重复代码文件
前言相信在我们日常遇到的项目中，无论是在前端网站还是后台管理系统中都会有功能类似的页面。我们在开发这些功能类似的页面的时候，为了提高效率，一般都会运用我们的CV大法。但是当我们CV久了之后，会不会觉得这样的开发方式有些许枯燥？我们能不能通过代码来生成代码，进一步提高我们的效率呢？下面我们就来通过一个例子来探索一下怎么通过node来生成我们需要的前端代码。实例假设我们正在做一个后台管理系统（r...原创 2020-04-20 09:29:20 · 390 阅读 · 0 评论 -
StompJS+SpeechSynthesis实现前端消息实时语音播报
前言前端消息的实时推送我相信很多人不陌生，我们可以想到利用WebSocket，服务端主动向客户端推送数据，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。其优点有很多，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯等等。语音播报则能够在人们视觉没有来的及关注时侯，通过听觉来获取需要信息。这篇文章主要介绍的是基于websocket，利用Stomp...原创 2020-04-05 10:37:11 · 1753 阅读 · 3 评论 -
react+echarts实现全国客户数据展示
前言数据可视化一直都是一个流行的话题。我们平时做项目可能就避免不了与图图表表打交道。所幸的是现在有许多优秀成熟的数据图表库，例如Echarts和Highcharts，我们可以在里面寻找自己需要的图表，方便快捷~需求假设我们有这样一个需求：把统计到的全国客户数据，利用可视化的方案展示出来。针对这样一个需求，一个比较好的方案就是把客户数据展示在地图上，这样可以清晰直观的了解到客户在全国各地的分...原创 2020-03-29 10:02:48 · 649 阅读 · 0 评论 -
js四舍五入到指定位数
直接上代码const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);round(1.005, 2); // 1.01原创 2020-03-15 16:32:58 · 449 阅读 · 1 评论 -
利用reduce计算数组或多个数字的总和
直接上代码const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0);sum(1, 2, 3, 4); // 10sum(...[1, 2, 3, 4]); // 10原创 2020-03-15 16:31:15 · 1435 阅读 · 0 评论 -
js中判断鼠标滚轮方向的方法
判断鼠标滚轮的方向，有着两个派别：一是谷歌、IE派别（这次IE没有搞特殊）；二是火狐派别 1、在谷歌、IE派别中，给我们提供了onmousewheel方法，该方法给我们提过了一个wheelDelta属性，该属性的返回值：正值与负值，其中正值表示滚轮向上滚动；负值表示滚轮向下滚动。 2、而在火狐中，给我们提供了DOMMouseScroll方法，该方法给我们提供了一个detail属性，该属性的...原创 2020-03-15 16:28:07 · 864 阅读 · 0 评论 -
jQuery实现对滚动条距顶部高度的监听
直接上代码：$(window).scroll(function(){ //开始监听滚动条 var top = $(document).scrollTop(); //滚动条距离顶部的高度 if(top > 120 ) { $(".header-nav").css({ 'position': 'fixed',...原创 2020-03-15 16:22:07 · 558 阅读 · 0 评论 -
js给指定元素插入元素insertAdjacentHTML
前言insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。'beforebegin'：元素自身的前面。'afterbegin'：插入元素内部的第一个子节点之前。'beforeend'：...原创 2020-03-15 16:18:55 · 537 阅读 · 0 评论 -
js+css实现移动端抽屉式导航
前言移动端导航多种多样，抽屉式导航就是常见之一，下面我们通过javascript和css相结合来实现移动端的抽屉式导航。先看看实现的效果：index.html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv...原创 2020-03-09 11:04:09 · 2807 阅读 · 1 评论 -
前端响应式布局原理与实践
前言作为一个前端开发者，响应式网站开发是必备技能之一。响应式有它的很好的优点，也有它一定的缺点。这就需要我们在开发的时候做出取舍。对于内容较少、主要为展示类网站，故采用响应式；对于内容多，管理类的网站采用分开开发的方式，不同设备采用不同的一套代码。本文会主要探讨响应式布局原理和技巧，并结合实例来加深印象。响应式与自适应我们很多人其实把这响应式和自适应两种网站当成一回事，但事实上这两种网站的布...原创 2020-03-06 10:18:04 · 997 阅读 · 0 评论 -
前端的日期操作大全
前言虽然现在处理日期方面已经有了很成熟的也很好用的库，例如（momentjs和date-fns），但是在实际开发中，我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作，也算是比较全的了。其中一部分来自自己，还有一部分来源于我们万能的网友~获取当前时间戳var timestamp = Date.parse(new Date()); //精确到秒var ti...原创 2020-01-12 16:49:57 · 472 阅读 · 0 评论 -
input文件上传的一些技巧
前言在我们日常的开发中，避免不了上传文件这个功能。有时候还必须在上传文件的时候进行限制，比如下面的例子：1、不做限制，例如：<input type="file">点击之后显示：2、只能上传图片，并且指定格式为png，代码如下：<input type="file" accept="image/png" >点击后显示：好了，筛选完成。但是，这个acce...原创 2020-01-11 23:20:12 · 488 阅读 · 0 评论