Magki'Blog

一个简单的 JS 倒计时代码

Magki — Mon, 21 Jun 2010 08:57:23 +0800

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

用法很简单，两个参数，第一个参数就是终止时间的时间戳，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 12:58:03 +0800

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

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

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

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

Magki — Sun, 13 Dec 2009 21:06:06 +0800

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

腾讯面试小结

Magki — Sun, 06 Dec 2009 21:14:36 +0800

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

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

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

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

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

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

Magki — Thu, 03 Dec 2009 09:47:11 +0800

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

HTML 部分

<div id="marqee" style="width:200px; height:24px; overflow:hidden;">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td id="marqee_frame" height="24"><table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td nowrap="nowrap">滚动测试用文字一</td>
                    <td nowrap="nowrap">滚动测试用文字二</td>
                    <td nowrap="nowrap">滚动测试用文字三</td>
                    <td nowrap="nowrap">滚动测试用文字四</td>
                </tr>
            </table></td>
            <td id="marqee_tmp" height="24"></td>
        </tr>
    </table>
</div>

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 10:35:56 +0800

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

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

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

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

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

Magki — Tue, 10 Nov 2009 11:26:39 +0800

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

HTML 部分

<div id="doFocus">
    <img src="ad/01.jpg" />
    <img src="ad/02.jpg" />
    <div id="focusNav"></div>
</div>

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<MaxImg;i++){
    ImgNav = '<a id="imgNav'+i+'" href="javascript:void(0)" onclick="changeImg('+i+')">'+(i+1)+'</a>' + 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<MaxImg;i++){
            ImgNav = '<a id="imgNav'+i+'" href="javascript:void(0)" onclick="changeImg('+i+')">'+(i+1)+'</a>' + 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 15:58:53 +0800

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

比如：<a href="javascript:void(0)" tips="这个是提示内容！" />测试提示</a>

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

比如：<a href="javascript:void(0)" tips="<h3>提示标题</h3><div class='content'>这个是提示内容！</div>" />测试提示</a>

<script type="text/javascript">
    $().ready(function(){
        $('body').append('<div id="tip"></div>');
        $('#tip').css({display:'none',left:'0',top:'0',position:'absolute'});
        $('a[tips]').hover(
            function(e){
                var mouse = $.mousePos(e);

                if(mouse.x > $('body').width() - $('#tip').width()){
                    $('#tip').css('left', $('body').width() + $(document).scrollLeft() - $('#tip').width() - 10 + 'px');
                }else{
                    $('#tip').css('left', mouse.x + 10 + 'px');
                }

                $('#tip').css('top', mouse.y + 10 + 'px');
                $('#tip').html($(this).attr('tips'));
                $('#tip').show();
            },

            function(){
                $('#tip').hide();
            }
        );
    });

    $.extend({
        mousePos:function(e){
            var x,y;
            var e = e||window.event;
            return{
                x:e.clientX + $('body').scrollLeft() + $(document).scrollLeft(),
                y:e.clientY + $('body').scrollTop() + $(document).scrollTop()
            };
        }
    });
</script>

一个用 JQuery 写的跑马灯

Magki — Sat, 17 Oct 2009 09:37:13 +0800

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

html 部分：

<div id="marqee">
    <div id="leftButton"></div>
    <div id="marqeeArea">
        <ul>
            <li><img src="1.gif" /></li>
            <li><img src="2.gif" /></li>
            <li><img src="3.gif" /></li>
        </ul>
    </div>
    <div id="rightButton"></div>
</div>

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<liTotel;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("<li>"+$('#marqeeArea>ul>li:first-child').html()+"</li>");
                $('#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("<li>"+$('#marqeeArea>ul>li:last-child').html()+"</li>");
                $('#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);
    });
});