javascript中那些漂亮的诗句。

这些javascript语句是不是令你意想不到呢? 我们平时不常用,却是如此简洁优美,当然,在团队合作中请加上注释。

  1. 取整同时转成数值型:
'10.567890'|0
//结果: 10
'10.567890'^0
//结果: 10
-2.23456789|0
//结果: -2
~~-2.23456789
//结果: -2
  1. 日期转数值:
var d = +new Date();
//结果: 1295698416792

Read More

jQuery模拟瀑布流布局。

话说这个现在很流行,工作之余写了个简单的,原理是模拟ajax返回的json对象,再构造HTML,计算最小高度的ul列,将其写入,并在滚动条处于底部时触发。

<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
        *{margin: 0; padding: 0; }
        body{text-align: center;}
        .content{margin: 0 auto ; text-align: center; width: 960px; overflow: hidden; }
        .content ul{float: left; width: 220px; margin: 5px; padding: 5px;}
        .content ul li{ border: 1px solid #8b4513; list-style: none; overflow: hidden; margin-top: 5px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var _load = 0;
        function getMmsPicList(){
            _load =1 ;
            var list = {"list":[
                {"pic":"/wp-content/uploads/2012/05/1.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/2.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/3.jpg","txt":"瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/4.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/5.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/6.jpg","txt":"瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/7.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/8.jpg","txt":"8等哈克h发发s客户方卡斯"},
                {"pic":"/wp-content/uploads/2012/05/9.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"}
            ]};
            for(i in list.list){
                var pic = list.list[i].pic ;
                var txt = list.list[i].txt ;
                var oUl = $('.content ul') ;
                oUl.sort(function(a,b){
                    return $(a).height()-$(b).height();
                })
                var HTMLstr2 =  '<li>'+
                        '<img src="'+pic+'" alt="">'+
                        '<p>'+txt+'</p>'+
                        '</li>' ;
                $(oUl[0]).append(HTMLstr2);
            }
            _load = 0;
        }
        $(document).ready(function(){
            $(window).scroll(function(){
                var top = $(window).scrollTop() ;
                var winH = $(window).height() ;
                var docH = $(document).height();
                if(docH==(top+winH)){
                    if(_load==0){
                        getMmsPicList();
                    }
                }
            });
        });
    </script>
</head>
<body>
<div class="content">
    <ul class="list1">
        <li><img src="/wp-content/uploads/2012/05/1.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/2.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/3.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list2">
        <li><img src="/wp-content/uploads/2012/05/4.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/5.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/6.jpg" alt=""><p>瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list3">
        <li><img src="/wp-content/uploads/2012/05/7.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/8.jpg" alt=""><p>瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/9.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list4">
        <li><img src="/wp-content/uploads/2012/05/1.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/5.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/7.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
</div>
</body>
</html>

预览DEMO:/wp-content/uploads/2012/05/waterfall.html

菲律宾国防部官网被红客攻陷了?大误!!!

今天听说菲律宾官方网站被黑,于是进去看了看。
发现 http://www.pei.net.ph/http://lam IT an.gov.ph/ 确实被黑了,显示了中国国旗。
  
疑点1.
  我们进行了GOOGLE搜索和百度搜索,发现没有任何搜索引擎以前的收录记录,试想一个国家的网站,访问量应该很大,而且从这个网站运作,应该就被搜索引擎收录过,我们发现了上次快照更新时间已经是昨天了。那么,一个国家的机要网站,在发现自己被黑后一天都没人处理,难道他们国家没有技术人员了吗?

Read More

推荐一款让Chrome支持网银的扩展,让你彻底告别IE

Chrome是我钟爱的浏览器,不管是开发还是日常冲浪,但是由于国内网银都是使用IE的ActiveX控件开发的,因此,每次网购都要换回IE,自己又不喜欢360等双核浏览器。苦苦寻找了好久,也曾经尝试多许多插件(比如IE TAB),都不理想,直到这款叫ActiveX for Chrome的插件出现,是一个可以使Chrome支持IE的ActiveX控件的一款扩展,国内多家网银都用了ActiveX,因此,有了它,我们也可以在chrome中使用网银了。

Read More

WebStorm:令人眼前一亮的一款前端开发IDE

从最初的dreamweaver,到Notpad++,再到aptana,每一款IDE总让我我感觉少了点什么东西。WebStorm却让我眼前一亮,虽然公司项目所用的开发环境是eclipse+aptana(主要是方便团队协作和工程调试),但是其他时间我都会学习使用WebStorm,现在4.0版本已经出来了,让我们来看看它都有哪些强大之处吧:

Read More

你清楚jquery是如何清除ajax缓存的吗?

大家都知道万恶的IE在ajax中往往只读取第一次ajax请求时候的数据,其余时候都是从cache提取数据,(太懒了T_T)。原生的JS清除ajax缓存的方法多,但是终觉有点繁琐,如果是用jquery的同学,就设置一个参数就OK了,那就是cache: false,比如:

$.ajax({
    url: "mms-draft!getMmsDraftList",
    cache: false,
    dataType : "json",
    data:{
         //some parameters
    },
    success: function(data) {
        //do something
    }
});

另外附上原生js方法:
  1、在服务端加 header(“Cache-Control: no-cache, must-revalidate”);(如php中)
  2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”);
  3、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”);
  4、在 Ajax 的 URL 参数后加上 “?fresh=” + Math.random(); //当然这里参数 fresh 可以任意取了
  5、第五种方法和第四种类似,在 URL 参数后加上 “?timestamp=” + new Date().getTime();
  6、用POST替代GET:不推荐

onbeforeunload 在Firefox中的兼容问题

最近项目中用到了onbeforeunload,遇到了平时一些比较少见的怪异情况,比如在上一篇文章有提到过的获取返回值问题:/archives/209,然后马上又发现在firefox11中又存在着兼容问题:

$(window).bind('beforeunload',function(){
    return '您的内容尚未保存,确定要离开本页吗?';
});

我用了JQuery,原生javascript也大同小异。问题来了,在Firefox中却没有显示以上的字符,只是显示默认的提示信息:

Read More

获取页面离开onbeforeunload与onunload事件的返回值

在各种项目开发的过程中,页面离开事件onbeforeunload是我们经常要用到的,可以避免用户操作失误,给用户一个选择的机会,就比如我们常常用到的编辑器中。如果用户选择了离开,那么onunload或者onbeforeunload事件自然会触发;但若用户选择了取消,又该如何检测呢?

我们假定一个页面离开取消事件,叫做onunloadcancel。显然,这个事件应触发在用户按下对话框的取消按钮之后。但关闭提示对话框的触发流程并不是那么简单。我们先来回顾下这个过程:

window.onbeforeunload = function(){
    return "真的离开?";
}

当用户准备离开页面(比如按下关闭按钮,或者刷新页面等等),onbeforeunload事件触发。我们的脚本无法在这个事件里决定是否阻止页面的关闭,唯一能做到的只有返回一个字符串,这个字符串仅作为说明文字出现在关闭选择对话框里,用户可以选择关闭,或者不关闭。但究竟选择哪个,我们无从得知。

然而仔细分析下这个问题,其实不然。 如果用户真选择了关闭页面,那么之后所有的运行代码都byebye了;而继续留在页面的话,就当什么都没发生过,除了onbeforeunload事件。所以,我们在onbeforeunload事件里做点小花招,在此注册个几毫秒之后启动的定时器,如果页面真关闭了,那么这个定时器当然是作废了;那么页面还在,几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。

Read More