- 博客(30)
- 收藏
- 关注
RSS订阅
原创 vue+echarts实现数据展示大屏
简单介绍一个数据展示大屏。适用于中小型项目展示，只做学习交流。技术栈前端：vue+echarts+axios+vue-router+less后台：node+koa2+websocket开发IDE：IDEA项目展示PS:图表使用数据均为自造数据，与任何应用或者数据均无关。项目展示效果：1、图表自动切换，图表不同类目切换效果2、大屏主题切换3、单独图表放大缩小效果开发准备一、前端项目的准备1.1. vue-cli 脚手架创建项目1.1.1 脚手架环境安装node install
2020-12-28 23:18:51
5059
9
原创 echarts 3D环状饼图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-10-19 23:11:15
2997
8
原创 CSS动画和JS动画对比
在工作中，经常会写点动画效果，常用的方式有CSS动画还有JS动画，根据项目的需求，采用的方案各不相同，但是两者实现的性能分析没有进行对比。总结网上相关资料，在这里简单整理下本文主要讲以下这些内容1、浏览器渲染流程2、回流和重绘3、CSS 动画4、JS 动画两者对比???? 1. 浏览器的渲染流程渲染流程主要有4个步骤解析 HTML 生成DOM 树解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree布局 Render Tree 对每个节点进
2021-08-31 10:35:27
1950
1
原创 vue实现简单移动端电商项目
在这里简单介绍下自己做的简单版电商项目技术选型vue2.x,vue-router,axios,vuex,脚手架：vue-cli 3.0UI选型：cube-ui项目简介该项目是简易的前端移动端电商项目，涵盖了首页，商品列表页，搜索页面，购物车页面，个人中心页面。当前项目采用mock数据实现简单效果显示项目搭建使用的vue-cli3.0进行搭建项目，所需框架可按照上述的需求进行安装依赖附上项目的package.json{ "name": "jdshop", "version":
2021-08-25 14:16:14
1665
2
转载 JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
项目中做过大屏展示功能，其中需求是需要全屏展示，正好HTML 5中的full screen满足需求，在此记录下。HTML 5中的full screen，目前可以在除IE和opera外的浏览器中使用 ，有的时候用来做全屏API，游戏呀，等都很有用。先看常见的API element.requestFullScreen()作用：请求某个元素element全屏Document.getElementById(“myCanvas”).requestFullScreen()这里是将其中的元素ID去请求ful
2021-07-08 10:06:02
2672
1
原创 代码优化：CSS变量使用
问题背景：因业务需求，需要维护应用多种皮肤，多个业务模块下复用了很多样式，造成了代码重复率较高，老旧项目并未对样式层面进行维护，导致项目后期维护成本高，开发人员工作量大，但是效率较低。原因分析：提示：早期项目是由外协开发人员进行开发维护的，项目启动初期没有制定完善的开发规范，以及开发流程吗，导致项目越发臃肿，项目中css代码，js代码未根据业务模块或者功能模块进行划分，代码重复率，代码质量都存在较大问题。以下将介绍下我在优化css代码时进行的工作记录。解决方案：本节内容主要针对css层面进行代码优
2021-06-16 10:51:05
84
原创 css实现tooltip
想起在群里有位群友问过一道面试题，怎么用css实现tooltip，第一解决方案大家可能是都是用title解决，但是会是这么简单吗？面试题考察点css实现tootip,个人感觉应该考点在于对css的熟悉程度。用title来实现tootip这个是基本上能解决问题的但是样式美化就是一个小问题。我来解决的话第一解决方案就是用伪类，伪元素实现。伪类 伪元素伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来
2021-05-28 22:01:46
1111
原创 vuex状态持久化保存，页面刷新保留
最近做的SPA项目用到了vuex，在项目的使用中遇到了一个问题就是当刷新网页后，保存在vuex实例store里的数据会丢失。在这里做个记录。一、产生原因JavaScript代码是运行在内存中的，代码运行时的所有变量，函数，都是保存在内存中的。刷新页面时，以前的内存被释放，重新加载代码，变量重新赋值。这些数据想要存储就必须存储在外部，这时浏览器提供的存储API localStorage,sessionStorage,IndexDB ,cookie就派上用途了。这些API可以将数据存储在硬盘上，做持久化
2021-05-24 16:35:17
1143
原创 简写Vue2&&Vue3.0实现原理
Vue2.x是通过 object.defineProperty来实现双向数据绑定的。以下是基本实现的小demohtml：<input type="" name="" id="text" onkeyup="show()"> <h1 id="showText"></h1>js:var obj = {};//首先定义一个空的对象var targetValue=document.getElementById('text');var showValue = do
2021-03-23 13:37:39
84
原创 CSS Sticky Footer 几种实现方式
本文主要介绍CSS Sticky Footer的几种实现方式，希望对大家的学习工作提供一定的参考学习价值。
2021-01-04 11:05:12
135
原创 jQuery常用知识点梳理
摘要：简单梳理下jQuery常用到的一些函数。使用这些函数时，要先将对应的jQuery文件导入。一、jQuery核心函数1.1 选择器1.1 基本选择器1.1.1 标签选择器需求：选择页面中所有的div标签，设置其背景为红色HTML<div>我是div1</div><div>我是div2</div><div>我是div3</div>JS$('div').css('background', 'red');效果
2020-12-30 17:40:33
135
1
原创 前端小知识
1.JS为什么单线程一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。而且还有一个主要的原因，设想一下，如果js是多线程的，在运行时多个线程同时对DOM元素进行操作，那具体以哪个线程为主就是个问题了，线程的调度问题是一个比较复杂的问题。HTML5新的标准中允许使用new Worker的方式来开启一个新的线程，去运行一段单独的js文件脚本，但是在这个新线程中严格的要求了可
2020-12-29 15:58:35
103
原创 jQuery中.bind() .live() .delegate() .on()区别
简介最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。这些疑惑通常是关于它们之间真正的区别是什么啊，什么时候该使用它们啊。下面本文将给大家详细介绍这四个方法之间的区别，分别对每个方法都进行了详细的介绍，话不多说，来一起看看详细的介绍：在我们深入了解这些方法之前，我们先来一段常见的的HTML，作为我们编写jquery示例方法使用的样本。<ul id="members" data-role="listview" d
2020-10-21 11:04:09
123
原创 http返回200但是response是“读取失败“
问题场景在项目开发时，由于后台暂未开发完成，所以前端采用mock数据进行页面调试。mock数据的格式由自定义，所以问题就产生了问题描述本地访问mock数据时，http状态响应码是200，访问成功，但是没有数据返回，在response里查看，提示"读取失败"。排查记录1、根据状态码，可以肯定访问mock数据成功，说明请求mock数据的方法没问题，请求方法如下： const result = await Http.postCuss(checkPriceApi) if (resu
2020-09-10 10:32:28
5359
原创 META标签属性说明
总结一些常用的meta标签属性及应用。1、声明文档使用的字符编码: <meta charset='utf-8'>2、强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 3、必须联网才可以访问,禁止浏览器从本地计算机的缓存中访问页
2020-08-24 22:36:05
1584
2
原创 移动端UI涉及规范
很多新人在开始做移动端UI设计的时候，往往对界面的一些尺寸规范不是十分清楚，很多时候都是凭借自己的感觉和经验去绘制界面，心里并没有一个清晰的概念，导致做出来的页面总是不那么尽如人意。本文整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。目录界面设计尺寸及栏高度边距和间距内容布局界面图片设计比例建立统一风格的图标APP版式设计规范界面文字设计规范设计适配切图规范设计稿标.
2020-08-18 10:41:19
672
原创 总结40条常见的移动端Web页面问题及解决方案
前言工作中接手做过一些移动端的项目，在开发过程中，发现了一些问题，结合网友的一些经验总结，整理下移动端常见的问题，这是在前一篇基础上，整理网友的经验，希望对大家有用。1.安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把 iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRat
2020-08-17 16:38:09
374
原创 移动端常见bug/兼容01
前言工作中接手做过一些移动端的项目，在开发过程中，发现了一些问题，结合网友的一些经验总结，整理下移动端常见的问题，希望对大家有用。点击样式闪动Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) {-we
2020-08-17 16:17:53
177
原创 前端常见面试题及答案整理一
前端面试题：1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-left:-100px;height:-100px;z-index:1000;}2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式： <body> <h
2020-08-17 14:55:45
1487
转载 Ajax原理
目录1 Ajax 的运行原理2 Ajax 简介3 Ajax 的使用3.1 XMLHttpRequest 对象3.2 Ajax 的使用步骤4 实例4.1Jsp页面4.2 Servlet4.3 运行效果1 Ajax 的运行原理2 Ajax 简介 Ajax ...
2020-08-10 11:08:16
77
转载 CSS的常用技巧，等待动画效果(附demo的效果实现与源码）
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其他
2020-08-05 23:27:35
1791
原创 Http常见状态码总结
前言最近项目开发时，由于项目一开始计划制定不详细，前后台字段定义不清晰，前端后台同事都是根据对已有项目的理解进行开发工作，导致前端发送请求，或2XX，或4XX，或5XX。在这里将做个前端状态码的总结，以对自己有用，也希望对各位有用。状态码分类http状态码分为五种类型：1**，2**，3**，4**，5**。分类 分类描述 1** 信息，服务器收到请求，需要请求者继续执行操作 2** 成功，操作被成功接收并处理 3** 重定向，需要进一步的操作以完成请求 4*
2020-08-05 23:02:41
112
原创 浅谈前端SEO
前言在上家公司时，接手过这么一个任务，改版公司网站。在进行网址性能分析的时候，发现了很多地方可以进行SEO优化，最终采取css精灵图图片压缩，List item减少http请求，启用gzip，优化后台查询方法，优化代码结构等方案。今天就顺便记录下方案已经摘录下网上比较全面的优化方案。首先附上连接：yahoo的优化原则=》https://developer.yahoo.com/performance/rules.html?guccounter=1本文摘自《摘自高性能网站建设指南》前
2020-07-23 00:25:37
663
原创 Vue.js实战之利用vue-router实现跳转页面
前言使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。在查看官网以及网上相关资料整理如下记录官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html这次的实例主要实现下图的效果：一、配置 Router用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装在这里插入代码片cnp
2020-07-21 00:53:27
991
原创 VUE+echarts实现省份，中国地图
总结下项目中vue项目引入echarts地图的实现过程及效果前提条件main.js 全局引入echartsimport 'echarts/map/js/china'import china from 'echarts/map/json/china.json'echarts.registerMap('china', china)Vue.prototype.$echarts = echarts省份地图文件具体实现在对应的页面实现效果<template> <div&g
2020-07-15 23:06:45
5679
12
原创 Vue引入echarts报错Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
问题出现场景 今天在vue中引入echarts时，运行报错 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null】 ## 问题排查 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： var myChart = echarts.init(this.$refs.map)
2020-07-15 22:43:41
2740
原创 移动端仿美团酒店预订选择日期日历
一、HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>jQuery手机端仿美团酒店预订日期选择插件</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0
2020-07-06 15:31:03
1159
原创 前端存储用法区别
前端存储的用法及区别前言一、sessionStorage二、localStorage三、cookies四、总结前言在前端开发中，往往会将有些不经常更改的数据缓存到本地，比如用户信息。前端本地缓存的方式有多种，比如 sessionStorage、localStorage 以及 cookies 等。那么这个几个缓存有什么区别，各自又有什么特点呢？将是本文分享的重点。一、sessionStorage用法sessionStorage.setItem：存储数据，接收2个参数，一个是 key，一个是
2020-07-06 15:11:28
497
原创 三种实现瀑布流的用法
前端瀑布流实现方法一、JS 实现瀑布流二、column 多行布局实现瀑布流三、flex 弹性布局实现瀑布流四、3种方式对比前言工作中需要使用瀑布流写法实现多图片等宽不等高显示效果，结合网上一些写法总结如下。一、JS 实现瀑布流瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。代码实现<!DOCTYPE html
2020-07-06 15:00:11
1380
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人