![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript
文章平均质量分 66
javascript
qsya
树叶的一生 只是为了归根吗
展开
-
webpack5中css兼容性处理
» 场景webpack5 通过 postcss 来处理 css 兼容性问题webpack版本:“webpack”: “^5.52.1”,“webpack-cli”: “^4.8.0”» 步骤1.安装 postcss 插件npm i postcss postcss-loader postcss-preset-env -D插件版本:“postcss”: “^8.3.7”,“postcss-loader”: “^6.1.1”,“postcss-preset-env”: “^6.7.原创 2021-11-02 22:40:56 · 686 阅读 · 0 评论 -
svg写一个好看的时钟
» 介绍浏览大佬的博客主页时,发现一个款好看、个性的svg时钟,动手实现一下,效果如下:预览地址:https://hq88l.csb.app/博客地址:https://www.cnblogs.com/a-cat/» 实现1.表盘» 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg环形进度条</titl原创 2021-10-31 12:46:52 · 597 阅读 · 0 评论 -
canvas画一个渐变色的环形进度环
» 介绍之前用canvas画了一个环形进度条,想要实现从0到100颜色渐变效果,现有的线性渐变和径向渐变都无法满足,找到一种思路,经供参考,先看效果:预览地址:https://codesandbox.io/s/charming-herschel-b3mk0» 原理原理也很简单:把圆环分成n份,计算初始颜色到终止颜色中间n份颜色的值,每一份圆环一个颜色,从而达到渐变效果。» 代码<!DOCTYPE html><html lang="en"><head>原创 2021-09-30 17:34:08 · 2930 阅读 · 1 评论 -
canvas画一个环形进度条
» 介绍用canvas画一个环形进度条,效果如下:预览地址:https://codesandbox.io/s/nice-murdock-ux93p» 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas环形进度条</title> <style> body {原创 2021-09-30 16:01:14 · 1693 阅读 · 2 评论 -
svg画一个环形进度条
» 介绍在做数据可视化图表时一般会使用 百度echarts 或者 蚂蚁AntV 等成熟的工具库,但如果要自己动手画一个好像有点蒙,本文将简单介绍下如果用svg画一个环形进度条,效果如下:1.WebSockethtml5提供的全双工通讯的协议,浏览器和服务器之间建立一条不受限的双向通信的通道,双向数据传输,需要服务端支持。使用方法可参考:nodejs搭建websocket服务实现多页面通信// 数组去重const unique = (arr)=>{- return Array.fr原创 2021-09-30 14:50:15 · 1184 阅读 · 0 评论 -
浏览器窗口通信的多种方式
» 介绍WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。用 nodejs 简单的搭建 websocket 服务实现多页面通信,效果如下:» nodejs搭建websocket服务新建文件夹 websocket执行 npm init -y 初始化项目执行 npm i ws 安装 ws 依赖新建 server.js 文件执行 node server.js 启动服原创 2021-09-22 16:54:05 · 1775 阅读 · 0 评论 -
Element表格拖拽排序
» 介绍使用 SortableJS 插件实现表格拖拽排序功能。SortableJS 基于原生html5拖放API,支持触屏和大部分浏览器。效果图:1.安装npm install sortablejs --save2.引入import Sortable from 'sortablejs'3.表格设置 row-key 和 ref<el-table :data="tableList" border row-key="id" ref="dragTable">4.初始化 m原创 2021-09-17 11:26:22 · 683 阅读 · 0 评论 -
Vue滚动到指定位置的多种方式
需求:当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域。方法一:锚点锚点通过在元素上设置id,然后用a标签的href="#id"属性跳转到指定位置。也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。 //dom <a href="#li50">跳到50</a> <ul class="ul" id="ul"> <li v-for原创 2021-07-13 11:37:39 · 43866 阅读 · 5 评论 -
js中sort()字母排序和自定义多列排序
面试题有两个数组data和sorts如下:根据sorts对data排序var data = [{ a: 1, b: 'a' }, { a: 2, b: 'c' }, { a: 2, b: 'b' }]var sorts = [{ key: 'a', order: 'desc' }, { key: 'b', order: 'asc' }]正确结果如下:解决针对此题我们可以这么去做var data = [{ a: 1, b: 'a' }, { a: 2, b: 'c' }, { a: 2, b原创 2021-03-07 00:18:26 · 2607 阅读 · 0 评论 -
js数组转成树
面试题解决方法/** * 1.先根据parent_ind分组,没有parent_ind的也会生成key为undefined的一组,将作为第一层 * 2.定义formatTree方法,参数为分好的组和一个父pid,如果组中没有pid则放反回{} * 3.找到的组后再次循环,并把name作为父pid去递归查找子节点 */let insustry_list = [{ "parent_ind": "女装", "name": "连衣裙" }, { "name": "女装" }, { "parent_i原创 2021-03-06 23:52:25 · 659 阅读 · 0 评论 -
鼠标点击展示心形或文字效果
前言浏览大佬博客时经常看到鼠标点击有个心形或者有个提示文字的展示效果,在自己的网站上也整一下。心形效果:文字提示效果:心形js如下(转自https://blog.csdn.net/qq_37103514/article/details/82981598)!function(e, t, a) { function r() { for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.remove原创 2020-10-12 23:10:14 · 667 阅读 · 2 评论