雷斯巴能-CSDN博客

原创 MuiPlayer - 一款优秀的 H5 视频播放器框架

MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。MuiPlayer 具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放。

2021-04-14 17:59:50 4833 3

原创 JavaScript 获取客户端IP 以及外网IP

JavaScript 获取内网IP 客户端 ip 也叫做内网 ip、本地 ip。使用 js 获取内网 IP 目前比较有效的方法通过 WebRTC 接口来获取。通常浏览器没有禁用 WebRTC，在 firefox 以及 chrome 浏览器下都能正常执行。不过该接口并不支持IE，除非在您的系统需要兼容IE，那么您可能就需要通过 ActiveX 来获取 IP了。外网 ip 也叫做公网...

2020-04-17 21:11:08 1279

原创针对iview表格支持可拖拽拉伸，自定义插件封装支持iview table可拉伸效果实现

针对ivie表格支持可拖拽拉伸，自定义插件封装支持iview table可拉伸效果实现也不知道多久没有去更新一些文章来分享一下东西，可能是在“程序猿”的道路上走着再平凡不过道路而感到惴惴不安，或者也可能是没有时间去研究其他的一些新鲜的东西呢？到此虽然自己还在前端的开发道路上… 跳槽了一会，对于前端，在公司的应用也说不上是一个比较成熟的体系了，用的Vue + Iview 等技术栈应用。在使...

2019-09-26 16:14:17 2507

原创 npm常用命令的简明使用

索引1、npm安装本地依赖模块2、安装全局的包3、更新安装的包4、卸载安装的包npm安装本地依赖模块：如下命令将在项目的根目录创建 node_modules 文件下，并将依赖项安装到此文件下。一单模块安装成功，您将可使用使用它，在node.js 模块中，我们可以requre 或者 import 指定的包。//安装模块 vue vue-router vuex 到本地工程...

2018-11-29 01:48:11 369

原创 npm 以及 package.json 文件使用和说明

npm 简明使用说明前端确是比较杂的一个体现，面对各种JS 框架、UI 框架“数不胜数”，在加上各种其前端技术得日益更新，之前用过的东西忽然之间发现有一种更好的替代方案，因此将之前用过的东西抛开一端，这正也是技术的进步淘汰规则的体现。对于前端工程师的任务和挑战也挺多，面对一些高体现的移动端跨平台框架，如Weex 、React-Native或者Flutter 又或者是Dcloud 公司...

2018-11-29 00:42:44 759

原创 create-react-app 项目中使用Antd（按需加载以及 less 配置）

create-react-app 项目中使用Antd（按需加载以及 less 配置）大概很多一部分人在使用create-react-app 构建好的React 项目运行环境，在选择Antd 最为React组件的UI 库时，有必要对其按需加载的配置。本来对与UI 的配置来说一般不复杂，但是在这里需要一些注意的配置项，打算还会写了这么一篇文章作为记载，希望能帮助到关于此配置问题的伙计 Men....

2018-09-23 18:28:52 2850

原创 React 项目的构建以及技术栈的应用

索引目录：1、使用 react-app my-app 脚手架构建React 项目运行环境2、React 技术栈在实际项目中的应用（模块下载）1、使用 react-app my-app 脚手架构建React 项目运行环境当然这里我们使用react 官方提供的webpack 脚手架工具，这也是大多人的选择。如果您需要构建自己react 项目，便可大胆应用react 提供的creat...

2018-09-23 13:21:57 1431

原创 Redux 配置说明以及实例教程（react-redux）

Redux 配置说明以及实例教程为了形成对React 技术栈选型应用，在学习redux 过程中“痛心疾首” 般还是花费了不少的力气，整整花费了大概有2周的时间去了解文档中的API。如果您在学习Redux，当然你可能很快知道Redux 的基本使用，但是如果要在项目中更好的使用它，对于redux 一些的概念性问题你可以就要花费一些时间去实践。这里主体阐述下面的实例应用和说明教程...

2018-09-23 11:07:51 3386

原创 React 开发，入门上手实例教程

React 开发，入门上手实例教程 React 做为高性能的Js 框架，在使用程度也较为简单，在声明函数、组件的声明、事件处理等在语法上的编写也都挺简洁明了。针对对React 单一框架技术的总结，做出对react 基本的使用和进行归纳记载。对入门 React 简单实例的应用。 React 语法逻辑简单，如果您对ECMAScript 熟悉的前提之下，学习...

2018-09-07 02:03:24 595

原创 react-router-dom 配置以及使用

react-router-dom 配置以及使用使用React 开发应用程序，自然少不了页面路由的配置。react-rotuer-dom 作为官方提供的路由加载器自然是最好的选择手段。目前react-router 已经更新到 4+ 版本。这里为什么推荐使用 react-router-dom ，而不使用react-router呢？在4.0 版本以后，可以说是react-r...

2018-09-01 23:39:28 6148

原创 React 项目构建以及其他配置

React 项目构建以及其他配置 React 是构建用户界面的JavaScript 库，简单的理解成React 是用于构建UI，因此我们可以理解React 是MVC 概念中的 V，即视图层。在前端项目开发使用React 做为应用主要的JavaScript 框架，React 在性能上比较好的，但是起初的学习和很好的使用React 恐怕要花费一些功夫，因为我们学习的...

2018-08-30 00:25:06 1126

原创 vuex 的配置和使用

vuex 的配置和使用在使用 Vue.js 开发中大型网站或者移动应用时，一般来说都有Vuex的应用，特别是在页面组件较多，组件之间的关联度以及耦合度较高时，应用Vuex 状态管理 “恰如其分” 了~Vuex 核心概念的说明： Vuex 是专门为Vue.js 开发的一个状态管理器，它采用了集中式的模式管理着每一个的组件的状态。一种可预测并响应式的方式处理组件中发...

2018-08-06 00:59:19 1452

原创 vue-router 配置以及使用

vue-router 配置以及使用前边一篇总结到关于开发 vue 项目中技术栈的应用，自然在项目中路由管理器的应用必不可少，即vue-rotuer！ vue-router 是vue.js 官方的路由管理器，它与Vue.js 深度集成，因此在使用vue.js 时，选择vue-router 最为路由管理当然就 “无可挑剔” 了。在构建单页面应用也非常直观易用。...

2018-08-05 23:41:17 738 1

原创 Vue 项目的构建以及技术栈的应用

前端开发领域，技术的应用更是琳琅满目，因此会感觉在学习过程中的不知所错，也正是该如何搭建适合自己的一套技术体系。当然对js 熟悉程度是必不可少，如果你对js 的开发已经轻而易举了，那么对 ECMAScript 的学习也就非常轻松了~ 因为在更多的前端开发工作中都是模块化以及组件化的开发，然而这些就使用到Es6 的api. 在我们开发vue 项目时，可视化开发的工作必不可少，当然我们是...

2018-08-03 00:06:26 1961

转载常见的电脑屏幕分辨率统计

通常情况下，屏幕的分辨率月越高，所包含的像素也就越多，图片就越清晰。根据不同笔记本、台式电脑以及Mac电脑屏幕大小的不同，从网上摘要对屏幕常见屏幕分辨率的归纳。笔记本电脑个尺寸对应分辨率：屏幕尺寸屏幕像素 12.1寸 1280*800...

2018-07-26 14:43:29 9871

原创 git常用命令的简明使用

0、git remote1、git clone2、git fetch3、git merge4、git pull5、git add6、git commit7、git push8、git checkout9、git reset10、git branch

2018-07-20 10:53:10 831

原创 git 的基本概念和配置说明

针对Git，目前已经是十分流行的版本管理控制器，在每一家公司必然可能会用到git来进行项目的管理。此时我们就有必要了解对git 常用命令的使用、环境搭建。在学习以及了解git时，慢慢认知其对git其功能的强大以及高效的项目的管理。网上已经对git 的使用教程写的天花乱坠，官方的解释也是十分到位。如果您是学习git 的初学者，建议到git 教程的官网网址进行系统的学习，当然在这里...

2018-07-03 23:38:01 384

Sass 是CSS的扩展语言，同时也是css预处理器。相比css来说，sass 提供了大量的简便的写法，使得日常的css开发变得更加简单和可维护性，实现了css模块化的开发的目的，如何你正在学习Sass 预处理语言，相信你在使用sass之后会深深感受到在sass在css 的处理上的大大便利而爱不释手。当然你如果了解less ，对sass的学习轻而易举了~ 本文主要针对是Sass 的基本使用，当然...

2018-06-27 00:59:24 1363

原创 http 请求常用状态码介绍

在浏览器即客户端访问网页时，客户端向服务器发送get、post、delete、put、head等请求时，服务器处理客户端的请求，返回客户端会包含HTTP 状态码的信息头（Server header）.客户端接收服务器有分别有5中请求状态标识，即xmlHttpRequet.readyState. 1、执行请求 2、请求成功 3、重定向 4、客户端错误， 5、服务器错误以及状态码，即...

2018-05-26 17:22:25 352

原创 == 和 === 的区别？ & 和 && 的区别？ js运算符小知识记录。

比较运算符：= ：等于，与比较值会发生类型的转换。var n1 = '1';var n2 = 1;console.log(n1 == n2); //打印true== ：全等于，值和类型比较过程不会发生类型的转换。var n1 = '1';var n2 = 1;console.log(n1 === n2); //打印false逻辑运算符：&amp;amp; ：逻辑运算符...

2018-04-01 17:21:02 427

原创常用各个手机屏幕分辨率归纳。iphone5/iphone7/iphone7 plus/iphoneX/Android 分辨率大小归纳

ios,android 常用手机屏幕分辨率归纳。针对IOS，Android 手机分辨率大小、屏幕尺寸、开发尺寸的参考。在实际页面的开发过程，往往显示屏幕的宽度换算为像素尺寸的1/2。IOS： Android： ...

2018-03-28 15:34:50 5379

原创 Echarts图表库。饼图 pie 图表组件的使用。饼图组件API使用规则--DOME

举例给予Echarts 图表饼图的使用规则。更多内容参考：http://echarts.baidu.com/examples/#chart-type-pie后端领前线，前端无极限。这里只举例了基于 Echarts 图表 “饼图” 的使用规则。更多内容参考官网网址，或者加入菜鸟Q群探讨问题以及学习：595377655。&amp;lt;!doctype html&amp;gt;&amp;lt;html&amp;g...

2018-03-26 10:32:11 2964

原创（常用代码）CSS3 进度条效果的实现

（常用代码）CSS3 进度条效果的实现不需要阴影3D 的效果注释样式/*box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);*/构建HTML 结构和样式div class="progress"> div class="loader-container">div>div>style&

2018-01-30 16:49:28 4200 1

原创（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/

（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/第一步：构建HTML 结构和样式div class="timing"> span class="minute date">07span> span class="colon">:span> span class="second

2018-01-30 14:39:49 619

原创精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能效果实现！

精致的H5 列表侧滑组件。H5页面侧滑删除、修改的效果。这里只支持手机端访问，Chrome浏览器调试切换到Mobile 调试模式学习无止境，何时是终点、时间让人沉思。代码分享，是对以下文章的更新版本！http://blog.csdn.net/china_guanq/article/details/78297430此此修改，大部分整理修改了组件存在的Bug 以及优化处理。为了不给自己埋井

2018-01-25 17:05:09 5724 1

原创针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景的解决方案。

在iOS的微信,QQ,Safari等浏览器, 列表顶部下拉和底部上拉露出浏览器灰色背景。针对此问题，在一些移动端页面下拉、上拉过程导致浏览器底部露出背景。在一定程度上会影响用户的正常操作以及用户体验。省下好多喝茶的片刻，以及找过网上类似的解决方法。终于想到一套能够很好解决此类问题的办法！需要解决此刻需求的朋友参考文章，提供给大家思路以及参考学习。具体实现步骤以及

2018-01-23 15:03:40 17311 4

原创针对常用移动端H5页面CSS 样式控制。禁用页面文本复制、禁用系统默认菜单、禁止链接点击高亮的处理。。。。

* { -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*禁用文本复制*/ -webkit-tap-highlight-color:transparent; /*取消点击链接或者JavaScript可点击元素赋给的高亮背景色*/}针对不同浏览器内核-webkit-，-

2018-01-23 14:07:20 2380

转载 -webkit 内核浏览器自定义滚动条样式

实例代码针对-webkit 内核浏览器滚动条样式的设置以及使用方法，记录并提供给大家学习参考。声明出现滚动的容器（#scrollWrap）：overflow：auto。#scrollWrap::-webkit-scrollbar-track { background-color: transparent}#scrollWrap::-webkit-scrollbar {

2018-01-23 13:36:55 301

原创 js 判断浏览器

function isBrowser() { var userAgent = navigator.userAgent; //微信内置浏览器 if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') { return "MicroMessenger"; } //QQ内置浏览器 e

2017-12-25 14:15:21 4059

原创原生js 仿微信网页加载进度条的提示

一些H5页面在网络加载时，事件会一直监听并触发 readystatechange 事件。某些需要提示网页加载进度，进行进度条提醒的友好提示，类似微信访问微信公众号会出现进度条。用原声JS实现的方法，只需要引入js脚本文件到页面头部。引入progress.js。添加到网页头部。document.addEventListener('readystatechange',function() {

2017-12-25 12:01:29 1332

原创 java 操作array、list 。subList 的使用

String object = "{'main':[{'name':'A','address':'ShanHai'},{'name':'B','address':'ShanHai'},{'name':'C','address':'ShanHai'},{'name':'D','address':'ShanHai'}]}"; JSONObject jsonObject = JSONObj

2017-12-22 10:23:04 730

原创原生JS、CSS3 上拉刷新效果的实现。

突然间的兴致，把遗留的上拉刷新的组件给写写，完工确实也花费了不少时间。个人认为在移动端大可不必做一个上拉的效果来进行数据分页，类型淘宝、等app都是判断滚动条到底部进行数据加载的动作，效果堪称极品中的上品，确实不错。前端生也为此寻找一些乐趣。Dome不是一流，但是一般。有任何兼容性问题，欢迎提出和分享。在这里与大家分享以及技术学习的目的。解决发现问题: 兼容IOS滚动条上拉是滚动不流程

2017-12-21 16:09:25 2387

原创如何设置图片、文字在容器（div）中垂直居中的显示？

1、设置文字在div 容器中垂直居中显示&amp;lt;div style=&amp;quot;border: 1px #f00 solid;height: 200px;width: 60%;text-align: center;line-height: 200px;&amp;quot;&amp;gt; &amp;lt;span&amp;gt;文字垂直居中&amp;lt;/span&amp

2017-12-05 09:42:49 954

转载 flex 布局的使用

网页传统的布局方式依赖“display”、“position”、“float”属性，对于垂直居中、容器大小分配就会显得很不方便。Flex 就很好的解决这些问题，实现响应式的页面布局。对于Flex 的钟爱，记载可能是为了下一次理解与回忆。容器的属性：.box{ display: flex; flex-direction: row | row-reverse | column |

2017-12-04 14:40:49 1429

原创 H5标签 video标签的使用

HTML5支持多种媒体元素,<video> 原件可以单独使用，或者综合<source>原件，一个简单的栗子说明。虽然<video>和<audio>元素都包含src属性，但此示例使用该<source>元素提供多种格式的视频文件，允许每个浏览器“选择”它支持的元素。<video controls> <source sr

2017-11-08 15:50:18 15224

原创原生JS实现H5页面侧滑删除的效果

目前很多H5框架都有类似QQ、微信消息侧滑删除的功能。如果工程并没有提供侧滑功能的时候该如何是好？。。。。得来全不费功夫，特此花费些时间编写的侧滑插件，希望能够帮助前端学习者的一些参考~~。本文根据实现此类效果展开说明以及演示。基于移动端触摸事件touchstart、ontouchmove以及touchend事件。注意此三种事件的触发只能在手机上有效，电脑调试需切换手机调试模式。使用CSS

2017-10-20 17:05:13 6405

原创基于Jquery/cropper插件的使用。头像截切/裁剪图片。

—-》闲来无事，学习了解一点新的东西还是可以消磨时间，非常敬业、提炼升仙。本栗针对移动页面上需要头像裁剪上传的功能。基于Jquery库/Cropper插件实现头像旋转、裁剪、转换canvas等功能。模仿QQ头像上传的样式，具体使用方法请参考如下实例。使用方法： 1、引入插件需要的js、css文件即可。请jquery文件放在cropper.js前面引用。<link rel="styleshe

2017-10-11 17:23:40 1379

原创 CSS渐变效果的使用，线性渐变、径向渐变。

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Ra

2017-09-14 13:07:39 978

转载原声JS判断程序运行平台Pc OR Mobile

var userAgent = navigator.userAgent.toLowerCase();if(!userAgent.match(".*(ip(hone|od)).*") && !userAgent.match(".*(android.+mobile|bada\\/|blackberry|iemobile|kindle|wap|windows (ce|phone)).*")) {

2017-09-13 14:26:08 465

原创 rem布局，移动H5页面布局规范（1）。

功能决定成度，样式决定美感度，在移动H5页面布局上规范必然时不可少。在H5页面 UI设计图的基础，如何根据设计图片写出比例相同，在不同移动设备上页面上的样式依然保持一致。响应式页面，rem布局的使用方法。 1、设置viewport<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,

2017-09-13 10:59:09 1888