dengchen5736-CSDN博客

转载 Vue学习笔记

相关实例demo请访问：https://github.com/CHQfast/Vue-demo一.Vue-Router配置第一步，npm install vue-router--save-dev第二步，src 目录下新建 router 目录，目录下新建 index.js，// router/index.js importVuefrom 'vue' //引...

2019-08-01 14:31:00 170

转载 ES6学习笔记（对象新增方法）

1.Object.is()ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。Object.is('foo', 'foo')// true...

2019-04-30 16:55:00 175

转载 ES6学习笔记（对象）

1.属性的简洁表示法const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。let birth ='2000/01/01';const Person={ nam...

2019-04-30 11:46:00 179

转载 ES6学习笔记（数组）

1.扩展运算符：扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5用于函数调用function add(x, y) { return x + y;}...

2019-04-29 17:38:00 144

转载 React-Native android 开发者记录

1.安装安装步骤不多废话,按照官网步骤执行即可安装完之后，react-native run-android发现报错,页面出不来Error: Unable to resolve module `./index` from `E:\react\RN_datacenter\node_modules\react-native\scripts/.`: The module `./in...

2019-04-03 14:27:00 125

转载 antd-react-mobile(踩坑记录)

1.按照官网步骤进行，$ npm install -g create-react-app # 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。$ create-react-app my-app $ cd my-app $ npm install antd-mobi...

2019-02-26 14:32:00 618

转载 ES6学习笔记（函数）

1.函数参数的默认值ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello参数变...

2019-01-22 16:30:00 93

转载 ES6学习笔记(字符串和数值)

(一)字符串的扩展1.字符串的遍历for (let codePoint of 'foo') { console.log(codePoint)}// "f"// "o"// "o"2.includes(), startsWith(), endsWith()传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 ...

2019-01-22 15:23:00 121

转载 ES6学习笔记（let,const,变量的解构赋值）

1.let：所声明的变量，只在let命令所在的代码块内有效；for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i);}// abc// abc// abc不存在变量提升，它所声明的变量一定要在声明后使用，否则报错；// var 的情况console.log(foo); // 输出un...

2019-01-22 11:57:00 186

转载我们一起踩过的坑----react（antd）（二）

1.antd Upload默认值问题需求是这样的，后台若没有图片默认值，则只有上传按钮，且只能上传一张图片；若有默认值，则显示默认头像图片，可删除，删除之后有且只能添加一张图片，没有删除默认图片时不能添加图片坑爹之路漫漫-----图为无默认值时状态图为有默认值状态，删除后可添加图片首先设置defaultFileList,但是defaultFileLis...

2018-12-28 18:14:00 629

转载我们一起踩过的坑----react（antd）（一）

1.this问题对应写法1)this.handleChange = this.handleChange.bind(this) //如果不写这个，必须要用箭头函数handleChange(e) { this.setState({temperature: e.target.value});}2)handleChange=(e)=> { this.setState({tem...

2018-12-18 11:46:00 338

转载 gulp详细入门教程

Gulp 详细教程，各种注释和步骤都有，请大家详细阅读并且实践，祝愿你们都走出刀耕火种的时代，进入自动化！简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器，她能自...

2018-10-21 13:50:00 52

转载 Gulp教程之：Gulp能做什么，前端装逼为何要用它

我们先说说平时web开发遇到的一些场景和苦恼无奈的情况：JavaScript和CSS的版本问题我们都知道 JavaScript和CSS属于静态文件，如果地址不变，浏览器会缓存这些文件，那就意味着当我们需要改JavaScript或者CSS文件的时候，即使我们后端改了，那么客户端也是看不到，这个在“JS一统天下”的时代是不可接受的，因为现在几乎所有的WEB 程序都严重依赖JavaScr...

2018-10-21 13:38:00 49

转载 JS实现数组去重方法总结(三种常用方法)

方法一：双层循环，外层循环元素，内层循环时比较值如果有相同的值则跳过，不相同则push进数组Array.prototype.distinct = function(){var arr = this,result = [], i,j,len = arr.length; for(i = 0; i < len; i++){ for(j = i + 1; j < len; j+...

2018-10-19 20:49:00 147

转载 vue.js核心最基本的功能

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})除了文本插值，我们还可以像这样来绑定元素特性：<div i...

2018-06-21 15:48:00 209

转载 AngularJS学习笔记(二)

一.AngularJS Select(选择框)1.使用 ng-options 创建选择框<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"...

2018-05-31 15:08:00 84

转载 AngularJS学习笔记(一)

一.基本指令1、ng-app=" "指令初始化一个 AngularJS 应用程序,定义angularJS的使用范围;tips:一个页面里创建多个 ng-app 手动加载即可:var app1 = angular.module("app1", []);var app2 = angular.module("app2", []);angular.bootstrap(documen...

2018-05-23 11:50:00 108

转载 animation渐进实现点点点等待效果

2018-05-18 14:37:00 121

转载纯css loading动效

.loading {margin: 100px; width: 3px; height:3px; border-radius: 100%; /* 圆角 */ box-shadow: 0 -10px 0 1px #333, /* 上, 1px 扩展 */ 1...

2018-05-16 13:59:00 112

转载文字和背景渐变动效

1.文字渐变动效 h1{color: #f35626; background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -we...

2018-04-17 15:58:00 113

转载 Page Visibility(网页可见性) API与登录同步引导页实例页面

页面1HTML代码：<p id="loginInfo"></p>JS代码：(function() { if (typeof pageVisibility.hidden !== "undefined") { var eleLoginInfo = document.querySelector("#loginInfo"); var f...

2018-04-13 15:34:00 93

转载 vw, vh视区覆盖和自适应图片

CSS .wrap{width:100vw;height:100vh;background: rgba(0,0,0,0.3);position: fixed;top:0;left:0;text-align: center;} .wrap img{vertical-align: middle;max-height: 90vh;max-width: 90vw;} .wrap:after {...

2018-04-12 10:56:00 264

转载伪类+js实现CSS3 media queries跨界准确判断

@media screen and (min-width: 45em) { body:after{ content:"宽屏" }}var content = window.getComputedStyle(document.body, ":after").getPropertyValue("content");if (content === "窄...

2018-04-04 15:11:00 88

转载 display:none和visibility:hidden

display:none和visibility:hidden的区别在哪儿？“这个问题简单？”我心里头暗自得意，按耐住自己得意又紧张的小心脏，自信满满地说，“这两个声明都可以让元素隐藏，不同之处在于display:none隐藏后的元素不占据任何空间，而visibility:hidden隐藏的元素空间依旧存在。”想在想想，自己实在是浮躁了点。这种程度的答案说明你在HTML/CSS方面的造诣只...

2018-03-14 15:23:00 109

转载两套逻辑的比较

button.click(function() {if (isLogin) { //如果已经登录 if (isBind) { //如果已经绑定 //则打开数目修改弹框 funDoNumberChange(); } else { //如果未绑定 ...

2018-02-05 15:10:00 83

转载字符上下半截的高亮显示

css: .half{display:inline-block;} .half_in{height:12px;background-color:#fff; position:absolute; overflow:hidden;} .half_top .half_in,.half_bot{color:#f30;} .half_bot .half_in{c...

2018-01-15 15:45:00 80

转载 CSS3选择器:nth-child和:nth-of-type之间的差异

:nth-child和:nth-of-type之间的差异直接看实例:<section> <div>我是一个普通的div标签</div> <p>我是第1个p标签</p> <p>我是第2个p标签</p> </section&g...

2018-01-08 10:56:00 61

转载 CSS3 Backgrounds相关介绍

CSS3 Backgrounds相关介绍1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认的位置。2.在CSS3中，我们可以给background-position属性指定高达4个值:开始的两个值代表了水平轴;后面的两个值代码垂直轴,这意味着我们可以相对于上下左右任意一个角落定位，...

2018-01-04 15:33:00 72

转载 CSS垂直翻转/水平翻转提高web页面资源重用性

/*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } ...

2018-01-04 10:25:00 74

转载 CSS clip:rect矩形剪裁功能及应用

.clip{ position:absolute; clip: rect(10px 30px 20px 10px); }最后有必要说明下：clip:rect矩形剪裁只能作用于position:absolute的元素上。可用性隐藏根据上面对top right bottom left的释义，如果left >= right或者bottom <...

2018-01-02 16:46:00 238

转载文字渐变方法

css代码h1.start-gradient { display: inline-block; background: -webkit-linear-gradient(left, #4f185d , #fe5d4b); /* 背景色渐变 */ -webkit-background-clip: text; /* 规定背景...

2018-01-02 11:14:00 84

转载纯css3棋盘图案背景以及45度斜纹背景

css代码.stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; backgr...

2018-01-02 10:44:00 292

转载 style标签下的CSS代码的显示与实时编辑

style标签也是标签首先设置body style的样式body style{ display:block; padding:0.6em 0.8em; border:1px dashed #ccc; background-color:#f5f5f5; color:#000; font-family:Monaco, mon...

2017-12-29 14:32:00 105

转载 HTML5终极备忘大全

一、文字备忘之标签HTML5中新增的标签<article>定义文章<aside>定义页面内容旁边的内容<audio>定义声音内容<canvas>定义图形<command>定义一个控制按钮<datagrid>指树或表格状数据格式中的动态数据<datalist>定义一个下拉列表<details>定...

2017-12-27 11:25:00 50

转载 CSS box-flex属性

box-flex属性（和谐版）#father { display: box; }#first_boy { box-flex: 2; }#second_boy{ box-flex: 1; }#three_boy { box-flex: 1; }CSS box-flex属性（不和谐版）#first_boy { box-flex: 2; }#second_boy {...

2017-12-14 17:00:00 60

转载 CSS3 box-shadow实现纸张的曲线投影效果

一般的投影效果，尤其通过CSS实现的投影效果（无论是CSS3，还是IE滤镜），都是直来直往的。纸张是有卷角的，其投影就是曲面的，如何使用CSS模拟出纸张的卷边曲线投影效果。<div class="curved_box"></div>.curved_box { display: inline-block; *display: inline...

2017-12-14 16:34:00 83

转载 div模拟textarea文本域轻松实现高度自适应

textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应,使用普通的div标签模拟textarea文本域，同时又利用了div标签的高度自适应性。于是，textarea文本域的高度自适应效果就可以轻松实现。.test_box { width: 400px; min-height: 120px; max-height: 300px; ...

2017-12-14 16:25:00 83

转载安卓下H5弹窗display:table的bug

表单以弹窗的形式弹出时,若设置了表单的div:display:table下,安卓打开页面输入法的时候,表单顶到屏幕顶部之后,再也无法上滑,键盘遮住了下面的输入框。在ios下,一切显示正常,因为iOS会自动将输入框居中到显示的区域,那么这种情况下怎么办呢?解决方案:将display:table改成display:block,然后再将表单居中即可转载于:https://www.cnb...

2017-12-01 14:23:00 145

转载 IOS中position:fixed弹出框中的input出现光标错位的问题

ios11发布后，测试人员反馈回来，键盘弹起时，input光标会定位不准。后来查了资料，原来是position：fixed，和input一起使用会出现的bug。应该来说，是fixed在移动端支持不怎么好。解决方案是弹出表单时,给body加一个高度var h=$(window).height();$("body,html").css({"overflow":"hidd...

2017-12-01 11:25:00 248

转载 display:table-cell的应用

一、display:table-cell属性简述display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。table-cell同样会被其他一些CSS属性破坏，例如float,position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。二、dis...

2017-11-27 10:14:00 131

空空如也

空空如也