- 博客(27)
- 收藏
- 关注
RSS订阅
原创 纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0;...
2019-06-09 18:43:15
9617
12
原创 体验WebGPU
目前Chrome正式版没有开启WebGPU，我们需要下载金丝雀版本：https://www.google.com/chrome/canary/然后输入 chrome://flags/，找到 #enable-unsafe-webgpu 并打开目前three.js和babylon等主流Web库都已支持WebGPU，可以查看一下Demo:ThreeJS: https://threejs.org/examples/?q=webgpu#webgpu_computeBabylonJS: https://pl
2022-04-07 15:48:43
1826
原创 JavaScript 数字转千分位(魔幻)
javascript 原生千分位格式化函数Number.prototype.toLocaleString([locales [, options]])const a = 123456789a.toLocaleString() // => "123,456,789"a.toLocaleString('zh',{style:'decimal'}) // => "123,456,789"a.toLocaleString('zh',{style:'percent'}) // =>
2021-06-24 20:11:58
136
2
原创 Vue history使用nginx代理
nginx.confserver { charset utf-8; listen 80; server_name m.demo.com; gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_min_length 1100; gz
2021-05-31 19:17:27
254
1
原创 获取页面中最大的z-index
[…document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0)在element-ui中，可以统一使用PopupManager管理import { PopupManager } from ‘element-ui/lib/utils/popup’PopupManager.nextZIndex()
2021-04-07 16:13:25
897
原创 Swagger2集成Spring Boot中的依赖(使用knife4j接口文档)
Swagger2集成Spring Boot中的依赖(使用knife4j接口文档)一·导入依赖Swagger2和knife4j的依赖<!-- knife4j接口文档 --><dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.6.1</versi
2021-03-26 15:11:17
856
1
原创 vue级联选择器只传最后一级
elementUI的级联选择器的v-modle接受的参数是一个数组，数组中的值是对应树形数组的节点值，但是在真实开发中后端可能只给返回了某一处单一节点，对el-cascader进行2次封装实现三级联动import arrayTreeFilter from 'array-tree-filter'/** 双层递归逆向查找某一节点的所有父级* */const findPatentValue = (array, value, valueName = 'value', childrenName = 'ch
2021-01-26 09:34:32
4266
原创 JavaScript 给树形(层级)数组添加层级标识
const arrayTreeAddLevel = (array, levelName = 'level', childrenName = 'children') => { if (!Array.isArray(array)) return [] const recursive = (array, level = 0) => { level++ return array.map(v => { v[levelName]
2021-01-25 15:55:22
3341
原创 JavaScript 树状数组根据子节点查找所有父节点
function findParent(array, value, valueName = 'value', childrenName = 'children') { if (!value || !Array.isArray(array)) return [] const result = [] const seek = (array, value) => { let parentValue = '' const up = (array, val
2021-01-19 14:50:58
2442
1
原创 Vue md编辑器的使用及md的渲染
<template> <div> <mavonEditor v-model="markdown" :codeStyle="codeStyle"></mavonEditor> <div v-html="compiledMarkdown"></div> </div></template><script>// 编辑import { mavonEditor } from '.
2021-01-07 17:49:43
1167
原创 JavaScript 判断数组内是否有重复的元素
function arrayItemsWhetherRepeat(array) { if (!Array.isArray(array)) return false array = array.sort((a, b) => a - b) let isRepeat = false array.reduce((prev, curr) => { if (prev === curr) isRepeat = true retur
2020-12-11 11:14:31
340
原创 Js文字转语音
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <textare
2020-12-04 13:50:53
484
2
原创 Vue 超级丝滑的路由动画
1. 父子路由间的卡片式动画<transition name="direction"> <router-view class="direction-view"></router-view></transition>.direction-enter,.direction-leave-to { transform: translate3d(100%, 0, 0);}.direction-view { position: absolute.
2020-11-20 16:01:00
1033
1
原创 Vue 点击其他地方关闭弹窗
Vue 点击其他地方关闭弹窗<!doctype html><html lang="en"><head> <title>Document</title> <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <style> #box { position: fi
2020-11-18 13:58:35
2107
原创 浏览器的渲染机制 | 重绘与回流
浏览器的渲染机制浏览器的渲染机制一般分为以下几个步骤:处理 HTML 并构建 DOM 树。处理 CSS 构建 CSSOM 树。将 DOM 与 CSSOM 合并成一个渲染树。根据渲染树来布局，计算每个节点的位置。调用 GPU 绘制，合成图层，显示在屏幕上。重绘与回流重绘(repaint):当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少回流(reflow):当元素的尺寸、结构或触发某些属性时，浏览器会重
2020-08-21 14:13:22
268
原创 vue组件间的切换和组件切换过渡动画
Vue组件间的切换和组件切换过渡动画组件切换使用component标签的：is="'组件名'"来控制组件的切换组件：<div id="app"> <button @click="changeComponent('component_one')">组件1</button> <button @click="changeCo...
2020-04-16 17:07:42
1931
1
原创 轻松掌握vue动画
vue动画1. vue把一个完整的动画分为两部分，入场动画和离场动画；2. 在入场动画中包含两个时间点，分别是入场前（v-enter）和入场后(v-enter-to);3. v-enter表示入场前的状态，例如透明度为0，偏移量为0px;4. v-enter-to表示动画入场完成后的终止状态，例如透明度为1，偏移量为100px；5. v-enter-active表示入场动画的时间段，在这...
2020-04-06 17:42:41
212
原创 如何无信用卡申请谷歌云
如何无信用卡申请谷歌云申请谷歌云有一个标准动作，就是必须验证用户的付款方式。很可惜的是，很多人并没有自己的信用卡，在这个获得谷歌云赠送的300美元的第一步就卡住了不少人。今天在这里分享一个利用Payoneer签发的美国银行账号来申请谷歌云。我们在注册谷歌云的时候，点击验证方式时，你会发现。谷歌云不仅可以用信用卡和借记卡来验证，同样也是可以用美国银行账号方式来验证。在国内很多跨境电商卖家都注册了...
2020-02-27 01:15:12
34634
19
原创 IE8及以下 支持CSS3 background-size 方法
IE8及一下 支持CSS3 background-size 方法html demo<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { heigh...
2019-11-20 12:38:54
231
原创 子绝父相，父盒子高度怎么自适应（相对定位的父盒子，被有绝对定位的子盒子撑开）
子绝父相（子div绝对定位，父盒子相对定位），父盒子高度自适应css有办法实现相对定位的父盒子，被有绝对定位的子盒子撑开吗？前言： 如果是通过百度看到我这篇帖子的朋友，那么恭喜你，你在我这里找到了答案，但是这个答案可能不是你想要的,但是我的方法可以解决你的需求，因为这个问题的答案我找了两天！首先我们来看需求上demo<!DOCTYPE html><html lang...
2019-11-10 01:21:18
8676
1
原创 原生Javascript代码雨
效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { height: 100%; ...
2019-08-23 10:10:34
526
原创 2019最新的IDEA的激活方式！！！
第一步: 安装IDEAhttps://www.jetbrains.com/idea/选择要下载的版本Ultimate第二步: 下载破解补丁链接：https://pan.baidu.com/s/1j3ySqYEJA4vQUJbmPaUR5g提取码：aqmq第三步: 复制破解补丁到IDEA的安装目录第四步: 把破解补丁添加到IDEA的配置中去内容为：-javaagent:+你...
2019-05-08 11:54:39
2431
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人