好久不写代码了，拼拼凑凑也就能做点小东西来玩了

适用于各种秒杀、抢票、投票神马的需要等待开始时间的页面，适合收藏在浏览器书签里，随用随点开。

代码有点丑，将就用吧哈哈

javascript:var timebox=document.createElement("div");timebox.id="timebox";timebox.style="width: 300px; height: 70px; color: #8e8e8e; background-color: #313131; text-align: center; position: fixed; line-height: 70px; left: 50px; top: 50px; z-index: 9999; font-family: 'LCDMono2'; font-size: 60px;border-radius: 7px;";document.body.appendChild(timebox);function checkTime(i){if(i<10){i="0"+i}return i}function time(){clearTimeout(t);dt=new Date();var h=checkTime(dt.getHours());var m=checkTime(dt.getMinutes());var s=checkTime(dt.getSeconds());var spliter=(s%2==0)?":":" ";document.getElementById("timebox").innerHTML=h+":"+m+spliter+s;t=setTimeout(time,1000)}var t=null;t=setTimeout(time,1000);

用法，浏览器新建书签，标题随便，网址粘入上述代码即可：

此外，页面使用了等宽液晶字体，安装本地后才能出最佳效果：LCDM2U__

单位介绍

说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。 （更多…）

请在此暂时忘记之前学到的面向对象的一切知识。这里只需要考虑赛车的情况。是的，就是赛车。

最近我正在观看 24 Hours of Le Mans ，这是法国流行的一项赛事。最快的车被称为 Le Mans 原型车。这些车虽然是由“奥迪”或“标致”这些厂商制造的，可它们并不是你在街上或速公路上所见到的那类汽车。它们是专为参加高速耐力赛事而制造出来的。

厂家投入巨额资金，用于研发、设计、制造这些原型车，而工程师们总是努力尝试将这项工程做到极致。他们在合金、生物燃料、制动技术、轮胎的化合物成分和安全特性上进行了各种实验。随着时间的推移，这些实验中的某些技术经过反复改进，随之进入到车辆的主流产品线中。你所驾驶车辆的某些技术，有可能是在赛车原型上第一次亮相的。

你也可以说，这些主流车辆继承了来自赛车的技术原型。

到现在，我们就有讨论 JavaScript 中的原型和继承问题的基础了。它虽然并不像你在 C++、Java 或 C# 中了解的经典继承模式一样，但这种方式同样强大，并且有可能会更加灵活。

有关对象和类

JavaScript 中全是对象，这指的是传统意义上的对象，也就是“一个包含了状态和行为的单一实体”。例如，JavaScript 中的数组是含有数个值，并且包含 push、reverse 和 pop 方法的对象。

var myArray = [1, 2];  
myArray.push(3);  
myArray.reverse();  
myArray.pop();  
var length = myArray.length;  

现在问题是，push 这样的方法是从何而来的呢？我们前面提到的那些静态语言使用“类语法”来定义对象的结构，但是 JavaScript 是一个没有“类语法”的语言，无法用 Array“类”的语法来定义每个数组对象。而因为 JavaScript 是动态语言，我们可以在实际需要的情况下，将方法任意放置到对象上。例如下面的代码，就在二维空间中，定义了用来表示一个点的点对象，同时还定义了一个 add 方法。

var point = {  
    x : 10,
    y : 5,
    add: function(otherPoint) {
        this.x += otherPoint.x;
        this.y += otherPoint.y;
    }
};

但是上面的做法可扩展性并不好。我们需要确保每一个点对象都含有一个 add 方法，同时也希望所有点对象都共享同一个 add 方法的实现，而不是这个方法手工添加每一个点对象上。这就是原型发挥它作用的地方。 （更多…）

转自HTML5集中营

由于公司网站的字体是用的「微软雅黑」，使用Windows XP的用户看到的页面字体颜色淡淡的，辨识度不是很好，于是我百度寻找解决方案，在百度得到的答案是”因为Windows XP 默认没有开启Clear Type，所以不支持字体渲染才会造成页面字体不太适合阅读，会觉得淡淡的颜色不够深，看起来不是很友好，辨识度还比宋体差很多。如下图:
难道我们要让用户手动去开启Clear Type,我想这也太不现实了吧！为了解决这个问题，我苦恼了很久，相信这也是很多前端工程师和设计师们一直纠结而痛苦的问题，就这样放弃其实又感觉蛮可惜的，因为「微软雅黑」字型漂亮，浏览网页看比宋体的网页要舒服很多，也会漂亮很多，心情也会愉悦起来。即然前端工程师和设计师都很喜欢微软雅黑,那么我们应该如何解决呢？直到我偶然发现了点点网，浏览完整个博客感触很深，因为他们的前端做得很细腻，细节处理惩罚得很好，于是我拜读一下点点网的代码。 （更多…）

Cufón开发时没有考虑到中文应用，CSS的word-break;word-warp都已失效，中文换行那怎么办呢？

去看API文档！我在 api文档 看到这么一段：

separate   How to separate pieces of text. By default each word is considered a unit of its own, which works well with multi-line text. ‘none’ is only suitable for single lines of text.   Possible values：‘words’, ‘none’ or ‘characters

老外把words作为默认参数，在我们应该用characters，把html文件中的 Cufon.replace(‘h1′) 改为 Cufon.replace(‘h1′,{separate:’characters’}) 就行了。

转自Cufon-font 多谢海哥推荐

Referrer的重要性

HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说，是非常重要的，这可以告诉我们不同渠道带来的流量的分布情况，还有用户搜索的关键词等，都是通过分析这个referrer信息来获取的。

但是，出于各种各样的原因，有时候Javascript中读到的referrer却是空字符串。下面总结一下哪些情况下会丢失referrer。

Referrer丢失的几个场景

修改Location对象进行页面导航

Location对象是一个用于页面导航的非常实用的对象。因为他允许你只变更Url的其中一部分。例如从cn域名切换到com域名，其他部分不变：

window.location.hostname = "example.com";

但是，通过修改Location进行页面导航的方法，会导致在IE下丢失Referrer。

IE5.5+ 下返回空字符串

Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回来源网页

window.open方式打开新窗口

示例：

<a href="#" onclick="window.open('http://www.google.com')">访问Google</a>

点击此链接会在新窗口打开Google网站，我们在地址栏中输入以下js代码就可以看到发送的referrer了。

javascript:alert(document.referrer)

测试结果：

IE5.5+ 下返回空字符串

Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回来源网页

如果是同个域名下通过此方式跳转的，那么我们可以通过访问windoww.opener对象去获取丢失的referrer信息。代码如下：

<script type="text/javascript">
    var referrer = document.referrer;
    if (!referrer) {
        try {
            if (window.opener) {
                // IE下如果跨域则抛出权限异常
                // Safari和Chrome下window.opener.location没有任何属性
                referrer = window.opener.location.href;
            }
        }
        catch (e) {}
    }
</script>

跨域的话则没辙了~

鼠标拖拽打开新窗口

鼠标拖拽是现在非常流行的用户习惯，很多浏览器都内置或者可以通过插件的方式来支持鼠标拖拽式浏览。但是通过这种方式打开的页面，基本全都丢失referrer。并且，这种情况下，也无法使用window.opener的方式去获取丢失的referrer了。

已测试：

Maxthon2.5.2，Firefox的FireGesture插件，Chrome3.0+，Opera9.6，Safari3.2。

点击Flash内部链接

点击Flash上到达另外一个网站的时候，Referrer的情况就比较杂乱了。

IE下，通过客户端Javascript的document.referrer读取到的值是空的，但是如果你使用流量监控软件看一下的话，你会发现，实际上HTTP请求中的Referer报文头却是有值的，这可能是IE实现的Bug。同时，这个值指向的是Flash文件的地址，而不是来源网页的地址。

Chrome4.0下点击Flash到达新窗口之后，Referrer也是指向的Flash文件的地址，而不是源网页的地址。

Chrome3.0和Safari3.2是一样的，都是会丢失Referrer信息。

Opera则和Firefox一样，Referrer的值都是来源网页的地址。

HTTPS跳转到HTTP

从HTTPS的网站跳转到HTTP的网站时，浏览器是不会发送referrer的。这个各大浏览器的行为是一样的。

例如，我们在HTTPS下使用Google Reader或是Gmail的时候，点击某个链接去到另外一个网站，那么从技术上来说，这样的访问和用户直接键入网址访问是没有什么分别的。

Referrer丢失对于广告流量监控的影响

Referrer如果丢失，Web Analytics就会丢掉很重要的一部分信息了，特别对于广告流量来说，就无法知道实际来源了。目前国内好多用了Google Adsense广告的网站，都使用了window.open的方式来打开广告链接，因此IE下会丢失Referrer，而我们知道，IE是目前市场份额最大的浏览器，因此其影响是很大的。很多流量统计工具会因此将这部分流量归入“直接流量”，和用户直接键入网址等价了。

对于这样的情况，需要让广告投放者在投放广告的时候，给着陆页面的Url加上特定的跟踪参数。

例如，某个Flash广告，点击之后到达的网址是http://www.example.com/，为了监控此流量是从哪个渠道过来的，我们可以修改此投放的着陆Url，改成http://www.example.com/?src=sina，类似这种方式，然后在着陆页面中使用Javascript代码提取此src参数，这样就可以得到广告来源信息。

在投放Google Adwords的时候，后台系统有一个“自动标记”的选项，当启用此选项的时候，Google在生成所有广告的着陆页面Url的时候，就会自动加上一个gclid的参数，这个参数能够将Google Analytics后台和Adwords广告后台的数据进行整合。这样就可以知道广告流量对应于哪个广告系列，哪个广告来源和广告关键词等信息了。和上面提到的思路其实是类似的。只不过Google自动帮你做了Url的修改了而已。

如果你发现了其他丢失Referrer的情况，或是你有其他解决方案，欢迎和我交流~

——Kevin Yang

转自（简单生活）

iPad开发的局限性

1. 在iPad上使用Safari浏览普通网站网页的时候，网页因为太大而导致需要手动放大缩小或者滑动，虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道，但时间久了我们还是会发现这样做并不方便，给用户带来的感受并不十分好。
2. 不支持Flash在没有越狱的iPad Safari中，网站的Flash都是无法显示的，但可以通过第三方软件或插件或者浏览器来解决，不过，即使不能显示Flash，你一样能够用HTML5和CSS3实现同样的效果。
3. 没有鼠标光标这意味着鼠标属性，例如鼠标悬停属性是不可能有的。

   你或许可以为这个找到一些变通的办法，但是到你的用户那里这些该如何工作将会是困难的事。

4. 滚动条不能按照预期那样起作用滚动条不能显示包含了充满过多分区的内容。框架也存在高度和宽度的问题。另外，滚动过程中需要两个手指的手势。（我们将在下文中进行充分的讨论）
5. 不支持CSS固定布局HTML 元素 position:fixed CSS属性不能正确显示，常常会使得页面停留在第一屏，无法向下翻页、放大缩小。 （更多…）

有一个为 iPad 设计的用来查时区的 HTML5 软件 everytimezone.com 最近引起了一些注意。它简单、到位，可以离线使用，并且速度极快。由于 HTML5 软件本质上只是一个网页，故不需要通过苹果的 App Store 商店发行，用户只要用 iPad 访问 everytimezone.com， 然后将书签存到桌面，下一次打开就变成了一个与原生软件几乎无异的东西。everytimezone.com 的作者托马斯·富赫是资深 JavaScript 专家，也是 JavaScript 框架 Prototype 的核心开发者之一。他近日在 博客上撰文传授了如何保证 HTML5 软件在 iPad 上飞速运行的七条秘诀，特翻译如下。—— 编者

一、少用图片

一开始，为了做出用来表示各个城市的每一天的那种渐变效果，我们用了一套相当复杂的 -webkit-gradient，结果发现这会令转译速度变得非常非常慢。-webkit-gradient 的工作方法是构建位图，对于浏览器的转译引擎来说，这和从外部加载图片（例如一张 PNG）是完全一样的。MobileSafari 显示图片速度之慢是出了名的（希望 4.0 对此有所改进），要解决这个问题，基本上只能不用图片和 -webkit-gradient。

我们最终把那些色彩条快用背景上的一个很大的 canvas 元素替代了。当你拖动游标线时，那些条快的颜色会发生变化，只有正在变化的部分才会被重新绘制。用 canvas 时可以在某种程度上复用 -webkit-gradient，比如这样：

// WebKit CSS gradient
-webkit-gradient(linear, left top, right top,
from(#4b4c4d),
color-stop(0.249, #4b4c4d),
color-stop(0.25, #575b5c),
color-stop(0.329, #575b5c),
color-stop(0.33, #6b7071),
color-stop(0.749, #6b7071),
color-stop(0.75, #575b5c),
color-stop(0.909, #575b5c),
color-stop(0.91, #4b4c4d),
to(#4b4c4d)
);

// canvas gradient
var gradient = $(‘canvas’).getContext(“2d”).createLinearGradient(0,0,230,0);
gradient.addColorStop(0,’#4b4c4d’);
gradient.addColorStop(0.249,’#4b4c4d’);
gradient.addColorStop(0.25,’#575b5c’);
gradient.addColorStop(0.329,’#575b5c’);
gradient.addColorStop(0.33,’#6b7071′);
gradient.addColorStop(0.749,’#6b7071′);
gradient.addColorStop(0.75,’#575b5c’);
gradient.addColorStop(0.909,’#575b5c’);
gradient.addColorStop(0.91,’#4b4c4d’);
gradient.addColorStop(1,’#4b4c4d’);

二、不要用 text-shadow 和 box-shadow

这是速度变慢的另外一个重要因素。最好不要用这些 CSS 属性。

三、硬件加速是很新的功能……而且也很多虫

在 Safari 上，只要使用 -webkit-transform 这个 CSS 属性就可以启用硬件加速了。（opacity 也行，不过缺点上面说过了。）

硬件加速有其局限，例如同时在跑的动画数量就有限制，如果超过了这个限制，动画就会闪烁，有时还会出错。不过如果轻度使用的话，效果会非常棒。

四、尽可能地使用触控事件

触控事件是个好选择，因为传统的 onClick 事件在 iPad 上用来会有点延迟。在 everytimezone.com 的源代码里有些小窍门，教你如何在使用触控事件的同时，也能够支持非触控设备上的浏览器：

var supportsTouch = ‘createTouch’ in document;

element[supportsTouch ? ‘ontouchmove’ : ‘onmousemove’] = function(event){
var pageX = event.pageX;
if (event.touches) pageX = event.touches[0].pageX;
// …
}

五、不要用 opacity

因为某些原因，使用 opacity 这个 CSS 属性有时会干扰硬件加速。如果你感到速度变慢，但又看不出哪里出了问题的话，就检查一下有没有用到 opacity 吧。

六、万事无捷径，请手写 JavaScript 和 CSS

不要依赖框架或是网页标准狂热分子推荐给你的东西。我们这个例子里只有一个高度精简的 HTML 页面，CSS 都写在页面里，没用任何 JavaScript 框架，并尽量利用了目标平台（iPad）的特性，最终的结果就是一个几乎能够瞬间加载的苗条网页，而且缓存做得很好，离线使用也毫不失礼。没错，我们也可 以选择用 JavaScript 和 CSS 框架，但有的时候少即多。（记住，各类框架所提供的那些对跨浏览器的支持你并非全都需要。）

// mini-pico-tiny convenience micro-framework, ymmv
function $(id){ return document.getElementById(id); }
function html(id, html){ $(id).innerHTML = html; }
function css(id, style){ $(id).style.cssText += ‘;’+style; }
function anim(id, transform, opacity, dur){
css(id, ‘-webkit-transition:-webkit-transform’+
‘,opacity ‘+(dur||0.5)+’s,’+(dur||0.5)+’s;-webkit-transform:’+
transform+’;opacity:’+(1||opacity));
}

七、别用 translate，用 translate3d

使用 -webkit-transform 时，记得用 translate3d(x,y,z) 语法，而不是 translate(x,y)。因为某种原因，后者无法支持硬件加速，至少在 iOS 3.x 上不行（不过在桌面版 Safari 里似乎没问题）。谢谢马提奥·斯宾内利指出这点。（也推荐大家看看他做的 iScroll，里面有很多很棒的代码，也是演示如何为页面在移动版 WebKit 上的速度进行优化的好例子。）

作者：托马斯·富赫 来源：http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/