自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(18)
  • 问答 (1)
  • 收藏
  • 关注

原创 d3.js绘制树形图

最新版(v7)d3.js绘制树形图,网上搜到的大多使用低版本的绘制,只好自己摸索一下了!

2022-10-23 16:30:07 1675 1

原创 js分页组件Pagination

js分页组件Pagination文章目录js分页组件Pagination1. 使用配置2. 使用实例3. js源码4. css样式仿造element-ui使用纯js制作的分页组件,不依赖其他库,可复制粘贴使用,源码仓库地址1. 使用配置interface PaginationConfig { // 父容器元素或者选择器 pNode: String | HTMLElement, // 页数 pageSize: Number, // 当前页 pageNum: Number,

2021-06-15 15:10:53 2231 1

原创 js导航组件Navigation

js导航组件Navigation文章目录js导航组件Navigation1. 使用配置2. 使用实例3. js源码4. css源码使用纯js+css写的导航组件,不依赖其他第三方插件,可直接复制粘贴使用1. 使用配置pNode: 'body'// 数据源navList: []// 目前只支持horizonmode: 'horizon'// 高度height: 60// 背景bgColor: 'rgb(84, 92, 100)'textColor: '#FFF'activeTe

2021-06-11 23:45:40 1282

原创 webpack配置提取css

webpack配置提取css初次单独配置使用webpack,在js中引入的样式在没有配置之前会被放到头部的style标签之中,于是就想着将其提取放到单个文件之中去,所以网上查找了一下配置方法,即为使用mini-css-extract-plugin插件,在使用的过程之中遇到了一些问题,所以选择记录到此处。1. 初始配置webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')const path = re

2021-06-10 16:40:42 265

原创 js树形选择组件Tree

js树形组件Tree文章目录js树形组件Tree1. 使用方式2. js代码css样式1. 使用方式配置信息// 容器位置pNode: 'body'// 每一个title的paddingtitlePadding: 18// 数据源/*[ { label: '', children:[ { label: '', children: [] } }

2021-06-05 20:43:06 2148 1

原创 js实现进度条组件(Progress)

js实现进度条组件(Progress)1. 使用方式配置参数pNode: '' // 进度条放置容器 可以是选择器,也可以直接传入dom对象width: '100%' // 进度条宽度 百分比为相对于父容器的宽度height: 10 // 进度条的高度min: 0 // 最小值max: 100 // 最大值value: 50 // 当前值radius: '4px' // 边框圆角 若为空值则默认50%// 颜色color: '#9d9dda' // track颜色barColo

2021-06-02 19:36:43 3023

原创 纯js弹窗Dialog组件

纯js弹窗Dialog组件文章目录纯js弹窗Dialog组件1. js部分2. css样式3. 简单使用4. 效果展示1. js部分/* eslint-disable */const { isTmplValid, createDom, getDom, createSingleDom, cssFromObj, addNode, isDOM} = require('./Common')/** * 根据模板床建 * @param title */function

2021-05-31 12:52:25 3879 3

原创 神奇的str.replace()

神奇的str.replace()在此之前,我对replace的用法就局限于替换掉字符串中的某些字符,比如’hello, 世界’.replace(‘hello’, ‘你好’),因为没有遇到过更复杂的需求,也没有去深究,几天前收到一个需求:把一个字符串中的数字加粗且换成蓝色,比如“共为您找到符合条件的数据83条”。刚看到需求我脑海中就跳出来了一个解决办法,即将数字(83)两端加上一个带有样式的span标签,于是我高高兴兴的去把代码实现了。<style> .special {

2021-05-25 23:10:57 539

原创 纯js消息弹窗组件Message

js消息弹窗组件文章目录js消息弹窗组件1. js部分代码2.使用方法3.演示效果写组件上瘾,今天写一个纯js消息弹窗组件,复制即可使用,css也写在了js之中,用js生成,代码若是存在不足的地方可以探讨一些,本人也是前端新人┭┮﹏┭┮1. js部分代码(function(win) { const createDom = (className = '', tag = 'div') => { const ele = document.createElement(tag

2021-05-22 20:21:54 1895 2

原创 js 轮播图(使用class实现)

js 轮播图(使用class实现)纯属无聊,还花了一晚上时间o(╥﹏╥)o1. js部分的代码/** * 判断对象是否为DOM元素 * @param {Object} obj * @returns */const isDOM = (obj) => (typeof HTMLElement === 'object') ? obj instanceof HTMLElement : obj && typeof obj === 'object' &&

2021-05-21 00:51:36 460

原创 一周一个js测试题03

一周一个js测试题03vue指令实现头部吸顶,底部吸底,头部当其上边框接触到可视窗口顶部时停止移动,底部当其下边框接触窗口底部时停止移动template+css<template><div style="overflow: hidden;"> <div class="son" v-flex-fixed="'top'">header</div> <div class="body"> </div> <div

2021-03-26 22:46:19 64

原创 一周一个js测试题02

一周一个js面试题02需求:数组扁平化解法一:使用数组自身的flat方法/** * 数组扁平化 * @param arr * @returns {FlatArray<*, *>[] | any[]} */function flatten1(arr) { return arr.flat(Infinity)}解法二:采用JSON.stringify()与JSON.parse()方法将数组转化为json字符串,采用空字符字符替换掉"[","]",然后再转回数组对象,该

2021-03-22 16:12:45 64

原创 一周一个js测试题01

一周一个面试题01需求: 给定一个根节点let root = new Node(0, null, null)1. 编写一个createTree(root, n)方法根据传入的n生成一个有n层二叉树,叶子节点的值为其所在的层数2. 写一个printTree(root)方法将该二叉树打印出来function Node(val, left, right) { this.val = val this.left = left this.right = right}let ro

2021-03-15 21:28:38 86

原创 js转化excel日期

js转化excel日期(亲测 ~ _~)因使用js-xlsx读取excel得到的日期不是正常的日期格式,所以从网上找了一下转化的方法,但是没找到一个合适的,下面展示我所采坑的两个方法,分别为百度出来的前两位,望采纳1. 采坑的两个方法formatDate(numb, format) { const time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) cons

2020-12-25 11:42:44 1463 1

原创 一维码二维码的生成及打印

VUE条形码及二维码的生成及输出到打印机1. 条形码的生成安装插件npm install jsbarcode --savegithub地址: https://github.com/lindell/JsBarcode接口说明JsBarcode(selector, data, options)selector: css选择器data: 条形码的内容options: 配置options的可选项:OptionDefault valueTypeformat“

2020-11-28 14:22:27 1988

原创 java微信推送模板销消息(微信测试号)

微信推送模板销消息相关jar包(红框内)如果仅需推送模板消息,不对用户动作进行处理的话不需进行服务器配置下面的操作皆借助于微信的测试号,点击下方链接进入登录页,微信扫描即可进入测试号链接:点击进入测试号1. 新建模板此处为测试号,正式上线模板只能选择,不能自定义,如需自定义则需申请标题自定义内容按微信给出的格式输入,可用下面的例子{{title.DATA}}登记时间: {{registrationDate.DATA}}缺货数量: {{shortageQuant

2020-10-24 13:45:38 427

原创 SpringMVC上传文件(maven)

SpringMVC上传文件(maven)文章目录SpringMVC上传文件(maven)1.在pom.xml中配置所需依赖2.创建springmvc配置文件3.编写web.xml文件4.编写上传文件和成功上传页面5.编写controller6.测试1.在pom.xml中配置所需依赖pom.xml<!--springmvc--><dependency> &l...

2019-12-05 22:10:05 403

原创 typoranotes

@toc学习使用 typora1. 基本操作内容目录syntax --> [toc]example:[toc]标题syntax :# 一级标题## 二级标题### 三级标题…example:一级标题二级标题三级标题四级标题…引用syntax:> 引用内容1>> 引用内容2examp...

2019-11-29 16:49:26 97

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除