- 博客(264)
- 问答 (1)
- 收藏
- 关注
原创 textarea高度随内容自动改变
需求textarea默认的高度不是对着内容变化,而是随着内容增多,出现了滚动条。目前的需求是实现一个能够输入的textarea,并且高度跟着内容变化。发现了一个比较好用的插件flexText,但是这个基于jquery写的,目前的技术栈是react,所以简单看了下,然后用原生的js模拟了一个实现。原理:html结构:div class="body"> di
2018-01-06 12:43:32 22465 2
原创 异步 promise +generator+async(未完成)
Promise简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。特点promise有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果可以决定当前是哪一种状态。一旦状态改变,就不会在变。状态的改变只有2种:
2017-12-17 17:24:09 514
原创 mobx基本使用
mobx是一个简单可扩展的状态管理库基本概念state(状态) 状态是驱动应用的数据,像有数据的excel表格2.derivations(衍生) 任何源自状态并且不会再进一步相互作用的东西。比如用户界面,待办事件的数量,把变化发送到服务端两种类型的衍生(1)computed values 是可以使用pure function从state中推导的值,m
2017-12-17 17:16:30 7049 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 509
原创 npm基本使用
npm是Node默认的模块管理器,是一个命令行下的软件,用来安装和管理Node模块。安装 npm install 模块名 -g全局安装本地安装:将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。可以通过 require()
2017-12-17 11:13:00 1326
原创 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 69968
原创 js实现滑动门效果
滑动门效果: 原理:一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示。 假设图片的宽度是120px,其他三道门露出的宽度是80px, 初始状态下, 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px。 当第二道门打开时, 第二道门左边的距离是80px,为(120-40)px 第三道和第四道门左边的距离不变。
2017-03-16 09:40:21 3350
转载 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 867
转载 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 4032
转载 根据PSD登陆页面设计稿切图制作HTML网页全过程
切图的目的是把PSD设计稿转换为HTML页面。记得自己当时学习切图时,网上切图相关的文章是不少,但是大都是讲怎么使用切片工具把一张图片分割成多张图片,然后存储为Web使用格式,并且都比较简单和零碎,并不能满足我的要求。因此只能自己不断尝试,今天分享给大家“如何根据PSD设计稿通过PS切图和DIV+CSS布实现HTML页面”,希望能帮助到大家。实例:下面通过一个简单的登陆页面PSD设计稿
2017-02-16 15:18:04 27558 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 5102
原创 ps切图
1.切图切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面。 通俗来讲,把一张设计图 利用到切片工具 把自己所需的切成一张张小图,然后用DIV+CSS完成静态页面书写,完成CSS布局。切图大家都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,把图片切出来这个过程是叫切片。切图的目的: 第一个是让网页稿有了交互性,实现你平时看到的各种各样的功能。 第二个是体积
2017-02-15 15:22:38 2120
原创 从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 3319
原创 js--继承
每个类有3部分, 第一部分是构造函数内的,供实例化对象复制用的 第二部分是构造函数外的,直接通过点语法添加,这是供类使用的,实例化对象访问不到 第三部分是类的原型中,实例化对象可以通过其原型链间接访问到,也是供所有实例化对象共用的。 1.类式继承//类式继承//声明父类function SuperClass(){ this.superValue=true;}//为父类添加共有方法
2017-01-15 21:43:43 1310
原创 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 554
原创 变量、对象、函数、类
1.函数的形式function checkName(){ //定义一个函数}var checkName=function(){//函数的另一种形式}2.用对象收编变量var CheckObject={ checkName:function(){ //验证姓名 }, checkEmail:function(){ //验证邮箱 },
2017-01-09 22:11:44 594
原创 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 592
原创 HTML5 文件API
1.FileList对象和file对象 FileList对象表示用户选择的文件列表。在HTML5中,通过multiple属性,file控件内允许一次放置多个文件。控件内的每个用户选择的文件都是一个file对象,而FileList对象则为这些file对象列表,代表用户选择的所有文件。 file对象有两个属性,name属性表示文件名,lastModifiedDate属性表示文件的最后修改日期。<in
2016-12-20 17:35:44 964
原创 HTML5 离线应用程序
HTML5中,新增了一个API,利用本地缓存机制,为离线的Web应用程序开发提供了可能。为了能够让Web应用程序在离线状态的时候也能正常工作,必须把所有构成Web应用程序的资源文件,诸如HTML文件,CSS文件,JavaScript脚本文件放在本地缓存中,当服务器没有和网络连接时,也可以利用本地缓存中的资源文件来正常运行Web应用程序。1.本地缓存和浏览器缓存的区别 本地缓存是为整个Web应用程序
2016-12-16 17:34:23 2077
原创 HTML5中Web Storage
cookie可以在客户端保存诸如用户名等简单的用户信息,主要的问题: 大小:cookie的大小被限制在4KB 带宽:cookie是随着HTTP事务一起被发送的,因此会浪费一部分带宽 复杂性:要正确的操纵cookie是困难的HTML5中的Web Storage就是在Web上存储数据的功能。Web Storage又分为两种:sessionStorage: 将数据保存在session对象中。所谓
2016-12-16 14:56:05 442
原创 VMware12下调整ubuntu窗口大小
首先下载VMware,普通的软件安装方法,一直下一步就可以了。 然后下载ubuntu的镜像,安装的时候也是简单的安装。 安装完成打开后,尴尬了 这个界面真的是太小了,用着一点都不舒服。然后开始学习如何调整界面的大小。首先打开虚拟机 (因为安装过,显示重新安装) 进入虚拟机的CD-Room 找到VMware Tools文件 3.按照网上的教程,把这个文件夹下所有的文件拷贝到Downlo
2016-12-14 12:50:11 19994 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 409
原创 Node.js 学习笔记---1
Node.js 是一个可以让 JavaScript 运行在服务器端的平台,为实时Web(Real-time Web)应用开发而诞生的平台,采用了单线程、异步式I/O、事件驱动式的程序设计模型。Node.js 的 JavaScript 引擎是 V8,来自 Google Chrome 项目。 CommonJS 是一个规范,它试图拟定一套完整的 JavaScript 规范,以弥补普通应用程序所需的 AP
2016-11-29 21:54:46 387
原创 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 396
转载 彻底弄懂CommonJS和AMD/CMD!
JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已。 现在就看看吧,这些规范到底是啥东西,干嘛的。 一、CommonJS CommonJS就是为JS的表现来制定规范,NodeJS是这种规范的实现,webpack 也是以CommonJS的形式来书写。因为
2016-11-24 21:12:16 2444 1
原创 ps 实现人像处理
1.打开一张图像,复制图层,快捷键 Ctrl+J 2. 图像的混合模式选择滤色,不透明度设置为50% 3.合并图层,快捷键Ctrl+E 4.滤镜—模糊—高斯模糊 ,模糊半径选择5 5.在历史记录,点击新建快照 6.在历史记录中找到快照,点击左边的框 7.历史记录中选择向下合并这项 8.左边的工具栏,选择“历史记录画笔工具”,画笔选择适当的大小,透明度选择在50%以下。
2016-11-24 19:04:48 3165
原创 慕课网--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 516
原创 搜集整理的前端面试题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 777
原创 搜集整理的前端面试题2
1. css的display:none和visibility:hidden区别display:none使用后,元素的宽度,高度都会丢失,视为不存在不加载; 元素原来占据的空间位置不保留; 产生回流和重绘;visibility:hidden:视觉上的不可见,但是保留占据的空间,还具有宽度和高度;2. 怎么清除浮动1.使用
2016-10-26 20:35:32 2275
原创 搜集整理的前端面试题1
1. Doctype作用?标准模式与兼容模式各有什么区别?(1)、声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。(2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。2
2016-10-26 20:34:23 2623
原创 那些找工作的日子
截止到昨天为止,觉得自己找工作的日子终于暂时的结束了,去哪儿前端的offer到手,这段煎熬的日子总算是结束了。以此来结束那些我一个人奋斗的日子。 开始知道前端的工作是去年的是十二月份初的时候,一个同学进了阿里,做的前端。从此知道了这个名词,抱着试试的态度,学习了一些前端的知识,觉得还不错,然后开始了学习。首先把最重要的部分写出来,希望可以对大家有些帮助吧。面试技巧: 我的算法基础不好,只是自己简
2016-10-23 21:26:51 1005 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 2602
转载 js闭包的用途
我们来看看闭包的用途。事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率。1 匿名自执行函数我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,比如:别的函数可能误用这些变量;造成全局对象过于庞大,影响访问速度(因为变量的取值是需
2016-10-11 09:11:31 341
转载 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 313
转载 网页栅格化
栅格系统的设计原理及应用 在网页设计中,我们把宽度为“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 4391 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 556
转载 JS基础——事件对象event
事件为什么会是对象呢?先了解一下事件处理一、事件处理 JS在事件处理函数中提供了事件对象,帮助处理鼠标和键盘事件。同时还可以修改一些事件的捕获和冒泡流的函数。事件处理分为三部分:对象.事件处理函数=函数[javascript] view plain copy print?document.onclick=fun
2016-10-08 12:59:47 3212
转载 javascript event(事件对象)详解
1. 事件对象 1. 事件对象Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.事件通常与函数结合
2016-10-08 12:58:13 610
转载 前端面试的总结
====各个浏览器中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 1110
转载 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 1120
空空如也
冈萨雷斯 JPEG2000 参数不知道设置为多少合适 下载了开源代码 也不会运行
2015-06-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人