Javascript/Ajax/Actionscript

jQuery 简但实现select二级联动

2009年06月23号 – 19:19

演示地址：http://wlog.com.cn/code/jquery/liandong/demo.html

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 二级联动</title>
<script src="http://wlog.com.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
       $(document).ready(function(){
           $("#province").change(function(){
               $("#province option").each(function(i,o){
                   if($(this).attr("selected"))
                   {
                       $(".city").hide();
                       $(".city").eq(i).show();
                   }
               });
           });
           $("#province").change();
       });
</script>
</head>
<body>
   <select id="province">
       <option>----请选择省份----
       <option>北京
       <option>上海
       <option>江苏
   </select>
   <select class="city">
   		<option>----请选择城市----
   </select>
   <select class="city">
       <option>东城</option>
       <option>西城</option>
       <option>崇文</option>
       <option>宣武</option>
       <option>朝阳</option>
   </select>
   <select class="city">
       <option>黄浦</option>
       <option>卢湾</option>
       <option>徐汇</option>
       <option>长宁</option>
       <option>静安</option>
   </select>
   <select class="city">
       <option>南京</option>
       <option>镇江</option>
       <option>苏州</option>
       <option>南通</option>
       <option>扬州</option>
   </select>
</body>
</html>

By 永远的冰点 | Posted in JQuery框架, Javascript/Ajax/Actionscript | Tagged JQuery框架, select, 联动 | Comments (8)

JavaScript程序编码规范

2009年06月13号 – 23:40

这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是Java。

软件的长期价值直接源于其编码质量。在它的整个生命周期里,一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征,那就能减少在以后对其进行修改时出错的可能性。

编程规范可以帮助程序员们增加程序的健壮性。

所有的JavaScript代码都是暴露给公众的。所以我们更应该保证其质量。保持整洁很重要。

JavaScript文件

JavaScript程序应独立保存在后缀名为.js的文件中。

JavaScript代码不应该被包含在HTML文件中,除非这是段特定只属于此部分的代码。在HTML中的JavaScript代码会明显增加文件大小,而且也不能对其进行缓存和压缩。

filename.js>应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。也没有必要使用language或者type属性。MIME类型是由服务器而非scripttag来决定的。

查看全部

By 永远的冰点 | Posted in Javascript/Ajax/Actionscript | Tagged Javascript/Ajax/Actionscript, 代码, 规范 | Comments (3)

跟随鼠标转动的眼睛JS代码

2009年06月10号 – 09:43

跟随鼠标转动的眼睛JS代码

演示地址：http://wlog.com.cn/code/javascript/eye/demo.html

下载地址：eye

By 永远的冰点 | Posted in Javascript/Ajax/Actionscript | Tagged javascrit, 代码, 转动, 鼠标 | Comments (2)

JavaScript 实现 Konami Code –彩蛋

2009年05月22号 – 20:03

在 Facebook 上有一个彩蛋：

登录 facebook.com ，点击你首页的任何地方，键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后，再点击页面或滚动一下滚动条，你会发现特殊的变化（如下图），嘿嘿 ^^

玩过“魂斗罗”的朋友，肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami Code，详细见图示：

那如何用 JavaScript 也在自己的页面上添加一个类似的彩蛋呢？

Abhi 在《Konami Code on Facebook : How to implement it on your site》一文中提供了大体思路：

var $ = {
    enabled: false,
    tmp: Array(),
    _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
    init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
    },
    konamiCode: function(e) {
        if(!this.enabled) {
            var t = this.tmp.pop();
            if((e.keyCode-t) == 0) {
                if(this.tmp.length == 0) {
                    this.enabled = true;
                }
            } else {
                this.init();
            }
        } else {
            this.action();
        }
    },
    // Change the action() function to whatever you want to
    action: function() {
        //alert("Konami Code Activated");
    }
}

然后在 load 的时候调用 $.init() 方法，在 keydown 的时候调用 $.konamiCode(event) 方法。

<body onload="$.init()" onkeydown="$.konamiCode(event)">
</body>

不过 Abhi 的方法还是冗余了点，Jan Jarfalk 在留言中提供了一个短小精悍的代码：

// Tweetable Konami code
var k=[];
function(e){
    k.push(e.keyCode);
    if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
        //alert("Konami Code Activated");
    }
}

PS：有兴趣的还可以在 Google Reader 上尝试下此“秘技”

来源：planabc.net