冯小东-CSDN博客

原创 webpack的source-map的详解

source-map：一种提供源代码到构建后代码的映射的技术（如果构建后代码出错了，通过映射可以追踪源代码错误）参数：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map代码：devtool: 'eval-source-map'可选方案：[生成source-map的位置|给出的错误代码信息] source-map：外部，错误代码准确信息和源代码的错误位置 inline-source-map：内联

2021-02-18 10:47:33 1395

转载 node中，npm、nvm、nrm、npx、cnpm区别和用法

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。npm：介绍：npm 的全称是 Node Package Manager 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。常用命令：npm install 安装模块npm uninstall 卸载模块npm update 更新模块npm outdated 检查模块是否已经过时npm ls

2020-12-14 16:45:47 538

原创最新版react脚手架 creact-react-app 使用less，配置less-loader教程

在使用creact-react-app脚手架时，会有到less去自定义样式，因为脚手架中的打包工具webpack更新原因，使用【eject】暴露出webpack文件后，只保留了两个文件：webpack.config.js和webpackDevServer.config以前只需要分别修改本地和线上的webpack文件，现在只需要修改webpack.config.js即可利用npm 或者yarn 安装less和less-loader.js 注意，这里是安装两个插件安装完成后在webpac..

2020-10-15 14:58:08 718 1

原创解决Hbuilder编辑器使用git插件导入项目提示没有公钥的方法

Hbuilder编辑器可以导入git项目，需要安装好git以及TortoiseGit工具，但是在clone项目的时候会发现，HbuilderX会提示没有key如图所示：解决办法：在桌面右键，找到TortoiseGit---设置----网络：需要设置git--usr--bin--ssh.exe，即可解决该问题。...

2020-06-24 10:46:52 1314

原创本地测试websocket连接通信案例

本文不对websocket作详细介绍，需要具体了解的童鞋请自己查资料。直接上图：代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=ed...

2019-07-23 12:10:24 7422 2

原创用js超简单判断图片地址是否存在（404问题）

//判断图片是否存在function CheckImgExists(imgurl) { var ImgObj = new Image(); //判断图片是否存在 ImgObj.src = imgurl; //存在图片 if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && Img...

2019-04-16 22:19:47 17123 10

原创 js打印的另一种实现方式（可以打印图片，二维码等）

//idstr--打印内容的idfunction printView(idstr){ var el = document.getElementById(idstr); var iframe = document.createElement('IFRAME'); var doc = null; iframe.setA...

2019-03-27 18:21:49 6577

原创使用JS正则表达式转换时间搓，变成'yyyy-MM-dd hh:mm:ss'格式

废话不多说，直接上代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>

2019-02-13 00:59:15 1974

原创 input输入框消除自动填充的黄色背景

在CSS样式里添加如下代码：input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 99999s; -webkit-transition: color ...

2018-12-20 10:39:09 1044

原创 javascript 实现像素px与毫米mm的转换

function unitConversion() { /** * 获取DPI * @returns {Array} */ this.conversion_getDPI =function () { var arrDPI = new Array; if (window.screen.deviceXDPI) { ...

2018-12-11 09:50:42 14660 5

原创 js获取url链接参数

一个简单的函数：function GetUrlParam(paraName) {　　　　var url = window.location.href;　　　　var arrObj = url.split("?");　　　　if (arrObj.length > 1) {　　　　　　var arrPara = arrObj[1].split("&");　　　　　　var...

2018-08-16 18:11:23 751

原创使用Echarts-X.js实现3D地球完美解决“myChart is not function”或者“define is not function”错误

很久没更博了，最近在项目上需要展示数据可视化.所以用到了Echarts组件，进而研究了Echarts-X，具体介绍请看官网：http://echarts.baidu.com/echarts2/x/doc/index.html 根据官网的介绍，如果直接下载DEMO运行会一直报类似“define is not function”或者“myChart is not function”等错误，原因就是因为...

2018-07-06 15:50:02 10500 4

转载 CSS弹性布局

CSS3弹性伸缩布局简介2009年，W3C提出了一种崭新的方案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局，...

2018-05-29 17:08:32 4622 1

转载前端使用clipboard.js插件实现复制页面内容

纯js实现复制到剪贴板功能在网页上复制文本到剪切板，一般是使用JS+Flash结合的方法，网上有很多相关文章介绍。随着 HTML5 技术的发展，Flash 已经在很多场合不适用了，甚至被屏蔽。本文介绍的一款JS插件，实现了纯JS方法复制文本到剪切板。插件名是Clipboard.js，该插件不依赖 Flash，而是依赖于最新HTML5推出 Selection API 和 execCommand AP...

2018-04-09 17:21:11 2186

转载 JQuery UI - resizable

·概述 resizable插件可以让选中的元素具有改变尺寸的功能。官方示例地址：http://jqueryui.com/demos/resizable/ 所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象 ui.helper - 表示当前被改变尺寸的元素的JQuery对象 ui.originalPosition - 表示未改变尺寸之前元...

2018-03-15 14:46:44 1344

转载 offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

el.offsetHeight = height + padding + border（滚动条是在边框内的，自然也包括在内）el.clientHeight = 可视化看到的高度 (就是content的高度)el.scrollHeight = 整个元素的高度（包括了clientHeight看不到的那部分，一般就是你css设置的元素高度）el.offsetTop = 子元素的外边框到父元素的内边框...

2018-03-15 09:58:00 518

原创基于jQuery.i18n.properties插件实现前端页面国际化

一、简介在介绍 jQuery.i18n.properties 之前，我们先来看一下什么是国际化。国际化英文单词为：Internationalization，又称 i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。在计算机领域，国际化是指设计能够适应各种区域和语言环境的软件的过程。jQuery.i18n.propert

2017-12-01 10:59:27 9944 8

转载后台管理UI的选择

目录一、EasyUI二、DWZ JUI三、HUI四、BUI五、Ace Admin六、Metronic七、H+ UI八、其它UI九、总结最近要做一个企业的OA系统，以前一直使用EasyUI，一切都好，但感觉有点土了，想换成现在流行的Bootstrap为基础的后台UI风格，想满足的条件应该达到如下几个：1、美观、大方、简洁2、兼容IE8、不考虑兼容IE6/IE7，因为现在还有很

2017-10-09 13:07:41 3089 1

原创 javascript时间戳和日期字符串相互转换

// 获取当前时间戳(以s为单位)var timestamp = Date.parse(new Date());timestamp = timestamp / 1000;//当前时间戳为：1403149534console.log("当前时间戳为：" + timestamp);// 获取某个时间格式的时间戳var stringTime = "2014-07-10 10:21:12";

2017-09-30 08:52:57 577

原创关于前端页面在IE浏览器下无法显示的问题

由于框架的发展和技术的革新，很多语言必须兼容浏览器才能很好的显示出新的特性和样式，那么我们的前端页面如果在IE浏览器下无法显示时该用什么办法提示用户(提示用户升级浏览器)???最实用的办法就是加上判断浏览器是不是IE浏览器的语法： <!––[if IE]>然后如果是IE浏览器就会进入该语法内执行相关语句，IE浏览器存在很多个版本，IE5，IE6，IE7，IE8.

2017-08-02 17:59:09 5946

原创集装箱编号校验码规则及java/JavaScript的实现

由于工作原因，最近项目中接触到关于集装箱编号校验的问题，搜索网上资料，借鉴以下两个网址总结一下。java实现：http://blog.csdn.net/benkwok/article/details/54971387javaScript实现：http://blog.csdn.net/ttgzs/article/details/1566011集装箱校验码校验规则：集装

2017-07-31 22:59:23 4656

原创关于CSS媒体查询--电脑尺寸大全

2017-07-17 15:11:34 8779

转载关于favicon.ico的两三事

随便打开一个网页：比如 http://www.baidu.com/可以看到在浏览器的标签头上面显示了一个图标，这个图标是：，也就是我们常说的favicon.ico. 由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理，所以还是新建web项目如下： home.html 代码如下：DOCTYPE

2017-07-13 11:25:24 1345

转载 git for Mac安装(包含客户端软件Github Desktop的安装配置)

引言我写代码很规范, 而且注意存储, 可是一直都是存储在U盘里, 越来越大. 自从了解到Git之后, 就很想使用它来协助自己写项目, 最近完成了一个项目的编写, 所以静下来好好整整git, 争取使用它来协助完成下个项目. 特地将学习过程记录下来, 也和大家做个分享.git的下载和安装官方下载地址: https://git-scm.com/downloads/

2017-06-28 23:50:40 9815

转载 JQuery对象和DOM对象的区别

初学jQuery，会对jquery对象和DOM对象心存很大的疑惑，因此有必要明白他们之间的区别和联系。DOM对象是我们用传统的方法（JavaScript）获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；

2017-06-22 10:55:16 273

转载 Javascript、Jquery获取浏览器和屏幕各种高度宽度

Javascript: IE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见

2017-06-14 14:47:59 720

原创 Jquery图片轮播插件--jcarousellite的使用

一、关于jcarousellite插件：jcarousellite.js 是一款基于Jquery的无缝“垂直滚动”图片插件，可以水平轮播，也可以纵向轮播二、如何使用:HTML代码：

2017-06-12 14:52:54 1472

转载 Postman使用

在我们平时开发中，特别是需要与接口打交道时，无论是写接口还是用接口，拿到接口后肯定都得提前测试一下，这样的话就非常需要有一个比较给力的Http请求模拟工具，现在流行的这种工具也挺多的，像火狐浏览器插件-RESTClient，Chrome浏览器插件-Postman等等。这里主要介绍一下Postman。一、Postman说明　　Postman是一种网页调试与发送网页http请求的ch

2017-06-06 11:39:29 2814 4

原创关于JS的--window.onload()方法

一、window.onload()方法：该方法用于在网页加载完毕后立刻执行的操作，即当html加载完毕后，立刻执行某个方法等。二、为什么使用window.onload()?因为JS中的函数方法等需要在HTML文档渲染完成才可以使用，如果没有渲染完成，此时的DOM树是不完整的，这样JS文件就可能报出"undefined"错误。三、常见的用法：简单的立刻执行函数，假

2017-05-23 14:17:54 17649

原创 bootstrap导航条--三级菜单

效果如下：第一步,插入相关的js和css文件link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/>script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.

2017-05-14 16:27:17 12772

转载 jQuery UI Autocomplete插件事件API

jQuery UI Autocomplete支持事件处理，我们可以通过为事件绑定处理函数，从而监听并处理对应的事件。Autocomplete的事件均可以在初始化的时候，以配置选项的形式设置，例如：$( "#title" ).autocomplete({ change: function( event, ui ) { /* 这里是函数内的代码 */ }});你也可以通过jQ

2017-05-11 13:33:40 1049

原创一款不错的jQuery分页插件--pagination

一、前言：分页功能在项目中时常用到，一款可以快速实现分页功能的插件非常有必要，pagination--这款插件功能非常完美，几乎我所有项目中使用到分页的地方都会第一时间考虑到这个插件，但是其实有能力的同学最好还是使用原生的JS或者JQuery来开发分页功能，毕竟插件很多源码比较复杂，也并不是所有功能都做到尽善尽美，仅仅是提供一个方便而已。二、具体使用方法：（1）第一步，导入jq

2017-04-24 10:19:46 35766 10

原创 ajaxfileupload -- 一款不错的AJAX文件上传插件

网上非常多关于该插件的介绍，我这里简单介绍一下吧。（个人观点）ajaxfileupload插件主要是用ajax上传文件(图片)到服务器，通过插件创建的隐藏的表单和iframe来提交，然后获得返回值，它是一款jquery插件。语法：$.ajaxFileUpload([options])　　options参数说明：1、url　　　　　　　　　　上传处理程序地址。

2017-04-14 15:34:56 1863

转载 jQuery UI中dialog 遮盖 autocomplete的问题解决

问题：autocomplete提示框被遮挡最近在使用jQuery 插件fullCalendar做一个会议预约功能，新建预约时用到了jQuery UI的两个插件dialog和autocomplete,结果遇到了下图所示问题:autocomplete的返回item被dialog遮挡啦。由于对css不太熟悉，摸索了良久未能解决，到处搜寻未找到方案，最后请教了前端大牛，轻松搞定，不得不服，其间

2017-03-30 19:44:09 1073

原创关于前端页面打印功能

项目开发中，都有一个这样的需求：当页面设计好后需要打印出来，如网页的的打印浏览和打印功能，有些公司需要让前端开发好页面打印出来或者转为pdf格式的文档如何实现？？直接上例子 Insert title here function preview(oper){ if (oper <

2017-03-10 09:41:43 4339

原创 JavaScript--变量提升

什么是变量提升？JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一步一步地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫变量提升例1：console.log(a);var a=1;上面的代码首先使用console.log()方法，在控制台显示变量a的值，因为a还没有声明和复赋值，但是并不会报错，因为变量

2017-02-16 15:33:58 282

原创 HTML5--表单新特性使用自定义错误提示消息validity属性

一、HTML5表单新特性这里由于不是本文的主要内容，所以就不详细介绍HTML5表单新特性，需要了解和学习的介意查看本人的另外一篇文章，里面有很详细的介绍关于HTML5的表单的新特性。网址： http://blog.csdn.net/baidu_25343343/article/details/53140454二、自定义错误是什么？首先，HTML5的表单中有很

2017-02-12 00:29:34 20905 1

原创浅谈JavaScript--Array数组sort()排序方法与自定义比较器的使用

数组的排序的重要性不必多说，到处可见，现在来说说sort()方法的使用与自定义比较器sort()方法：默认将数组中的所有元素转为字符串后再排列(默认是升序)，用来排列字符串类型的元素比如一个数组：var array=[3,5,7,6,1,4,2];array.sort();console.log(String(array)); //1,2,3,4,5,6,7

2017-02-11 14:22:44 10952

原创 JavaScript交换两个变量值的四种方法

交换变量值指的是两个变量之间的值相互交换，具体的方法可总结出四种一、使用第三个变量(最简单，但不推荐)var a=3;var b=5;var t=a;b=a;b=t;console.log(a); //5console.log(b); //3二、使用位运算异或(只能进行数字的交换)公式： a^=b b^=a a^=b

2017-02-11 12:33:45 7697 1

原创浅谈Javascript--Array数组的splice()方法之删除、插入、替换

Array数组的splice()方法，也是一个非常强大的方法，它的作用是:删除、插入、替换需要注意的是： splice()方法是直接修改原数组的一、删除的用法语法: array.splice(starti,n);starti 指的是从哪个位置开始(不包含starti)n指的是需要删除的个数 var array=[1,2,3,4,5]; arr

2017-02-08 00:30:09 61732