刘小妞-CSDN博客

原创 textarea高度随内容自动改变

需求textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。发现了一个比较好用的插件flexText，但是这个基于jquery写的，目前的技术栈是react，所以简单看了下，然后用原生的js模拟了一个实现。原理：html结构：div class="body"> di

2018-01-06 12:43:32 22204 2

原创异步 promise +generator+async(未完成)

Promise简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。特点promise有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态。一旦状态改变，就不会在变。状态的改变只有2种：

2017-12-17 17:24:09 494

原创 mobx基本使用

mobx是一个简单可扩展的状态管理库基本概念state(状态) 状态是驱动应用的数据，像有数据的excel表格2.derivations（衍生）任何源自状态并且不会再进一步相互作用的东西。比如用户界面，待办事件的数量，把变化发送到服务端两种类型的衍生（1）computed values 是可以使用pure function从state中推导的值，m

2017-12-17 17:16:30 6991 1

原创 js数组方法总结

Array.from() 方法从一个类似数组或可迭代的对象中创建一个新的数组实例Array.from('foo');// ["f", "o", "o"]Array.isArray() 用于确定传递的值是否是一个 Array。Array.isArray([1, 2, 3]); // trueArray.isArray({foo: 123}); // falseArr

2017-12-17 11:30:02 500

原创 npm基本使用

npm是Node默认的模块管理器，是一个命令行下的软件，用来安装和管理Node模块。安装 npm install 模块名 -g全局安装本地安装：将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。可以通过 require()

2017-12-17 11:13:00 1306

原创 js增加class或者删除class

1.比较传统的方法var classVal = document.getElementById("id").getAttribute("class");//删除的话classVal = classVal.replace("someClassName","");document.getElementById("id").setAttribute("class",classVa

2017-12-13 19:45:58 68482

原创 js实现滑动门效果

滑动门效果：原理：一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个图所示。假设图片的宽度是120px，其他三道门露出的宽度是80px，初始状态下，第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px。当第二道门打开时，第二道门左边的距离是80px，为（120-40）px 第三道和第四道门左边的距离不变。

2017-03-16 09:40:21 3291

转载 IntelliJ IDEA 14 创建Web项目

原文地址：http://blog.csdn.net/wo541075754/article/details/46348135首先要理解一个概念：在IntelliJ IDEA中“new Project”相当于eclipse中的工作空间（Workspace），而“new Module”相当于eclipse中的工程（Project）。以下均采用Intellij的说法，请自行对照转换理解。

2017-02-16 16:32:52 848

转载 IntelliJ IDEA 16 本地LicenseServer激活（破解）

原文地址：http://blog.csdn.net/rickyit/article/details/51790069IntelliJ IDEA 16 本地LicenseServer激活（破解）IntelliJ IDEA 是Java开发利器，用社区版不爽，干催就用旗舰版，这个是收费的，需要licence。网上找到了一个帖子 http://blog.csdn.net/rickyi

2017-02-16 15:54:31 3810

转载根据PSD登陆页面设计稿切图制作HTML网页全过程

切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时，网上切图相关的文章是不少，但是大都是讲怎么使用切片工具把一张图片分割成多张图片，然后存储为Web使用格式，并且都比较简单和零碎，并不能满足我的要求。因此只能自己不断尝试，今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”，希望能帮助到大家。实例:下面通过一个简单的登陆页面PSD设计稿

2017-02-16 15:18:04 27373 5

原创 css实现三角形

css可以实现各种各样的三角形，减少了切图加载图片，以下是各种三角形的实现方法。1.首先设置一个盒子的三边为不同的颜色，看下边框是怎么显示的。<html><head><style type="text/css">#test{ width:20px; height:20px; border-width:15px; border-style:solid; b

2017-02-15 20:49:08 5065

原创 ps切图

1.切图切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。通俗来讲，把一张设计图利用到切片工具把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，把图片切出来这个过程是叫切片。切图的目的：第一个是让网页稿有了交互性，实现你平时看到的各种各样的功能。第二个是体积

2017-02-15 15:22:38 1979

原创从PSD到HTML

1.PS中常用的快捷键（1）Ctrl+Alt加上滚轮可以放大缩小PSD文件（2）可以只用矩形选框工具拖动看大小，长短。按住Ctrl+d可以取消（3）h键可以出来小手，拖动图片 2.页面一般需要三种样式：重置样式（去除默认的样式），公共样式、独立样式 3.重置样式body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,texta

2017-02-13 21:54:33 3285

原创 js--继承

每个类有3部分，第一部分是构造函数内的，供实例化对象复制用的第二部分是构造函数外的，直接通过点语法添加，这是供类使用的，实例化对象访问不到第三部分是类的原型中，实例化对象可以通过其原型链间接访问到，也是供所有实例化对象共用的。 1.类式继承//类式继承//声明父类function SuperClass(){ this.superValue=true;}//为父类添加共有方法

2017-01-15 21:43:43 1300

原创 javascript 封装

1.创建一个类在JavaScript中创建一个类，首先声明一个函数保存在一个变量里，然后这个类内部通过对this变量添加属性或方法实现对类添加属性或者方法。var Book=function(id,bookname,price){ this.id=id; this.bookname=bookname; this.price=price;}也可以通过类的原型添加属性和方法，有两种方式，一种

2017-01-10 16:33:11 546

原创变量、对象、函数、类

1.函数的形式function checkName(){ //定义一个函数}var checkName=function(){//函数的另一种形式}2.用对象收编变量var CheckObject={ checkName:function(){ //验证姓名 }， checkEmail：function(){ //验证邮箱 }，

2017-01-09 22:11:44 579

原创 javascript中多态

多态，对同一个方法的多种调用方式，在javascript中，通过对传入的参数做判断以实现多种调用方式//多态function add(){ var arg=arguments, len=arg.length; switch(len){ case 0: return 10; case 1: retur

2017-01-09 19:47:49 579

原创 HTML5 文件API

1.FileList对象和file对象 FileList对象表示用户选择的文件列表。在HTML5中，通过multiple属性，file控件内允许一次放置多个文件。控件内的每个用户选择的文件都是一个file对象，而FileList对象则为这些file对象列表，代表用户选择的所有文件。 file对象有两个属性，name属性表示文件名，lastModifiedDate属性表示文件的最后修改日期。<in

2016-12-20 17:35:44 947

原创 HTML5 离线应用程序

HTML5中，新增了一个API，利用本地缓存机制，为离线的Web应用程序开发提供了可能。为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，JavaScript脚本文件放在本地缓存中，当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行Web应用程序。1.本地缓存和浏览器缓存的区别本地缓存是为整个Web应用程序

2016-12-16 17:34:23 2055

原创 HTML5中Web Storage

cookie可以在客户端保存诸如用户名等简单的用户信息，主要的问题：大小：cookie的大小被限制在4KB 带宽：cookie是随着HTTP事务一起被发送的，因此会浪费一部分带宽复杂性：要正确的操纵cookie是困难的HTML5中的Web Storage就是在Web上存储数据的功能。Web Storage又分为两种：sessionStorage: 将数据保存在session对象中。所谓

2016-12-16 14:56:05 434

原创 VMware12下调整ubuntu窗口大小

首先下载VMware，普通的软件安装方法，一直下一步就可以了。然后下载ubuntu的镜像，安装的时候也是简单的安装。安装完成打开后，尴尬了这个界面真的是太小了，用着一点都不舒服。然后开始学习如何调整界面的大小。首先打开虚拟机（因为安装过，显示重新安装）进入虚拟机的CD-Room 找到VMware Tools文件 3.按照网上的教程，把这个文件夹下所有的文件拷贝到Downlo

2016-12-14 12:50:11 19893 1

原创 React入门基础

React 可以在浏览器运行，也可以在服务器运行。一、HTML 模板<!DOCTYPE html><html> <head> <script src="../build/react.js"> </script> //核心库 <script src="../build/react-dom.js"></script> //与DOM相关的功能 <script src="../

2016-11-30 13:23:20 395

Node.js 是一个可以让 JavaScript 运行在服务器端的平台，为实时Web（Real-time Web）应用开发而诞生的平台，采用了单线程、异步式I/O、事件驱动式的程序设计模型。Node.js 的 JavaScript 引擎是 V8，来自 Google Chrome 项目。 CommonJS 是一个规范，它试图拟定一套完整的 JavaScript 规范，以弥补普通应用程序所需的 AP

2016-11-29 21:54:46 379

原创 React Native学习笔记----1

React Native是一款用来开发真正原生，可渲染iOS和Android移动应用的JavaScript的框架。使用Javscript和XML进行开发，在后台通过“桥接”方式调用由Objective-C(iOS平台）或java（Android平台）开放的原生渲染接口。 1. 模块的导入使用require导入了React，如果使用组件，也要逐一的进行导入var React=require('

2016-11-29 21:07:27 380

转载彻底弄懂CommonJS和AMD/CMD！

JS中的模块规范（CommonJS，AMD，CMD），如果你听过js模块化这个东西，那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯，我也听过，但之前也真的是听听而已。现在就看看吧，这些规范到底是啥东西，干嘛的。一、CommonJS CommonJS就是为JS的表现来制定规范，NodeJS是这种规范的实现，webpack 也是以CommonJS的形式来书写。因为

2016-11-24 21:12:16 2426 1

原创 ps 实现人像处理

1.打开一张图像，复制图层，快捷键 Ctrl+J 2. 图像的混合模式选择滤色，不透明度设置为50% 3.合并图层，快捷键Ctrl+E 4.滤镜—模糊—高斯模糊，模糊半径选择5 5.在历史记录，点击新建快照 6.在历史记录中找到快照，点击左边的框 7.历史记录中选择向下合并这项 8.左边的工具栏，选择“历史记录画笔工具”，画笔选择适当的大小，透明度选择在50%以下。

2016-11-24 19:04:48 3119

原创慕课网--JS/jQuery中宽高的理解和应用

window是指整个浏览器窗口，可省略 document是窗口的一部分，window窗口的一部分。html文档是document对象的一部分window.location document.location 是一样的window.innerHeight和 window.outerHeight screen.width screen.availWidth是不可以改变的，但是scree

2016-11-07 16:46:42 502

原创搜集整理的前端面试题3

1. javascript实现DOM树的遍历function traversal(node){ if(node && node.nodeType ===1){ //对node的处理 console.log(node.tagName); } var i = 0, childNodes =node.childNodes,item; for(

2016-10-26 20:36:37 736

原创搜集整理的前端面试题2

1. css的display：none和visibility:hidden区别display:none使用后，元素的宽度，高度都会丢失，视为不存在不加载；元素原来占据的空间位置不保留；产生回流和重绘；visibility:hidden:视觉上的不可见，但是保留占据的空间，还具有宽度和高度；2. 怎么清除浮动1.使用

2016-10-26 20:35:32 2231

原创搜集整理的前端面试题1

1. Doctype作用？标准模式与兼容模式各有什么区别?（1）、声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。（2）、标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。2

2016-10-26 20:34:23 2574

原创那些找工作的日子

截止到昨天为止，觉得自己找工作的日子终于暂时的结束了，去哪儿前端的offer到手，这段煎熬的日子总算是结束了。以此来结束那些我一个人奋斗的日子。开始知道前端的工作是去年的是十二月份初的时候，一个同学进了阿里，做的前端。从此知道了这个名词，抱着试试的态度，学习了一些前端的知识，觉得还不错，然后开始了学习。首先把最重要的部分写出来，希望可以对大家有些帮助吧。面试技巧：我的算法基础不好，只是自己简

2016-10-23 21:26:51 976 1

转载纯javascript实现dom树的遍历

二叉 DOM 树的遍历[javascript] view plain copy function Tree() { var Node = function(key){ this.key = key; this.left = null;

2016-10-19 10:59:55 2589

转载 js闭包的用途

我们来看看闭包的用途。事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。1 匿名自执行函数我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需

2016-10-11 09:11:31 326

转载 flex布局

1.Flex是Flexible Box的缩写，意思是弹性布局。任何一个容器都可以指定为Flex布局。.box{ display:flex;}行内元素也可以使用Flex布局.box{ display:inline-flex;}Webkit内核浏览器，必须加上-webkit前缀.box{ display:-webkit-flex; display:flex;}设为Flex布局以

2016-10-09 21:29:00 292

转载网页栅格化

栅格系统的设计原理及应用在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下： W =（a×n）+（n-1）i 由于a+i=A，可得：(A×n) – i = W yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，

2016-10-08 20:20:04 4361 2

转载 JS获取当前网址信息

1，设置或获取对象指定的文件名或路径。alert(window.location.pathname)2，设置或获取整个 URL 为字符串。alert(window.location.href);3，设置或获取与 URL 关联的端口号码。alert(window.location.port)4，设置或获取 URL 的协议部分。alert(win

2016-10-08 15:59:42 538

转载 JS基础——事件对象event

事件为什么会是对象呢？先了解一下事件处理一、事件处理 JS在事件处理函数中提供了事件对象，帮助处理鼠标和键盘事件。同时还可以修改一些事件的捕获和冒泡流的函数。事件处理分为三部分：对象.事件处理函数=函数[javascript] view plain copy print?document.onclick=fun

2016-10-08 12:59:47 3141

转载 javascript event（事件对象）详解

1. 事件对象 1. 事件对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.事件通常与函数结合

2016-10-08 12:58:13 570

转载前端面试的总结

====各个浏览器中css表现的差异性(浏览器兼容问题)： (http://www.douban.com/group/topic/4629864/) (http://blog.csdn.net/chuyuqing/article/details/37561313) (http://www.iefans.net/ie-9-css-bug/) 1,各浏览器下，m

2016-10-08 12:56:03 1064

转载 js数组去重的4种方法

js数组去重，老生长谈，今天对其进行一番归纳，总结出来4种方法贴入代码前，先对浏览器Array对象进行支持indexOf和forEach的polyfillArray.prototype.indexOf = Array.prototype.indexOf || function(item) { for (var i = 0, j = this.length; i ) {

2016-10-08 12:34:42 1110

空空如也

冈萨雷斯 JPEG2000 参数不知道设置为多少合适 下载了开源代码 也不会运行

冈萨雷斯 JPEG2000 参数不知道设置为多少合适下载了开源代码也不会运行