自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(57)
  • 问答 (1)
  • 收藏
  • 关注

原创 React内存泄漏问题结局方案

Warning: Can't perform a React state update on unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the ...

2020-03-06 17:28:28 606

转载 微信小程序使用百度地图api

原理当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。本文使用百度小程序接口进行实现。步骤1. 创建地图容器微信小程序创建地图容器相对来说比较简单,只需要一个map组件即可,下面代码将完成地图容器的创建:- wxml代码 <!-- index.wxml...

2019-07-12 10:18:17 11145 1

原创 禁止手机物理返回事件

if( window.location.hash==""){ history.pushState( null,null,location.href)}window.onpopstate = function(event) { history.pushState( null,null,location.href)};

2019-04-23 10:53:58 465

转载 js两个时间相差天数

//两个时间相差天数 兼容firefox chrome function datedifference(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式 var dateSpan, tempDate, iDays; sDate1 = Date.pa...

2019-03-28 11:12:47 1970

原创 webpack报错Tapable.plugin is deprecated. Use new API on `.hooks` instead

  webpack问题一:原因:extract-text-webpack-plugin目前版本不支持webpack4解决方式一:npm install --save-dev extract-text-webpack-plugin@next解决方式二:使用webpack4支持的 mini-css-extract-plugin ...

2018-11-20 15:53:47 4361 1

转载 webpack4 css添加浏览器前缀 postcss-loader

 自动添加浏览器前缀 ,我们这里使用postcss-loader首先  cnpm install --save-dev postcss-loader autoprefixer 我这里用的cnpm ,npm也可以下载接下来是配置在网上查了相关文档发现需要新建一个 postcss.config.js 文件来对 postcss-loader 配置。  第一种配置: 新建与...

2018-11-20 11:23:32 1024 1

原创 webpack 项目记录

XXX项目记录 Webpack管理项目 新建一个文件夹,用来创建项目,cmd 进入该文件夹。(需node.Js). 执行npm init 命令,接下来就是一系列项目资料,直接回车就可以跳过了。完成时候会在该文件夹下生成 package.json文件。 安装 webpack 首先要全局安装 webapck,  执行npm install webpack -g。然后再在...

2018-11-05 17:09:08 109

转载 前端命名规范

最佳原则坚持制定好的代码规范。无论团队人数多少,代码应该同出一门。1.项目命名全部采用小写方式, 以下划线分隔。例:my_project_name2.目录命名参照项目命名规则;有复数结构时,要采用复数命名法。例:scripts, styles, images, data_models3.JS文件命名参照项目命名规则。例:account_model.js4.CSS,...

2018-10-29 13:29:08 1526

转载 移动端项目中 @2x 图 和 @3x 图 的使用

移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询),判断设备的dpr。 1 2 3 4 5 6 @mixin bg-image($url) {     background-image: url($ur...

2018-10-17 10:13:07 555

转载 css实现瀑布流布局

现在距离2012年已经过去了五个年头,CSS的技术更新也是日新月异,在这几年当中出现了很多新的布局方法,比如多列布局multi-columns、Flexbox布局以及今年浏览器支持有Grid布局。早前在《CSS布局的未来》一文中有对这些布局做过阐述。既然CSS的布局有这么多的变化,那么今天有没有不借助任何JavaScript(纯CSS方案)能否实现瀑布流布局?答案是肯定的,接下来的内容,我们就使用...

2018-09-05 15:12:31 453

转载 vue 使用 px2rem-loader 自动将px转换rem

cnpm intall px2rem-loader // 安装px2rem-loader  在 build\utils.js 修改成下面的代码。 // 在 cssLoaders 方法内添加下列代码 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 64 //设计稿宽度/10 ...

2018-07-11 13:33:32 2697

转载 防止页面加载图片抖动css

padding-bottom:27.1%  这个是图片的高宽比列 如img的宽高分别为200,100, 那么padding-bottom=100/200=50%

2018-06-05 11:27:59 2416

转载 sublime text 3 px转rem

1.在官网下载sublime text 3下载地址:http://www.sublimetext.com/32.安装到pc3.下载cssrem 下载地址:https://github.com/hyb628/cssrem4.安装完成打开sublime text 3使用快捷键Ctrl + Shift + p 点击红色区域进入相对应的文件夹 5.找到 Packages 把解压后的 cssrem 或者 c...

2018-05-29 17:22:28 329

转载 前端页面的适配使用rem换算

https://www.cnblogs.com/liangxuru/p/6970629.html 为什么要使用rem之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊。Px是相对固定单位,字号大小直接被定死,所...

2018-05-16 21:38:44 407

转载 手机端页面自适应解决方案—rem布局进阶版

https://www.jianshu.com/p/985d26b40199 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置)&lt;script&gt;!function(e){function t(a){if(i[a])return i[a]....

2018-05-16 21:37:39 323

转载 让Sublime Text成为静态WEB服务器:SublimeServer  如果你使用Sublime Text作为你的编辑器,那么在进行HTML和Java开发的时候有一个很有用的功能,帮你完成前端的

让Sublime Text成为静态WEB服务器:SublimeServer在使用移动端调试时,需用ip访问,必须在同一局域网内访问,若以上条件都满足,还是访问不了,可能是你的电脑设置了防火墙。 如果你使用Sublime Text作为你的编辑器,那么在进行HTML和Java开发的时候有一个很有用的功能,帮你完成前端的联调测试,那就是Sublime Text的服务器插件:SublimeSe...

2018-04-10 15:46:48 585

转载 JS基础篇--sort()方法的用法,参数以及排序原理

sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。语法:arrayObject.sort(sortby);参数sortby可选。规定排序顺序。必须是函数。注:如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。如果想按...

2018-03-26 17:09:13 411

转载 让a标签href链接失效

通过jquery的removeAttr实现的方法:"www.***.com” id=“demo”>百度"js方法:$("#demo").removeAttr("href");如此即可是a标签失效。

2017-11-16 14:48:20 3031

原创 css引入特殊字体

1.首先获取你所要使用的字体包;2.使用@font-face命名(poitfont)并导入字体(url);3.最后效果,实现下图的点字

2017-10-12 09:46:21 608

原创 网页内部滚动条

1.网页内部滚动条,直接在包裹滚动内容的div上加 height,overflow-y:auto/overflow-y:scroll;超过高度滚动2.内部滚动条:鼠标悬停是显示,移开是隐藏;div上overfllow:hidden; $(function(){ $('#userboliag').hover(function(){ $('.userboliag').css

2017-09-07 14:23:54 1050

原创 限制显示的字数,并用省略号代替省略掉的子

第一种:只要求显示一行的情况,   直接用css解决:  overflow: hidden;white-space: nowrap;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;

2017-08-01 15:20:25 859 1

转载 掌握Chrome开发工具:新一代前端开发技术

掌握Chrome开发工具:新一代前端开发技术一只叫做兰胖的食人魔魔法师 · 半天前翻译 · 1716阅读 原文链接你可能已经熟悉了Chrome开发工具的基本功能。: DOM检查器、样式面板和JavaScript控制台。 但也有一些不太为人所知的特性可以显著提高你调试或开发应用的速度。黑色主题Chrome开发工具的内置了黑色主题。你可以通过点击

2017-08-01 09:51:21 442

原创 vue.js报错 [Vue warn]: Cannot find element: #app

在做vue.js案列练习时,会出现 [Vue warn]: Cannot find element: #app的错误;原因是:我把相关的js文件放在head里面,导致文件未加载完成就运行js文件,所以js找不到 #app 。改正: 把相关js文件放至尾部,保证页面全部渲染完成才加载js,就可以避免这个错误。

2017-07-31 14:07:48 13803

转载 Sublime Text 3 配置浏览器预览路径 localhost

在 Sublime Text 3 中,安装 SideBarEnhancements 侧边栏增强插件。SideBarEnhancements 插件安装完成后,首先为 SideBarEnhancements 指定默认浏览器。打开 " Preference --> Package Settings --> Side Bar --> Settings User-User"

2017-06-27 15:10:30 2217

转载 前端可视化编程:liveReload安装,sublime 3

需要插件 sublime text3:View in Browser;LiveReloadchrome:liveReload配置方法一:sublime text3sublime 3下载地址:http://download.csdn.net/download/reggergdsg/95419661、在sublime text3安装插件 view i

2017-06-27 14:30:22 1142

原创 json文件获取不到数据报404错误的可能原因

json文件获取不到数据报下面404错误:查找原因是由于mime类型没有配置json,而无法解析:纠正错误:1.打开本地服务器,并找到 MIME 类型点击;2.再点击右上角的  添加3.然后出现一个弹窗,并按照下面填写,点击确定;4.然后就完成了,可以在MIME类型中找到 .json

2017-06-21 11:26:26 7248

转载 forEach方法遍历数组

1.  js 数组循环遍历。数组循环变量,最先想到的就是 for(var i=0;i除此之外,也可以使用较简便的forEach 方式2.  forEach 函数。Firefox 和Chrome 的Array 类型都有forEach的函数。使用如下:[html] view plain copy  

2017-06-20 10:37:06 9097

转载 欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-06-19 10:54:17 215

转载 jquery $.trim()方法

$.trim(str) 返回:string; 说明:去掉字符串首尾空格。 示例: 先看个错误代码错误代码: 复制代码 代码如下: var content = $('#content').val(); if(content.trim() == '') alert('空'); 上面的写法在firefox下不会报错,但在ie下确会报

2017-06-19 10:45:23 312

转载 vue,js修饰符

v-on:click.stop="doThis"> v-on:submit.prevent="onSubmit"> v-on:click.stop.prevent="doThat"> v-on:submit.prevent> v-on:click.capture="doThis">... v-on:click.self="doThat">... v-on:click.on

2017-06-12 14:20:15 1649

转载 VueJs2.0建议学习路线

VueJs2.0建议学习路线 Vue基础对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令和语法。vue的生命周期很重要,了解这点以后可以免去很多问题。学完这些可以做一些练手的小项目,比如万年不变的todolist。。。现在可

2017-06-12 13:56:19 834

原创 调节屏幕亮度

使用的电脑屏幕太亮,其他常用的方法又无法调节时,可以使用 f.lux 这个软件,下载安装好之后,搜索框里填写 australia (澳大利亚的时间与我国的几乎一致),然后点击search就可以出现下图后面只需要拖动黄色的圆,调节适合自己的亮度就可以了。

2017-06-07 14:52:06 432

转载 vue.js安装及之注意事项

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回车,等待安装...3.安装全局vue-c

2017-06-05 15:21:48 442

转载 h5 canvas 仿知乎动态粒子背景

本文首发于我的个人博客:http://cherryblog.site/ github项目地址:https://github.com/sunshine940326/canvas-nest首先上效果图: 实现起来也是很简单的, 按照我的步骤一步一步来就可以了~html代码首先要制作我们的页面,用到的是html5的新标签canvas;其实canvas就是我们需要用

2017-05-26 15:39:11 9113

转载 js中apply方法的使用详细解析

1、对象的继承,一般的做法是复制:Object.extendprototype.js的实现方式是:复制代码 代码如下:Object.extend = function(destination, source) {     for (property in source) {         destination[property] = source[property]

2017-04-25 15:21:27 268

转载 Flex 布局教程(二):实例篇

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看

2017-04-06 14:24:36 362

转载 Flex 布局教程(一):语法篇

网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就

2017-04-06 14:21:58 251

转载 JavaScript-确认(confirm 消息对话框)

JavaScript-确认(confirm 消息对话框)confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。语法:confirm(str);参数说明:str:在消息对话框中要显示的文本返回值: Boolean值返回值:当用户点击"确定"按钮时,返回true当

2017-04-06 09:42:10 2047

原创 点击登录后返回当前页面

当页面有需要登录之后才能查看的视屏或其他,为加强用户体验,我们需要登录之后返回当前页面;这可以用 base64 编码 之后,加在登录页面的url后面 1.搜索进入 base64 编码 ;2.找到要返回的页面url,点击编码,就可以得到base64编码3.加到链接url后面:top.location='http://www.baidu.com/sso/login?requrl=aHR

2017-03-29 10:54:35 1567

转载 JS创建和存储 cookie的一些方法

在js中cookie的操作与存储及清除cookie都与时间有关,我们只要把cookie过期时间进行有效的设置我们就可以控制它的存储了,下面我来给大家总结一下js中cookie的一些使用技巧创建和存储 cookie在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时,他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时,他们就会收到

2017-03-27 10:08:58 2923

空空如也

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

TA关注的人

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