- 博客(18)
- 收藏
- 关注
RSS订阅原创 hmtl5 拖放研究
参考文章： HTML Drag and Drop API拖放事件拖放事件有dragstart,drag,dragenter,dragleave,dragover,drop,dragend，其中除了dragover和drop是发生在target上的，其它都是发生在source上。接下来解释一下这些事件。
2016-10-11 14:54:12
409
原创 web移动端事件总结
参考文章： 在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意 移动端兼容问题研究 javascript事件机制详解（涉及移动兼容） 读fastclick源码有感 彻底解决tap“点透”，提升移动端点击响应速度实现一个移动端TODO应用，想添加一些触摸事件，之前无论PC还是移动端，都统一用click，现在细思恐极啊~~。一时半会想不出更好的实现方案，于是找了很
2016-10-07 09:10:02
2162
原创 实现一个简陋的MVC框架
参考文章：30行代码实现Javascript中的MVCMVC过程介绍：用户对View操作以后，View捕获到这个操作，会把处理的权利交移给Controller，Controller对相应的Model进行修改，当Model变更了以后，会通过观察者模式通知View进行更新。这里的关键步骤就是实现观察者模式。
2016-10-04 01:35:11
450
原创 在图片上实现定位
设计师给了份psd文件，部分图片如下： 其实是实现返回顶部的功能。 刚开始是想将返回顶部 那一块切出来，然后进行定位，但实现的效果不佳，一个是图片变形，一个是位置不精确，最后决定不切出来，直接使用一个div覆盖在返回顶部 那个图标上面，然后给div添加点击事件。主要代码如下： <div class="last"> <img class="my-img"
2016-07-08 09:30:34
4542
原创 javascript遍历数组的方法以及for…of
1、最原始的for(let i=0; i<myArray.length; i++){ console.log(myArray[i]);}2、forEachmyArray.forEach(function(value){ console.log(value);})但它无法中途跳出forEach循环，break命令或return命令都不能奏效。3、for…infor…in主要是为遍历
2016-06-26 09:49:03
7520
原创 let和const
使用let和const取代var。letlet声明的变量只在let命令所在的代码块中有效 优点： 1.不存在变量提升 2.暂时性死区：只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。 var tmp = 123;if (true) { tmp = 'abc'; // ReferenceE
2016-06-25 11:14:04
543
原创 websocket介绍
1、什么是websocketWebSocket是HTML5的一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。所谓的全双工通信即服务端和客户端能够互相发送消息。2、为什么要使用websocket浏览器和服务器通信的历史：http1.0:http1.1:使用持续连接、流水线方式在浏览器中通过http仅能实现单向的通信。当服务器端数据发生变化时，客户端如何即时得到通知呢？模
2016-06-20 17:21:43
375
原创 javascript创建对象
参考《javascript高级程序设计》第六章 面向对象的程序设计1、工厂模式function createPerson(name){ var o = new Object(); o.name = name; o.sayName = function(){}; return o;}var person = createPerson("hellen");缺点：无法知
2016-06-20 15:08:19
412
原创 函数柯里化
一、柯里化的概念百度百科：在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术以逻辑学家 Haskell Curry 命名的。举例：//接受多个参数function add(num1,num2){ return num1+num2;}//curry接受单一参数5v
2016-06-16 22:31:58
494
原创 javascript的this
*参考《你不知道的Javascript(上)》第二部分第二章——this全面解析this是在运行时进行绑定的，而不是在编写时绑定的，它的上下文取决于**函数调用时**的各种条件。执行过程中调用位置如何决定this的绑定对象：1.默认绑定全局function foo(num) { console.log( "foo: " + num ); // 记录foo被调用的次数 thi
2016-05-27 10:57:36
494
原创 javascript的变量声明和函数声明提升
*参考《你不知道的Javascript（上）》第四章——提升要理解javascript的变量声明和函数声明的提升，重要的是理解浏览器引擎对javascript代码的处理过程：包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。如：var a=2;var b=5;其处理过程是，先进行变量声明 var a; var b;再进行变量赋值 a=2; b=5;变量声明提升例子1：fun
2016-05-27 00:10:54
5538
1
原创 css border那点事
css border那点事代码<!DOCTYPE html><html><head><style> #test0 { width: 0; height: 0; border-left: 50px solid blue; border-right: 50px solid blue; border-bottom: 50px solid red; border-top: 5
2016-05-23 23:54:25
380
原创 动态向下箭头，实现整屏翻页
一、实现效果 可通过单击图标或向下滚动鼠标进行整屏滚动二、图标的实现过程 1.最开始我使用的方法是使用图片，但想要找到刚好适合的图片比较难 2.之后我使用的是bootstrap里的图标，不过效果也不尽人意<span style="color: rgb(192, 192, 192);font-size: 80px;" class="glyphicon glyphicon-chevron-do
2015-03-01 22:29:38
24594
原创 关于CSS字体的一些经历
之前对字体的样式并不在意，今天突然想改变一下，为我的标题修饰一下，换一种好看的字体。一、使用谷歌字体库(http://www.google.com/fonts) 使用方法很简单，进入网站，找自己想要的字体即可，它会自动生成代码 该方法存在两个障碍： 1、要翻墙 2、只能引进英文的字体库，中文不支持 第一个问题的解决方法是使用360网站卫士代理访问Google免费字体库我试了一下，不过加载不
2015-02-22 17:17:32
641
原创 简单的选项卡
效果图： 重点：z-index的使用 html代码：<!DOCTYPE html><html><head><meta lang="zh"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" href="base.css"><link rel
2015-02-15 01:54:44
516
原创 简单的三级联动
效果图： html代码：<!DOCTYPE html><html><head><meta lang="zh"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" href="jtest.css"><title>三级联动</title></h
2015-02-14 11:26:55
580
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人