- 博客(22)
- 收藏
- 关注
原创 在线图片裁剪,关于使用cropperjs踩过的坑
最近在做一个项目,其中包括了一个图片在线裁剪功能,于是找到了cropperjs,cropperjs的裁剪功能丰富,满足了各种需求,预览链接:cropperjs预览裁剪图片的两种思路: 1.在前端裁剪,通过html5的HTMLCanvasElement.toBlob方法,把裁剪后的图片通过表单方式用ajax提交给后台,或者使用HTMLCanvasElement.toDataURL 把图片转换为bas
2017-06-01 15:20:11
45125
24
原创 把node应用部署到heroku
最近用node做server写了一个个人博客(node+express+mongodb),把它部署到了一个免费的平台heroku,数据库用的是MongoLab提供的,有500M免费的空间.下面使用heroku部署博客:1.到https://dashboard.heroku.com/注册一个账号2.注册成功后,在主页的右上角点击创建一个应用,选择node环境 3.应用创建成功后,就是导入博客的源码,
2016-02-29 15:05:01
1119
原创 Express中server和路由分离
express是node中很强大的web开发框架,通过使用它,可以快速的的开发一个web应用 先看一下一个express应用的目录结构 bin:存放可执行文件 node_modules:存放package.json中配置的模块 public:存放image,css,js文件 routes:存放路由文件 views:存放模板文件 app.js:启动文件,文件入口 package.jso
2016-02-24 11:20:10
2124
原创 webstorm+nodejs开发环境配置(1)
1.webstorm下载:https://www.jetbrains.com/webstorm/ node下载:https://nodejs.org/en/安装这里就不再写了.2.检测node是否已经安装好 出现node的版本,说明node已经安装成功3.下一步,在webstorm中配置nodefile>setting 在搜索框中输入node配置Node interpreter,找到nod
2016-02-17 11:24:30
2967
原创 link和@import的区别
今天看到一公司的web笔试题,其中有一题是说说link和@import的区别。 页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是: XML/HTML代码 代码代码如下:<link rel="stylesheet" rev="stylesheet"
2015-06-15 19:55:31
509
原创 CSS在IE6下的一些BUG和兼容性问题及解决办法
兼容性一直是前端的一大问题,也是让前端工程师很头痛的事情,在浏览器中,各厂商都有一套属于自己的标准和方法,从某种程度上看,是否能很好的处理兼容性问题,体现着一个前端工程师的水平,下面看一下CSS在IE6下的一些问题和解决的办法,虽然IE6基本已经被淘汰?,但仍然不能忽视,像hao123,腾讯这些网站,仍然兼容到IE6,以下是从各方面收集的解决办法,若有不当或者有更好的解决办法,欢迎交流 (^-^)。
2015-05-25 00:08:48
2204
转载 JS中的日期(Date)对象
Date 对象方法FF: Firefox, IE: Internet Explorer方法 描述 FF IE Date() 返回当日的日期和时间。 1 3 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 1 3 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 1 3 getMonth() 从 D
2015-05-12 11:21:26
479
转载 javascript中字符串常用操作总结、JS字符串操作大全
字符串的操作在js中非常频繁,也非常重要。以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊。。。今天就对字符串的一些常用操作做个整理,一者加深印象,二者方便今后温习查阅。 String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度。当然需要注意的是js中的中文每个汉字也只代表一个字符,这里可能跟
2015-05-11 19:38:48
541
转载 JS操作数组(转载)
javascript数组操作大全,数组方法总汇 shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,
2015-05-09 12:30:30
375
转载 JS字符串和数组操作方法(转载)
一、字符串的创建创建一个字符串有几种方法。最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量。var myStr = "Hello, String!";可以用双引号或单引号将字符串包含,但要注意,作为界定字符串的一对引号必须是相同的,不能混用。像var myString = “Fluffy is a pretty cat.’; 这样的声明就是非法的。允许使用两种引号,使得某些操作变得简
2015-05-09 10:06:44
1068
原创 阻止浏览器默认行为
事件默认行为:当一个事件发生的时候浏览器自己会默认做的事情 怎么阻止? 当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false; 例一:自定义右键菜单<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> d
2015-05-05 20:05:59
686
原创 有关键盘事件
onkeydown : 当键盘按键按下的时候触发 onkeyup : 当键盘按键抬起的时候触发event.keyCode : 数字类型 键盘按键的值 键值 ctrlKey,shiftKey,altKey :布尔值,当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false例一:<!DOCTYPE HTML> <html> <head> <m
2015-05-05 20:04:46
463
原创 事件绑定的第二种形式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> //给一个对象绑定一个事件处理函数的第一种形式 //obj.onclick = fn; function fn1() { alert(th
2015-05-05 12:55:13
530
原创 关于事件冒泡
事件冒泡:当一个元素接受到事件的时候,会把他接收到的事件传播给他的父级,一直到顶层的window。 下面看例子: 例一:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="hah"> </b
2015-05-05 12:53:57
453
原创 BOM的属性和方法
BOM : Browser Object Model 浏览器对象模型。 其实我们经常写的window对象就是浏览器的一个对象,下面通过一些例子了解BOM常见的属性和方法。 1.窗口的打开(open())和关闭(close()): 这两个方法有兼容性的问题,在不同的浏览器下表现不同 例一:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Conte
2015-05-05 12:52:01
908
原创 获取class函数的封装
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script> window.onload=function(){ var oUl1=document.getElementById("ul1"); var arr=[];
2015-05-05 12:49:13
591
原创 元素的创建,插入,替换和删除
1.创建元素:document.createElement(标签名称) 2.插入元素:父级.appendChild(要添加的元素) 方法 追加子元素 3.在目标元素之前插入元素:父级.insertBefore(新的元素,被插入的元素) 方法 在指定元素前面插入一个新元素 在ie下如果第二个参数的节点不存在,会报错 在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形
2015-05-05 12:47:13
622
原创 offsetLeft,offsetTop,offsetWidth,offsetHeight的使用
元素.offsetLeft[Top]:只读属性,当前元素到定位父级的距离(偏移值),也可以理解成到当前元素的offsetParent的距离。1.如果当前元素和父级都没有定位情况:‘ 例一:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
2015-05-04 20:05:33
527
原创 firstChild,lastChild,NextSibling,previousSibling的使用
firstChild,lastChild,NextSibling,previousSibling的使用
2015-04-28 20:12:16
1587
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人