pipixx-CSDN博客

原创前端用vue实现一个滚动数字时钟

前端用vue实现一个滚动数字时钟如果想直接用可以复制代码当作vue组件。实际上是六个纵向的数列，每列的数字从下往上滚动，秒数滚动到头就向左“进一位”，每一列到头都会向左“进一位”。到24：00：00时全部从0开始。获取当前时间后，把值赋给每一位数字，然后就按上面的流程每秒滚动一次，来模拟时钟。由于js的计时不够精确，运行时间长可能错几秒。代码如上，难点是turnOther函数，它是个递归函数，用来实现“进位”。

2022-11-08 20:41:47 4539 1

原创 javascript中解构赋值，没写分号，导致的报错问题

出错的几行代码如上，没写分号之前，一直报错：Uncaught ReferenceError: Cannot access ‘y’ before initialization。平时js代码习惯不写分号了，用解构赋值的时候出现个问题，着实把我搞懵了，最后发现是分号引起的。虽然换行了，但这种情况会导致编译器认为解构赋值跟上一句是同一句，所以导致了报错。js的编译器并不是根据换行断句的，可能是根据关键字和其他比较“智能”的方式。报错内容：变量y只声明了，并没有赋值，所以获取不到style属性。

2022-09-30 17:39:41 854

原创浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法

浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法history.back()时需要调用好几次才能回退到上个页面。本来刷新应该不会增加history的记录，项目中某些页面就会出现这种情况，刷新一次就会增加一条。但是有些页面就没这种现象，具体原因也没有查到，希望懂的同学赐教。......

2022-08-29 15:56:25 2560 3

原创 css动画实现一个svg图标镂空充电动画

css3 实现的镂空图标充电动画效果

2022-07-25 16:24:22 458

原创 underscore.js源码整体框架解析

源码框架读一些库的源码时最头疼的其实不是里面各个函数的功能，而是整体结构框架，通常库的源码都很长，跟框架相关的代码并不是在一起放着的，导致你想明白起来就很难。我看过通过画图的方式去讲解框架的，但看完以后还是一头雾水，甚至越看越懵逼，各种箭头绕来绕去对理解框架是然并卵的。身为一个程序员，代码其实是最直接的。并且框架这种底层的东西，原理一定是很简单的。即便是复杂如整个互联网的架构，每一层网络模型的原理也都是很简单的。所以想理解框架，最好的方式就是把跟框架相关的代码提取并精炼出来，其他乱七八糟的东西一

2022-04-02 21:02:12 772

原创 javascript函数链式调用原理

链式调用大家都知道链式调用能够让代码更简洁易读，一般用于批量数据的多次复杂处理。关于它的实现原理一般有两种方式：1.构造函数的实例方法或原型方法执行完后 return thisfunction Person() { this.run=function () { console.log('run') return this // 返回调用run方法的对象自身 } this.stop=function () { console.log('stop')

2022-04-01 20:11:59 2481

原创 javascript中类的继承方式解析

MDN上类的继承方式上一篇说了js中的实例化，这篇说一下js中的类的继承方式经常能搜到一些总结js继承方式的文章，原型链继承，构造函数继承，组合继承，寄生继承，组合寄生继承，新手看完之后肯定是越看越懵逼，这些文章写到最后一定是推荐使用组合寄生继承，因为只有这种方式是最完美的。这篇咱们不看那么多，只看前端的圣经，MDN上是如何实现类继承的。MDN上只说了单继承和多继承，很好理解，单继承就是只有一个父类，多继承就是有多个父类首先要明确的概念，对象的属性和方法在js中其实都可以看作是属性，方法是值为

2022-03-16 20:49:29 1448

原创 javascript中几种实例化方式的对比

javascript中几种实例化方式的对比实例化的几种方式实例化的几种方式许多前端程序员对于js中的类其实都是比较懵逼的，因为业务开发中几乎不需要用到，但是当你读一些库的源码时，又是绕不过去的。新旧语法，各种奇奇怪怪的关于类的方法一大堆，看看相关帖子，越看越是摸不着头绪。下面把几种常见方式放在一起，做个比较。// 最经典的实例化方式,大家都知道function Foo(name) {this.name = name return 1 //不使用new调用时的返回值}Foo.prototy

2022-03-15 20:17:06 1809

原创 underscore.js源码中关于对象合并方法的解析（extend，extendOwn，defaults）

underscore.js源码中关于对象合并方法的解析（extend，extendOwn，defaults）

2022-03-14 18:01:27 942

原创 underscore.js中节流函数的解析

underscore.js中节流函数的解析源码简化版源码underscore.js是一个经典的js工具库，随着语言的发展，虽然现在用的少了，但它像jquery一样，甚至影响了语言的发展，足以说明其厉害之处。许多开发人员进阶首选学习的就是它。本文解析一下其中的防抖函数，加深对js语言的理解。节流和防抖的区别：防抖函数：连续触发时，刷新上一次的定时器，在一定时间段内只响应最后一次。节流函数：连续触发时，只会在一定时间段内触发一次，不刷新时间间隔，也就是可以多次触发。简单点说就是比如点击一个按钮，用

2022-03-10 18:15:18 327

原创基于echarts4实现的时间段选择器

基于echarts4实现的时间段选择器界面项目简介用法调用界面项目简介下载链接如下github地址基于echarts4，如果用5版本会显示不出来。图形化快速选择一个星期中的时间段，精度为0.5小时可以自适应传入的dom元素大小。用法用npm安装到项目npm install timeselecter --save必须依赖echartsimport echarts from “echarts”仅支持esm方式导入import timeSelecter from “timeselec

2022-01-06 18:13:15 2786 1

原创浏览器实现一个一键三连动画

浏览器实现一个一键三连动画效果概览项目简介效果概览项目简介下载链接如下gitee地址图标使用iconfont，点赞动画依赖anime.js库实现，圆环动画和散花动画使用svg方式实现。散花的方块使用cdr画出，导出为svg格式，手写的话就要死人了。前端动画实现的方式比较多，但各有其优缺点，功能相互重叠的地方也比较多，还是要根据实际需求，选择最合适的实现方式，达到页面性能和代码结构的平衡。所有代码都在项目里的index.html中。...

2021-11-15 11:41:47 363

原创实现一个svg和图片完全重叠的类似地图效果

如图所示,建筑是一张png图片,闪烁的遮罩是svg元素.svg使用绝对定位,实现了任意缩放状态下,svg遮罩和png图片不错位,从而实现一个简单的可以交互的类似地图功能.vue代码如下:<template> <div class="container"> <img src="../../assets/map.png" alt=""> <svg v-if="maskShow" class="svgMask" version="1.1".

2021-09-09 16:29:48 1273

原创 css实现一个自适应多边形带有内阴影的边框

效果预览如图所示,整个边框的折线是用clip-path实现的,使用box-shadow做阴影的话右上角及右下角的阴影是会被裁剪掉的,尝试了一些常规办法都实现不了,每次到这种时候,心里一定要暗示自己:css的奇技淫巧都是"障眼法"…解决方案就是在右下角和右上角再分别绘制一个把方块补齐的多边形,给多边形加drop-shadow属性添加外阴影.这样就只有阴影部分被边框的clip-path裁剪进来,实现上述效果.代码如下,是一个vue组件,能够自适应不同的内容<template> <

2021-08-17 18:25:52 1251 2

原创动画的方式理解css中perspective属性

属性的定义解释中的关键点就是"透视"效果,学过美术的都知道,透视意味着画面看起来更有空间感,更立体.这个属性的作用也是如此.直接在w3school上模拟一下就会非常直观网页链接演示动画按照上面的代码在网页上稍加更改,就能看到效果了.以下是值为150看起来比较正常,明显的透视效果,简单来说就是远大近小以下是值为1000看不出透视效果了,因为1000意味着方块离你特别远,虽然有透视效果,但很不明显了.以下是值为70有一种方块被甩到脸上的感觉…就是因为它离你太近,所以透视效果

2021-07-26 10:35:27 558

原创 anime.js实现一个天气动画

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { .

2021-07-14 06:36:53 528

原创使用popmotion.js制作一个svg变形动画

popmotion.js简介popmotion.js是一个小巧强大的js动画工具库,并不像传统的动画库,不会把各种类型的动画封装成直接驱动元素的函数,核心功能是生成数字类型补间值,结合vue这种数据驱动视图的框架用起来特别爽.和任何其他动画库例如three.js都可以很好的融合使用.举个简单的例子:import { animate } from "popmotion"animate({ from: 0, to: 100, onUpdate: latest => console.lo

2021-07-09 19:38:50 805

原创 JavaScript中不同对象的toString方法解析

toString方法解析刚开始使用toString方法时就会很疑惑,例如下图经常能看到一些判断数据类型的代码里会使用toString.call(…),根据返回值判断类型.可是似乎js里任何对象都有toString方法,并且返回值都不相同.下面的内容从应用层面捋一下.js是一种基于原型的语言,当调用对象的一个方法时,如果该对象没有此方法,则会一直顺着原型链向上查找,直到Object对象为止,如果还是没有就会报错.例如:function Person(name) { this.name = n

2021-06-21 20:04:54 857

原创实现一个svg扫描动画小图标

sss前言防抖函数前言js语言里的闭包,this等知识点通常会难到许多初学者,好在稍难一点的东西网上都能找到例程,或者已经被人封装过.但是总有一天你会想更深入的了解一点,下面是本人学习时的理解,有错请指正.防抖函数网上找到最常见的防抖函数timeout就是一个闭包方式产生的变量,当你调用debounce函数以后,return的函数中会继续引用timeout变量,所以不会被gc回收,于是timeout就相当于return函数的"全局变量",但真正的全局变量并没有被污染,这就是闭包的好处.func

2021-06-01 14:04:46 605 2

原创 javascript防抖函数里的闭包,this指向解析

javascript防抖函数解析前言普通的防抖函数前言js语言里的闭包,this等知识点通常会难到许多初学者,好在稍难一点的东西网上都能找到例程,或者已经被人封装过.但是总有一天你会想更深入的了解一点,下面是本人学习时的理解,有错请指正.普通的防抖函数网上找到最常见的防抖函数timeout就是一个闭包方式产生的变量,当你调用debounce函数以后,return的函数中会继续引用timeout变量,所以不会被gc回收,于是timeout就相当于return函数的"全局变量",但真正的全局变量并没

2021-03-25 09:06:25 1082 1

原创微信小程序实现一个复杂的路径动画

微信小程序实现一个复杂的路径动画前言效果预览页面代码结论前言微信小程序不支持svg动画,如今css3发展的越来越快,虽然没有svg的接口那么丰富,但使用起来比较容易上手,下面借助两个工具实现一个复杂的路径动画,在浏览器端当然也可以运行.效果预览模仿过山车的动画,复杂路径和小车速度的调整代码都是用的在线工具生成,完全不需要自己写哦.页面代码wxml文件<view class="container"> <image src="../../static/che.png"

2021-01-27 15:46:30 1512 2

原创 uniapp开发微信小程序canvas动画入门

uniapp开发微信小程序canvas动画入门前言效果预览页面代码结论前言老版的微信小程序canvas接口由于是视图层和逻辑层双线程的关系,动画效果很卡,而且api都是为了标新立异,重新包装H5的,学习起来也要再花时间.2.9.0版之后终于与H5的接口同步了,并且性能也得到了极大的优化,简单的动画在移动端运行起来还是非常流畅的.大家在很多网页上都见过粒子飘来飘去的动画,有点物联网的感觉…下面使用uniapp开发环境实现一个微信小程序端的粒子动画背景,app端不支持新版的接口,运行会报错.粒子动画

2021-01-05 09:49:01 3114 7

原创 mqtt协议qos,retain,dup,cleanSession,will的简单理解和应用

mqtt协议qos,retain,dup,cleanSession,will的简单理解和应用前言qosretaindupcleanSessionwill前言搞过物联网开发的同学们肯定都知道mqtt协议,对于简单的应用大家很快就能上手做出来一些东西,稍微深入一点去了解的时候就会发现根本没有想象的那么简单,能查到的资料基本都晦涩难懂,下面简单讨论一下协议中的qos,retain,dup,cleanSession,will的基本概念和应用.以下代码部分全都是js实现的.参考文章:规范部分:协议规范qo

2020-12-17 10:33:57 4273

原创 nodejs实现的mqtt基础物联网平台

element-ui中progress组件的改造实现的效果实现过程心得总结实现的效果如图二氧化碳指数，format参数可以改变值的单位，但值只能输入0-100，毕竟是progress，这样设计也没毛病。但有时候就是想用圆环的形式表现一个超过100的值，最好还能用此组件，保持前后风格一致，自己重头写一个的话对我这种水平的开发者来说还挺难，只能研究一下源码进行一番改造。实现过程找到packages下的progress组件，就是一个标准的vue组件，对于svg的接口本人也不怎么熟悉，画圆环的代码看的

2020-09-29 10:26:35 1888 5

原创前端实现一个简单的svg定制地图

前端实现一个简单的svg定制地图实现的效果地图代码实现的效果身为一个三线小城市的开发者，开发管理类的前端项目，必须有一个首页大屏页面，因为领导们都喜欢看这个，于是参考别人的项目也做了一个。中间的地图模块有点意思，载入的是一张网络上的图片，使用svg技术画了建筑的边框，然后就可以像操作dom一样触发交互了。中间地图可以换成任何图片，比如大楼的设计图，厂区的平面图等等，实现定制化地图的开发。绘制svg用的软件是cdr，画布使用像素做单位，将图片载入cdr中，然后绘制轮廓图，导出svg格式的文件就可以

2020-09-23 21:13:22 4890 8

原创 zrender实现一个图片上标注点连成框的程序

前端实现一个图片上标注点连成框的程序实现的效果功能的实现实现的效果身为一个三线小城市的开发者，平时就是使用各种框架画个按钮，表单，图表之类的东西，如果突然有一天面临一个非主流的需求，虽然看起来并不是很难，但需要学习很多canvas相关的知识才能实现。在此强烈推荐大名鼎鼎的echarts底层图形框架zrender，你可能从来没听说过zrender，但是如此牛逼的echarts就是用它实现的，完全可以放心使用。它没有直接用canvas那么生涩，也不会像各种应用层框架那么死板，看完文档以后，很快就能上手

2020-09-17 23:09:06 747

qq_34415621的博客