自定义博客皮肤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前端攻城狮:致力于前端发展

  • 博客(148)
  • 问答 (1)
  • 收藏
  • 关注

原创 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRectgetBoundingClientRect()...

这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。var box=document.getElementById('box'); // 获取元素alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离alert(box.getBoundingClientRect().r...

2020-01-05 07:06:35 1661

原创 React中获取DOM节点的两种方法

React提供的获取DOM元素的方法有两种,一是react-dom中的findDOMNode(),二是refs。1、findDOMNodefindDOMNode通常用于React组件的引用,其语法如下:import ReactDOM from 'react-dom';ReactDOM.findDOMNode(ReactComponent);复制代码当组件被渲染到DOM中后,findDO...

2020-01-05 07:06:06 9713

原创 [转]JS如何判断一个对象是否为空、是否有某个属性

原文地址:https://www.cnblogs.com/crackedlove/p/10039105.html一、js判断一个对象是否为空 方法一:let obj1 = {}let obj2 = {a:1}function empty(obj){ for (let key in obj){ return false; //非空} return true; ...

2020-01-05 07:04:09 578

原创 React.PureComponent 和 forceUpdate 小结

forceUpdate()方法:Sub.jsclass Sub extends React.Component{ construcotr(){ super(); this.name = "yema"; } refChangeName(name){ this.name = name; this.forceU...

2020-01-03 03:28:58 402

原创 react获取滚动的高度

例1:handleScroll(e){ let clientHeight = this.refs.bodyBox.clientHeight; //可视区域高度 let scrollTop = this.refs.bodyBox.scrollTop; //滚动条滚动高度 let scrollHeight = this.refs.bodyBox.scrollHeigh...

2020-01-03 03:18:37 7098

原创 React的生命周期

1. 挂载卸载过程1.1.constructor()1.2.componentWillMount()1.3.componentDidMount()1.4.componentWillUnmount ()2. 更新过程2.1. componentWillReceiveProps (nextProps)2.2.shouldComponentUpdate(nextProps,nex...

2020-01-03 03:13:34 479

原创 js数组与字符串的相互转换方法

1、数组转字符串需要将数组元素用某个字符连接成字符串,示例代码如下:var a, b;a = new Array(0,1,2,3,4);b = a.join("-"); //"0-1-2-3-4"复制代码2、字符串转数组实现方法为将字符串按某个字符切割成若干个字符串,并以数组形式返回,示例代码如下:var s = "abc,abcd,aaa";ss = s.split("...

2019-12-04 07:55:22 357

原创 原生js判断某个元素是否有指定的class名的几种方法

如果不考虑兼容IE10以下的话,可以用HTML5中的classList API,非常方便:var node = document.getElementById('demo');if(node.classList.contains('test')){ console.log('包含 test 这个class');}复制代码兼容的方式是采用className和getAttribute(...

2019-12-04 07:53:37 1944

原创 JavaScript 可以使用以下两种方式,统计一个字符串占据的字节长度:

new TextEncoder().encode('????⛰️').byteLength // 10,或者new Blob(['????⛰️']).size // 10

2019-12-02 09:38:17 190

原创 4种js原生修改css样式的方法

html <p id = "target"> rainbow </p>复制代码1. Inline stylesdocument.getElementById('target').style.color = 'tomato'复制代码2. Global stylesvar style = document.createElement('style');styl...

2019-11-28 01:13:57 5218

转载 git clone项目失败,Host key verification failed.

在码云上创建了一个项目,配置好公钥后,克隆到我本地出现以下失败百度了好久也没有找到解决办法,困扰了好久,后来还是百度到了,原来是在提示ECDSA key fingerprint is SHA256:FQGC9Kn/eye1W8icdBgrQp+KkGYoFgbVr17bmjey0Wc.Are you sure you want to continue connecting (yes/no)...

2019-08-27 03:52:05 1507

转载 使用node-inspector调试Node.js应用

如果你在编写Node.js代码,node-inspector是必备之选,比Node.js的内置调试器好出许多。使用起来跟Chrome的javascript调试器很相似。使用npm安装:$ npm install -g node-inspector安装过程如出现“未能加载 Visual C++ 组件VCBuild.exe”类错误,参考该文章点击打开链接然后需要通过浏览器连接到node-ins...

2019-08-26 10:08:21 113

转载 js 获取dom元素的八种方法

普通的6种1.通过ID获取(getElementById)2.通过name属性(getElementsByName)3.通过标签名(getElementsByTagName)4.通过类名(getElementsByClassName)5.获取html的方法(document.documentElement)6.获取body的方法(document.body)特别的2种1.通过css...

2019-08-23 08:41:23 316

转载 创建ssh key

1、安装git工具下载地址:git-scm.com/downloads2、桌面右键鼠标,选中 “Git Bash here”3.输入cd ~/.ssh/,进入.ssh文件夹出现 “No such file or directory”,你可以手动的创建一个 .ssh文件夹即可mkdir ~/.ssh4.配置全局的name和email,这里是的你github或者bitbucket的nam...

2019-08-19 09:58:32 397

原创 fatal: HttpRequestException encountered解决方法

之前在windows下一段时间git push都没什么问题,最近一旦提交就会弹出无论是push前先将远程仓库pull到本地仓库,还是强制push都会弹出这个问题。网上查了一下发现是Github 禁用了TLS v1.0 and v1.1,必须更新Windows的git凭证管理器,才行。https://github.com/Microsoft/Git-Credential-Man...

2019-07-31 16:29:00 1713

原创 input表单禁止输入空格

input在标签内设置禁止输入空格,通过正则匹配解决问题此处涉及\s:匹配任意空白符 \S:匹配任意非空白字符&lt;input type="text" onkeyup="this.value=this.value.replace(/\s+/g,'')"&gt;...

2019-03-06 16:10:20 1142

原创 扩展js的String对象

有些时候我们需要对字符串做一些原生js不支持的复杂操作,可以考虑扩展String对象 String.prototype.delHTMLTag = function(){ return this.replace(/&lt;[^&gt;]+&gt;/g,"");//删除html标签 } var str = '&lt;strong&gt;likai&lt;/...

2019-03-06 10:51:02 459

转载 Cannot set property 'render' of undefined at normalizeComponent...

在做vue项目的时候报了这么个错误,找了半天不知道是什么错,后来发现是在vue文件写了script标签对,却没写export default {} 这句语句...ok,问题解决了。...

2019-03-04 19:28:10 667

原创 vue h5移动端禁止缩放

安卓在index.html里面写&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"&gt;ios在APP.vue里面写&lt;script&gt;window.onload = function() { doc...

2019-03-04 19:27:45 6633 1

原创 CSS自动换行、强制不换行、强制断行、超出显示省略号

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没有发现本质原因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,不会截断。先给出各种方式,再具体介绍每一个属性。强制不换行p { white-space...

2019-03-04 19:27:07 217

转载 利用JS获取用户当前ip地址

新浪的IP地址查询接口:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js(默认为纯文本格式,根据format的参数定义,还可以返回JS、Json格式)。新浪多地域测试方法:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&amp;ip=219....

2019-02-27 18:40:25 6367

原创 Web端的邮件内容HTML格式规范总结

一、页面要求1)  统一使用标准的页头和页尾2)统一使用gb2312编码格式3)页面显示宽度400px-800px,高度一般控制在一屏以内。4)页面不向出现js代码及flash内容(如需要动画全用gif)5)页面所有图片必须为绝对地址6)页面的内容最好以文字的形式来呈现。二、代码要求1)使用table而已来制作页面,且必须设置宽度,而div格式由于有些属性不被邮件客...

2018-12-06 15:48:57 5546 2

原创 vue-cli webpack打包开启Gzip时报错

前言今天看了一下Vue-cli中webpack打包的速度,有点小慢,于是我就开始使用其自带的productionGzip功能。说明:本人用的node版本:v6.11.3,npm版本:v3.10.10,webpack版本:3.6.0,Vue版本:2.5.2,以免后期版本升级更新造成误导。下面进入正文。1. 首先打开config/index.js,找到build对象中的produc...

2018-11-15 16:46:35 4119 2

原创 vue中axios处理http发送请求的示例(Post和get)

本篇文章主要介绍了vue中axios处理http请求的示例(Post和get),这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文介绍了vue中axios处理http发送请求的示例(Post和get),分享给大家,具体如下:axios中文文档  https://github.com/mzabriskie/axios#using-applicationx-w...

2018-08-28 21:18:33 11069

转载 最详细的Vuex教程

什么是Vuex?vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。引入Vuex(前提是已经用Vue脚手架工具构建好项目)1、利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。 npm install vuex -...

2018-08-28 21:17:35 1475

原创 简单说 通过CSS实现 文字渐变色 的两种方式

说明这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键。解释方式一效果图代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; span { ...

2018-07-17 15:01:20 2287

原创 JS中的数组转变成JSON格式字符串的方法

有一个JS数组,如:var arr = [["projectname1","projectnumber1"],["projectname2","projectnumber2"],["projectname3","projectnumber3"]]; 想将此数组转换成JSON字符串,如:var jsonarr = [{"projectname":pr

2018-07-17 14:59:40 19962

转载 vue的双向绑定原理及实现

前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位:代码:                                                                    效果图: 是不是看起来跟vue的...

2018-07-17 14:57:50 317

原创 JS获取本地经纬度

一个最简单的调用方法window.navigator.geolocation.getCurrentPosition(function (position) { console.log(position.coords.latitude) console.log(position.coords.longitude)})封装好的代码如下:function getPos...

2018-07-17 14:51:55 23284 1

转载 input为file上传文件

1、去除input类型为file上传文件时默认样式和默认”选择文件”等; 2、压缩要上传的图片 3、隐藏上传按钮, 手动触发实现思路隐藏选择图片的input, 点击显示图片触发input的onchange事件// xxx.html&lt;img id="pic" src="./images/xxx.png"&gt;&lt;form id="uploadForm" action...

2018-06-19 19:16:34 8656

原创 html之file标签 --- 图片上传前预览 -- FileReader

 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能。当时用html的&lt;input type="file"/&gt;标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能。  今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsData...

2018-06-19 19:14:45 7162

原创 如何去除vue项目中的 # --- History模式

使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况:    但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用?  所以就去Stack Overflow上搜索了,果然还有~  看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不:        这是最高票的回答,即在vue2中将mode模式设置为history,试过之后确...

2018-06-11 14:33:29 1664

原创 vue 图片上传功能

这次做了vue页面的图片上传功能,不带裁剪功能的!首先是html代码,在input框上添加change事件,如下:[html] view plain copy&lt;ul class="clearfix"&gt;                  &lt;li v-if="imgs.length&gt;0" v-for='(item ,index ) in imgs'&gt;           ...

2018-06-04 11:08:18 1713

原创 通过js sdk 来进行第三方登录及授权(微博,微信,qq)

微博第三方登录及授权注册申请appkey1.打开微博开发者平台http://open.weibo.com/development2.点击创建微链接3.选择类型(选择网站接入)4.填写各项信息,并把对应的meta复制并放在html的head内(一定要绑定域名并设置回调地址)&lt;meta property="wb:webmaster" content="xxxxxxx" /&gt;5.在html内...

2018-05-15 19:39:28 6783

原创 识别地域ip跳转页面的js,指定ip段自动跳转

1.&lt;script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" charset="GB2312" &gt;&lt;/script&gt;&lt;script type=text/javascript&gt; alert("你的IP是:" + remote_ip_info.province); if(re..

2018-05-15 15:13:15 8540

原创 vue监听对input输入的字体字数限制

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;&lt;title&gt;Examples&lt;/ti

2018-05-10 17:41:54 6393

原创 vue中动态获取文本换行 <br>

动态获取文本文本换行:[html] view plain copyfunction Trim(str) {  //str表示要转换的字符串  return str.replace(/\n|\r\n/g,"&lt;br/&gt;");}  这样,就大功告成了。可是如果你是在vue中使用{{ text }}动态获取的文本这样处理。你会发现&lt;br&gt;会和文本一块显示出来。改成[html] vi...

2018-05-10 11:55:27 6846 2

原创 Vue2.0 之 自带浏览器里无法打开(兼容处理) - 解决方案

Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多首先,别急,请看下面的推荐方案:1、找个android真机测试下(机型版本为4.4以上),真机联调测试(如果不知道怎么联调,那么请看这里:Android真机 - 联调chrome调试)2、如果报 报错 vuex requires a Promise polyfill in this browser.那么,就是兼容性不够好,请看下面...

2018-05-10 11:49:10 6795

原创 判断http请求还是https请求

1、php判断http请求还是https请求[php] view plain copy$http_type = ((isset($_SERVER['HTTPS']) &amp;&amp; $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &amp;&amp; $_SERVER['HTTP_X_FORWA...

2018-05-03 16:24:33 7469

原创 vuejs 2.0 fliter 搜索过滤

这是官方的例子https://cn.vuejs.org/v2/examp...这是根据你的数据在官方基础上修改的https://jsfiddle.net/ycloud/b...点击预览scriptvar vm = new Vue({ el: '#app', data: { search: '', products: [{ name: '苹果', pr...

2018-04-27 15:44:12 3073 3

空空如也

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

TA关注的人

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