自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

欢迎大家交流前端开发技术、经验及各种知识沉淀

专攻前端H5开发,熟悉前端其他开发

  • 博客(27)
  • 收藏
  • 关注

原创 echarts绘制圆角方形进度图

这种场景下,可以使用两个系列,一个系列是完整的图形,当做『背景』来表达总数值,另一个系列是使用 `symbolClip` 进行剪裁过的图形,表达当前数值。

2022-09-29 11:24:21 921 1

原创 JavaScript的异步编程async、await

async/await就是为了解决异步回调而生的,它可以让你的异步代码写的像同步的一样具有良好的可读性

2022-09-23 11:04:02 439

原创 css的几个小技巧

css样式和id选择器等,可以给不通个元素添加不同的样式

2022-09-23 10:47:43 244

原创 页面上input输入框宽度实现自动调整

input输入框宽度实现自动调整,本文介绍两种方式,一是通过获取input**内容的宽度**实现输入框宽度的自动调整;二是通过内容字符串的长度乘以文本字体大小的积,来实现输入框宽度的自动调整。

2022-09-22 17:13:17 8181

原创 echarts饼图pie应用之一--多个环形图叠加

echarts中饼图主要用于表现不同类目的数据在总和中的占比。每个弧度表示数据数量的比例。

2022-09-21 14:40:06 2072

原创 页面图表插件echarts中map用法

整个地图实现阴影或者3D效果,需要echarts中配置项**geo和series中同时设置阴影效果**(或者series系列数组中设置2个元素),series浮在geo上面,二者中series的z的值要大于geo中z的值,并且geo相对series有阴影偏移距离,注意在series中的itemstyle中不设置shadowOffsetX和shadowOffsetY;地图中某一区域的阴影效果可以在data数据中具体的元素中对itemStyle进行设置

2022-09-21 11:30:03 3361

原创 CSS媒体类型基本知识

规则允许在相同样式表为不同媒体设置不同的样式。例如同一页面在浏览器屏幕上展示和打印在纸张上字体大小、背景色等属性会有区别,这是因为不同的媒体类型需要的样式不同,为了不重复编写多种样式,于是就产生了媒体类型 @media。

2022-09-16 11:07:03 767

原创 前端H5实际开发中常见的性能优化总结

对于一张 100 * 100 像素的图片来说,图像上有 10000 个像素点,如果每个像素的值是 RGBA 存储的话,那么也就是说每个像素有 4 个通道,每个通道 1 个字节(8 位 = 1个字节),所以该图片大小大概为 39KB(10000 * 1 * 4 / 1024)。但在实际项目中,一张图片可能不需要使用那么多颜色去显示,就可以通过减少每个像素的调色板来相应缩小图片的大小。

2022-09-15 10:18:35 1205

原创 前后端协作的一些规范

随着前后端分离开发模式大行其道,前端和后端已经在两个方向上渐行渐远,各自深耕细作、术业专攻。前端更加关注交互视觉体验,而后端对高并发、高性能、高扩展上要求更高。这就导致大部分的前端和后端之间会存在所谓的"代沟",我不知道你的数据如何存储,你不知道我的页面如何渲染。

2022-09-13 10:49:26 1678

原创 JavaScript的20个工具函数助力H5高效开发

在我们H5的日常开发中,前端会面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,我现在把这些工具函数收集起来,将大大提高我们的开发效率。

2022-09-09 11:07:39 217

原创 详解浏览器渲染原理及流程

我们打包出来的 HTML、CSS、JavaScript 等文件,经过浏览器运行之后就会显示出页面,这个过程就是浏览器的渲染进程来操作实现的,渲染进程的主要任务就是**将静态资源转化为可视化界面**

2022-09-07 11:01:35 1767

原创 JavaScript中bind、call、apply方法的简单运用

bind是ES5新增的一个方法(IE6,7,8不支持),bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。不会执行对应的函数,call或apply会自动执行对应的函数返回对函数的引用

2022-09-06 15:55:35 278

原创 JavaScript数组的一些内置方法

栈方法——push()方法、pop()方法  转换方法—toLocaleString()方法、toString()方法、valueOf()方法:  队列方法——shift()方法、unshift()方法  重排序方法——reverse()方法、sort()方法  操作方法——concat()方法、slice()方法、splice()方法  位置方法——indexOf()方法、lastIndexOf()方法  迭代方法——every()方法、filter()方法、forEach()方法、map()

2022-09-06 15:42:45 382

原创 JSON.stringify和JSON.parse浅析

JSON.sringify将JavaScript对象序列化成字符串,再将字符串通过JSON.parse解析成(反序列化)JavaScript对象,即:JSON.parse(JSON.sringify(obj))。

2022-09-05 14:07:42 673

原创 canvas在PC端实现振幅大小可变的动态波浪图

根据canvas画直线的方法(moveTo、lineTo、stroke等canvas方法),在画布上画连续的点线。实现波浪图的核心点位为:正弦函数和浏览器的定时器(setInterval),利用正弦函数(或者余弦函数)的值来动态增长点的Y轴上的坐标,实现波浪线的生成,再使用定时器定时改变波浪线上每个点线的位置(Y轴的坐标),进而实现动态前进的波浪线

2022-09-02 14:25:03 1093

原创 canvas实现X轴方向动态增长的柱形图及折线图-大屏开发

根据应用场景,①定时器setInterval每30秒循环一次动态柱形图和折线图的生成;②定时器setInterval动态生成本次循环从0增长到当前值的动态柱形图和折线图的生成。

2022-09-01 15:02:54 571

原创 echarts中的散点图极坐标系展现上半圆时钟图

使用极坐标系的散点图来开发。控制极坐标的配置项有三个:polar(极坐标系)、radiusAxis(极坐标系的径向轴)、angleAxis(极坐标系的角度轴),配合series中type=scatter来最终实现设计图上的上半圆形图案。极坐标系中的散点图,会根据圆形上的刻度值及径向轴上的刻度值来展示不同位置的点(本例中为大头针)............

2022-08-31 14:14:01 1306

原创 emoji表情符号有时不能正常显示的问题的解决方案

前端页面将用户带有emoji表情符号的留言发送给后端保存后,前端页面从后端获取留言再次展现。但是到再次从后端获取留言展示时,emoji表情符号不能正确展示。估计是后端数据库字符集不能兼容emoji表情符号,保存失败。emoji表情符号绝大部分(只有几个特殊的表情占2个字节除外)占用4个字节存储..................

2022-08-31 10:09:14 4984

原创 jQuery技术下实现input元素输入框宽度大小自动调整的两种方式

input输入框宽度大小自动调整有两种方式,一种是:先获取input的文本内容,然后创建预格式化的文本pre标签元素,将获取的文本内容放到pre元素里,再获取pre元素的宽度,根据获取的pre元素的宽度,进而改变input输入框的宽度,另一种是:input输入框的宽度也可以根据输入文本的字符串的长度乘以文本字体大小来实现自动调整......

2022-08-30 10:12:54 2709

原创 Picker日期组件-切换到指定日期前后-选中日期显示错位问题的解决

mint-ui或者element-ui中Picker选择器,支持多个slot联动,实际应用中例如:年、月、日的三级选择联动,省、市、县的三级选择联动等.picker日期组件切换到指定日期的前后,反复操作会报错或者格式上会错位.....................

2022-08-29 10:58:09 1196

原创 JavaScript的原型与原型链及继承浅谈

JavaScript中,分为普通对象和函数对象,Object、Function、Number、Boolean、String、Array、RegExp、Error是JS自带的8个函数对象。凡是通过new Funciton()创建的对象都是函数对象

2022-08-26 13:27:36 114

原创 JavaScript(js)事件冒泡、事件捕获、事件委托详解

JavaScript和HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器(或事件处理程序)来预定事件,以便事件发生时执行相应的代码

2022-08-26 10:04:30 562

原创 input元素的事件的触发顺序及change事件触发条件

首先触发了鼠标按下事件,然后就是焦点到了input上面,然后鼠标抬起,触发click点击事件,失去焦点以后弹出了文件选择框,选中文件以后触发焦点,最后触发的change事件。

2022-08-25 18:08:11 5896

原创 vue项目中使用QRcode生成二维码时,二维码内容过多时报错问题处理

二维码(Quick Response Code, 快速响应码)本质上是密码算法。在做某个项目的时候,由于二维码内容页面链接,由于链接内容过长,导致上述错误,最后几经查询调试,

2022-08-25 13:57:16 2734 1

原创 Vue中事件修饰符使用总结

`在javaScript事件处理程序中经常调用event.preventDefault()和event.stopPropagation()等方法,在vue中对应着v-on的事件修饰符

2022-08-25 13:50:41 375

原创 Vue数据响应式原理--Vue2.0 defineProperty和Vue3.0 Proxy

理解熟悉Object.defineProperty和Proxy可以进一步理解VUE的数据响应机制,因为Object.defineProperty和Proxy分别是Vue2.0和Vue3.0的数据响应实现的核心点。这里重点探讨下对数组元素数据的响应试。重点理解Object.defineProperty 对数组和对象的操作是一致的,有助于进一步了解JavaScript语言的特性和更深一步运用Vue.

2022-08-25 11:18:50 657

原创 vue技术框架下手机端移动上拉实现分页功能

页面初始化时,获取后端返回的数据(返回的数据是数组形式的),将数据等分成N份,用户每次上拉到底部时,渲染下一页的数据。即:用户上拉滑动时,会触动scroll事件,当【文档高度(scrollHight)小于滚动条高度(scrollTop)加页面可视高度(clientHeight)】时,触发滚动事件(scroll事件),页面渲染下一页的数据。注意:scrollHight是整个页面文档的高度,scrollTop是文档内容顶部到可视窗口的高度,clientHeight是页面的视口大小,实际测试中需要scrollHi

2022-08-25 10:57:28 2034 1

空空如也

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

TA关注的人

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