zccst
- 浏览: 3295352 次
- 性别:
- 来自: 北京
-
最新评论
-
yzq21056563：
感谢作者分享~请教下，http://www.lisa33xia ...
CSS基础：text-overflow:ellipsis溢出文本 -
u012206458：
$.ajax的error,complete,success方法 -
DEMONU：
谢谢，虽然不能给你赞助，但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes：
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础：text-overflow:ellipsis溢出文本 -
zenmshuo：
用过SpreadJS，也包含数据可视化的图表
推荐几个web中常用js图表插件
文章列表
作者：zccst
Ajax请求跨域的理解(端口，域名，主机)
今天同事遇到个奇怪的问题，就是他用JQ的AJAX请求一个URL的时候，通过FIREBUG看到的返回状态时200，但是没有数据，而且那个请求时红色 的，就像返回回来的是404一样。我帮他调了很久，最后看到他浏览器的访问地址是www.xxx.com/xxx,而他AJAX请求的是 www.xxx.com:8080/xxx,端口不一致。我突然想到肯定是AJAX跨域，不过这个可是一个服务器，只是不同的端口而已。然后让他吧 8080去掉，就可以了。
经过几次测试，发现浏览器对AJAX跨域限制很严格，我有一个主机，IP为A，A上80端口， ...
作者：zccst
swiper使用过程中不断踩坑，有时一个很小的问题，如果自己实现的话会花很长时间，但其实api都有，所以多研究api，网上查一下别人使用过程中遇到的类似问题，就可以大大缩短开发时间。特此记录一下
2，是否能够检测到滑动方向？
可以。使用swiper.touches里的坐标差值来判断
Object {startX: 171, startY: 254, currentX: 198, currentY: 282, diff: 27}
判断逻辑
swiper.isBeginning && (swiper.touches.currentX - swiper.touc ...
zccst整理
阮老师的链接：http://javascript.ruanyifeng.com/bom/timer.html
一、为什么JavaScript是单线程？
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率 ...
作者：zccst
有时候需要用到，判断页面是向上还是向下滚动了，兼容比较低版本的浏览器如IE6、7等。
原理：拿当前的scrollTop和之前的scrollTop对比
如果变大了，表示向下滚动（scrollTop值变大）；
如果变小了，表示向上滚动（scrollTop值变小）。
难点是理解setTimeout=0时的运行机制。
$(document).ready(function(){
var p=0,t=0;
$(window).scroll(function(e){
p = $(this).scrollTop();
if(t<=p){/ ...
作者：zccst
最近遇到，如果用户频繁点击ajax请求，有两个问题：
1，如果连续点击了5个ajax请求，前4个其实是无效的，趁早结束节省资源。
2，更严重的问题是：最后一个发送的请求，响应未必是最后一个，有可能造成混乱。还需要一个队列来维护发送的请求和响应。
我其实已经设计好了该队列的实现方式，后来发现jQuery直接通过abort方法，这样就不需要那么复杂的实现了，毕竟还有其他事情等着完成。
用jquery发送ajax请求的确是太方便了，$.get、$.post、$.ajax等等，但我们有时候需要中途中止ajax请求。
举个例子，用comet做聊天时，发送一个请求后，服务端通常过 ...
作者：zccst
如果函数内又定义了一个跟自己同名的函数，执行结果是什么？
function scareMe(){
alert("Boo!");
function scareMe(){
alert("double boo!");
}
scareMe();
}
scareMe();
结论：把函数名当变量理解，还遵循作用域链规则。即外部调用外部的，内部调用内部的。
优点是：可以延迟定义函数（同时将只执行一次的代码放到外层同名函数中）
var scareMe = function (){
alert(" ...
作者：zccst
以前loading都是一张图片，显示或隐藏。
现在如果考虑移动端弱网到连图片也载入不成功，此时css3的loading就非常有用了，而且模拟了图片效果，节省空间。
基本原理：
1，外部一个span，固定宽高（正方形），行内块元素，相对定位，垂直对齐。
2，内部12个span，相对宽高（相对外部），行内块元素，绝对定位(top,left)，颜色，背景色，动画（最重要，作用是颜色从重变浅）
3，每一个span单独写css，目的是位置（通过rotate和translate）和延迟时间（animation-delay）。
目测，每一个span里color多余，内部12个公共spa ...
作者：zccst
最近踩得坑少了，说明自己进步少了。看来以后还得多记录。
2015-3-25
尽管我知道<a href="xx"></a>绑定点击事件的执行流程是先执行事件方法，在执行href，但还是掉进坑里了。
场景：在如下情况下，点击a，class一直没有如期加上，实际表现是一闪而过。
<a href=""></a>
a.addEventListener("click", {
if(a.className.indexOf("show) >= 0){
...
zccst转载
HTML5本地存储的前身就是Cookie，HTML5的本地存储是使用localStorage对象将WEB数据持久化在本地。相比较而言HTML5本地存储中每个域的存储大小默认是5M，比起Cookie的4K要大的多。而且存储和读取数据的代码极为简练：
Window.localStorage.setItem(key,value);//存储数据
Window.localStorage.getItem(key);//读取数据
Window.localStorage.removeItem(key);//删除数据项
Window.localStorage.clear();//删除所有数据
...
作者：zccst
历史
最早的时候有一个浏览器叫NCSA Mosaic，把自己标称为NCSA_Mosaic/2.0 (Windows 3.1)，它支持文字显示的同时还支持图片，于是Web开始好玩起来。
然后出现了一个新的网页浏览器，“Mozilla”，其实就是“Mosaic终结者”的意思，这搞的Mosaic很不爽，（毕竟Mosaic出道早，江湖老），新浏览器最后正式公布的名称是Netscape，它把自己标称为Mozilla/1.0 (Win3.1)，更好玩了。Netscape支持框架显示，后来框架在大家中间流行起来了，但Mosaic不支持框架啊，于是伟大的“用户代-理人探测”技术出现了 ...
作者：zccst
navigator.online属性检测用户是否在线
以前我写webapp时都是通过ajax的超市时间来测试用户是否在线的。
if (navigator.onLine) {
//在线
}
else {
//离线状态
}
这个html5的 navigator的新特性可以搞定.navigator.onLine属性，值为true表示设备能上网，值为false表示设备离线。
同时我们还可以监听用户在线离线的动作
var el = document.body;
if (el.addEventListener) {
windo ...
作者：zccst
对‘display’，‘position’和‘float’之间关系的定义
英文原文：http://dbaron.org/css/test/sec0907
影响框的生成和布局的三个属性——'display'，'position'和'float'——间的相互关系如下：
1，如果'display'设置为'none'，用户端必须 ...
CSS中的几种颜色表示法，如hsla
- 博客分类：
- Web前端-CSS
作者：zccst
平常相对熟悉的也就RGB色了，其他基本不清楚，即使是RGB也没弄清楚他们的变化规律。所以有必要专门用一篇文字来记录了。
RGB
HSLA
HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。
<length> ：
Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝 ...
作者：zccst
animation , keyframes
.rotate {
-webkit-transform-style: preserve-3d;/*保留被转换的子元素3d属性*/
-webkit-animation-name: refreshing;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes refr ...
zccst整理
good performance List：
more connections are not always a good idea. 减少连接数
Avoid landing page redirects. 避开重定向
HTTP Pipelining（流水线技术） is most useful in high latency environment
Eliminate(除去，剔除) render blocking resources
Reduce Client-Side Processing 减少客户端处理
Prioritize visible con ...