Magki's Blog

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

用法很简单，两个参数，第一个参数就是终止时间的时间戳，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);
}

Javascript

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

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) }
);

Javascript jquery

在给一个客户做站时 (测试站) 要用到聚焦广告，网上简单搜了一下 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;}

阅读全文...

Javascript jquery

使用方法很简单，将下面的 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>

Javascript jquery