Magki's Blog

一个简单的 JS 倒计时代码

Magki — Mon, 21 Jun 2010 00:57:23 +0000

公司的项目需要一个可以任意定时同时多次使用的倒计时，网上找了下都偏复杂，想了下自己整理了一个很简单的。

用法很简单，两个参数，第一个参数就是终止时间的时间戳，PHP 中 time() 输出的格式标准。二个参数是显示倒计时的 HTML 标签元素 ID 后缀。

function GetRTime(EndTime, id){
   var EndTime = new Date(EndTime * 1000);

   function run(){
      var StepTime = new Date();
      var runTime=EndTime.getTime() - StepTime;
      var nD=Math.floor(runTime/(1000 * 60 * 60 * 24));
      var nH=Math.floor(runTime/(1000*60*60)) % 24;
      var nM=Math.floor(runTime/(1000*60)) % 60;
      var nS=Math.floor(runTime/1000) % 60;
      var nMS=Math.floor(runTime/100) % 10;
      var nNS=Math.floor(runTime/10) % 10;
      if(nD> 0){
         document.getElementById("RemainD"+id).innerHTML = nD;
      }else{
         document.getElementById("RemainD"+id).innerHTML = 0;
      }
      if(nH> 0){
         document.getElementById("RemainH"+id).innerHTML = nH;
      }else{
         document.getElementById("RemainH"+id).innerHTML = 0;
      }
      if(nM> 0){
         document.getElementById("RemainM"+id).innerHTML = nM;
      }else{
         document.getElementById("RemainM"+id).innerHTML = 0;
      }
      if(nS> 0){
         document.getElementById("RemainS"+id).innerHTML = nS;
      }else{
         document.getElementById("RemainS"+id).innerHTML = 0;
      }
      if(nMS> 0){
         document.getElementById("RemainMS"+id).innerHTML = nMS;
      }else{
         document.getElementById("RemainMS"+id).innerHTML = 0;
      }
      if(nNS> 0){
         document.getElementById("RemainNS"+id).innerHTML = nNS;
      }else{
         document.getElementById("RemainNS"+id).innerHTML = 0;
      }
      setTimeout(run,10);
   }
   setTimeout(run,10);
}

招聘：深圳地区 PHPer

Magki — Wed, 07 Apr 2010 04:58:03 +0000

由于公司的业务越来越多，人手已经严重不够。计划招聘 PHP 程序员两到三名，细节如下：

1、熟悉 PHP，MySQL，对 MVC 开发模式有所了解
2、熟悉 Javascript，要会编写一些简单的页面特效，会用 Jquery 等框架者尤佳
3、至少能看懂 CSS，精通并且会处理多浏览器兼容者尤佳
4、了解 PHPCMS、ECSHOP 等开源程序者尤佳

薪资是基本工资 + 月绩奖金，具体的面谈。有意着请 QQ 632700222

在网上偶然拾获的小文，贴之感慨一下

Magki — Sun, 13 Dec 2009 13:06:06 +0000

夫80后者，初从文，未及义务教育之免费，不见高等学校之分配，适值扩招，过五关，斩六将，本硕相继，寒窗数载，二十六乃成，负债十万。觅生计，背井离乡，东渡苏浙，南下湖广，西上志愿，北漂京都，披星戴月，秉烛达旦，十年无休，蓄十万。楼市暴涨，无栖处，购房金不足首付，遂投股市，翌年缩至万余，遂抑郁成疾，入院一周，倾其所有，病无果，因欠费被逐院门。寻医保, 不合大病之规，拒付，带病还。服鼠药自尽，遇赝品未果. 友怜之，送三鹿奶粉，饮之，卒。

腾讯面试小结

Magki — Sun, 06 Dec 2009 13:14:36 +0000

上周5下午应约去腾讯公司面试PHP开发，呵一直不敢投腾讯的简历，觉得自己肯定进不去，没想这回腾讯在51job上看到我的简历直接约我去面试。去吧，去看看也好。

到了腾讯大厦20楼，一起面试的还有3人，都呆一个小会议室里做试题，时限10分钟。过一会有人收走了答卷，再过会那人回来和其他三位面试人说拜拜……汗……就剩我一个人了。接下来继续做新的一份试题，时限40分钟。这次的题目稍有难度，还好我之前有准备……嘿嘿。还算顺利的到了面试环节，前后一共有4个人来跟我开“座谈会”，我晕，大大小小的面试也有几十次了，还只有腾讯一面就搞这么多环节。我沉着迎战到最后一个面试官，他简单了解了下我的情况后，出了三个题……完了，我才疏学浅只能很快的答出一个，其他两个要么不会要么回答都看上去不能让人满意。最后都到晚上9点了，面试官简单收了下尾，交代我说一个星期内等通知……不知道还有没有戏？我心情沉重的走出腾讯大厦，一路上对没做出来的那两个题耿耿于怀。题目如下：

一、有AB两个点，还有通讯协议C，目前A与B之间同时只能进行单向通讯，请问如何实现A与B之间能同时互相通讯。

二、有10亿个无序整数，请问如何找出100个最大的数。

我真不知道怎么答啊，有朋友说前一个是考的点对点的应答模式，后一个是冒泡排序，汗，我听都没听说过……5555555555

写了个 JQuery 的平滑横向跑马灯

Magki — Thu, 03 Dec 2009 01:47:11 +0000

懒的说废话了，直接贴代码吧。

HTML 部分

                    滚动测试用文字一
                    滚动测试用文字二
                    滚动测试用文字三
                    滚动测试用文字四

JS 部分

var speed=20;
$('#marqee_tmp').html($('#marqee_frame').html());
function Marquee(){
    var w = $('#marqee').width() - $('#marqee_frame').width();
    if(w<0) w=0;
    if($('#marqee_tmp').width() - $('#marqee').scrollLeft() <= w){
        $('#marqee').scrollLeft($('#marqee').scrollLeft() - $('#marqee_frame').offsetWidth);
    }else{
        $('#marqee').scrollLeft($('#marqee').scrollLeft() + 1);
    }
}
var MyMar=setInterval(Marquee,speed);
$('#marqee').hover(
    function(){ clearInterval(MyMar) },
    function(){ MyMar=setInterval(Marquee,speed) }
);

快乐十一月

Magki — Sat, 21 Nov 2009 02:35:56 +0000

这个十一月过得确实很舒坦，以前一直惦记的两大件电子产品一一实现。在这里不得不由衷的感谢一位客户兼朋友的信赖与支持……（后面省略1000字慷慨激扬的词汇）

M8，国产手机中的战斗机，至少我是这么认为的。2000 的价位，美轮美奂的UI，流畅的操作，完备的售后，值得信赖的魅族人的研发热情……呼，从公测机推出后我一直天天关注它，希望哪天能入手一台。虽然也就2000块，虽然现在工资也不算低，但每个月总是这里那里一折腾，来深圳快一年了始终没存到钱（惭愧）。终于在给一位客户做网站的时候，自己对网站投入的热情打动了客户，抬手就送了这台梦寐以求的 M8 SE 给我。乖乖……

ThinkPad SL410 2842-56C，不知道从什么时候起就一直羡慕别人拧着本本在街上“炫耀”。参加工作后也一直关注着行情期待买一台，然经过一段时间后发现自己连手机的钱都存不到，才慢慢收起自己的心，直到这个客户出现……前一个网站做完他非常满意，抬手一挥，6000划入我账上，当天下午我就跑到联想专卖将还没捂热的 6000 块划出去，入手一台 ThinkPad SL410 2842-56C。这几天俺兴奋极了，哈哈。怎么说这都是自己的劳动所得。

这个客户还有好几个网站要做，恩恩，加油……我还有好几个东西计划中，哦耶。

刚写的一个基于 JQuery 的聚焦切换广告

Magki — Tue, 10 Nov 2009 03:26:39 +0000

在给一个客户做站时 (测试站) 要用到聚焦广告，网上简单搜了一下 Flash 版的都不太满意那些样式，后来萌发自己用 JQuery 写一个的想法，于是就做了，实现起来并不难，这里不得不赞叹一下 JQuery 的强大。

HTML 部分

CSS 部分

#doFocus{ position:relative; width:694px; height:172px; border:2px #FFF solid; overflow:hidden;}
#doFocus img{ position:absolute; width:694px; height:172px; top:0px; left:0px;}
#focusNav{ position:absolute; top:142px; right:10px; z-index:2; opacity:0.8; filter:Alpha(Opacity=80);}
#focusNav a{ display:block; float:right; width:20px; height:20px; margin-left:10px; line-height:20px; text-align:center; background:#333; color:#FFF; font-weight:bold;}
#focusNav .thisclass,#focusNav a:hover{ background:#fff; color:#333;}

JS 部分

var ImgArr = $('#doFocus img');
var MaxImg = ImgArr.length;
var NowImg = 0;
var NextImg = 0;
var ToImg = -1;
var ImgNav = '';
var Status = 0;
var t;

for(i=0;i     ImgNav = ''+(i+1)+'' + ImgNav;
    ImgArr.eq(i).hide();
    ImgArr.eq(i).css("zIndex","0");
}

ImgArr.eq(0).show();
$('#focusNav').html(ImgNav);
$('#imgNav0').addClass("thisclass");

function changeImg(ImgNum){
    if(Status == 1){
        ToImg = ImgNum;
    }else{
        clearTimeout(t);

        ToImg = -1;
        ImgNav = '';
        NowImg = ImgNum;

        for(i=0;i             ImgNav = ''+(i+1)+'' + ImgNav;
            ImgArr.eq(i).hide();
            ImgArr.eq(i).css("zIndex","0");
        }

        ImgArr.eq(NowImg).show();
        $('#focusNav').html(ImgNav);
        $('#imgNav'+NowImg).addClass("thisclass");

        t = setTimeout('doFocus()', 3000);
    }
}

function doFocus(){
    clearTimeout(t);

    Status = 1;
    NextImg = (NowImg + 1 == MaxImg) ? 0 : NowImg + 1 ;

    ImgArr.eq(NextImg).css("zIndex","1");
    ImgArr.eq(NowImg).css("zIndex","0");

    ImgArr.eq(NextImg).fadeIn("slow",function(){
        $('#imgNav'+NowImg).removeClass("thisclass");
        $('#imgNav'+NextImg).addClass("thisclass");
        ImgArr.eq(NextImg).css("zIndex","0");
        ImgArr.eq(NowImg).hide();
        Status = 0;

        if(ToImg>-1){
            if(ToImg!=NextImg){
                ImgArr.eq(ToImg).show();
                ImgArr.eq(NextImg).hide();
                $('#imgNav'+ToImg).addClass("thisclass");
                $('#imgNav'+NextImg).removeClass("thisclass");
            }
            NowImg = ToImg;
            ToImg = -1;
        }else{
            if(NowImg == MaxImg-1){
                NowImg = 0;
            }else{
                NowImg++;
            }
        }

        t = setTimeout('doFocus()', 3000);
    });
}

t = setTimeout('doFocus()', 3000);

自己改写的基于 JQuery 的 Tip 提示框

Magki — Wed, 28 Oct 2009 07:58:53 +0000

使用方法很简单，将下面的 JS 脚本与 JQuery 一同载入，在需要做 Tip 效果的链接上添加一个 tips 属性，属性值就是 Tip 框里要显示的内容。

比如：tips="这个是提示内容！" />测试提示

想要美化 Tip 框的话完全可以在 tips 属性里加入用来修饰的 html 标签，然后在 CSS 文件里针对 #tip 以及其子元素定义 CSS 就可以了。

比如：

提示标题

这个是提示内容！

" />测试提示

一个用 JQuery 写的跑马灯

Magki — Sat, 17 Oct 2009 01:37:13 +0000

在做一个刷淘宝信用的网站时，需要一个跑马灯的广告效果。网上找的那种用 table 的不太好用，便自己动手写一个。因为程序是用 PHPCMS，其自带了 JQuery，自然也用 JQuery 来实现了。暂时写了个简单的，以后有时间再完善吧。

html 部分：

CSS 部分：

#marqee{ width:960px; height:61px;}
#marqee #leftButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #rightButton{ width:24px; height:61px; float:left; cursor:pointer;}
#marqee #marqeeArea{ position:relative; width:912px; height:61px; overflow:hidden; float:left;}
#marqee #marqeeArea ul{ position:relative; display:block; height:61px; overflow:hidden; list-style:none;}
#marqee #marqeeArea ul li{ width:121px; height:61px; float:left; text-align:center;}

JS 部分：

$(document).ready(function(){
    var liItem = $('#marqeeArea>ul>li');
    var liTotel = liItem.length;
    var i = 0;
    var marqee_way = 'left';

    $('#marqeeArea>ul').css('width',100*liTotel);

    for(i;i         var imgWidth = liItem.eq(i).children('img').attr('width');
        var imgHeight = liItem.eq(i).children('img').attr('height');

        if(imgWidth/imgHeight > 100/61){
            if(imgWidth > 100){
                liItem.eq(i).children('img').attr('width',100);
                liItem.eq(i).children('img').attr('height',imgHeight*100/imgWidth);
            }
        }else{
            if(imgHeight > 100){
                liItem.eq(i).children('img').attr('height',61);
                liItem.eq(i).children('img').attr('width',imgWidth*61/imgHeight);
            }
        }

        var mtop = (61-liItem.eq(i).children('img').attr('height'))/2;

        liItem.eq(i).children('img').css("margin-top",mtop);
    }

    $.extend({
        marqeemGo:function(type){
            if(type == 'left'){
                $('#marqeeArea>ul').append("
"+$('#marqeeArea>ul>li:first-child').html()+"
");
                $('#marqeeArea>ul').animate(
                    {left:"-121px"},
                    500,
                    "linear",
                    function(){
                        $('#marqeeArea>ul').css("left","0px");
                        $('#marqeeArea>ul>li:first-child').remove()
                    }
                );
            }else if(type == 'right'){
                $('#marqeeArea>ul').css("left","-121px");
                $('#marqeeArea>ul').prepend("
"+$('#marqeeArea>ul>li:last-child').html()+"
");
                $('#marqeeArea>ul').animate(
                    {left:"0px"},
                    500,
                    "linear",
                    function(){
                        $('#marqeeArea>ul>li:last-child').remove()
                    }
                );
            }
        }
    });

    var t = setInterval("$.marqeemGo('"+marqee_way+"')",2000);

    $("#marqeeArea").hover(
        function(){t = clearInterval(t)},
        function(){t = setInterval("$.marqeemGo('"+marqee_way+"')",2000)}
    );

    $("#leftButton").click(function(){
        marqee_way = "left";
        t = clearInterval(t);
        t = setInterval("$.marqeemGo('"+marqee_way+"')",2000);
    });

    $("#rightButton").click(function(){
        marqee_way = "right";
        t = clearInterval(t);
        t = setInterval("$.marqeemGo('"+marqee_way+"')",2000);
    });
});