来个给力的东西，web时钟，支持iphone和android

效果还是比较玄的，可以用来做iphone的主题。

 

算了，直接放上来还要调整模板，懒得弄了。 贴一些关键的代码吧。

 

var cDate = new Date();

var nHours = cDate.getHours();

var nMins = cDate.getMinutes();

var nSecs = cDate.getSeconds();
var AMPM = 'AM';


$(document).ready(function(){

        
    setAMPM();
    //set seconds

    var op = 0;

    var fs = 0;

    var secs = nSecs;

    //for secs

    for(var i=0;i<40;i++){

        op = op +0.025;

        fs = fs + 0.45;

        var ind = secs+21;

        updateHands(op, ind, 60, 6,140, 'div.secs',fs);             

        secs = secs+1;

    }

    $('div.secs p:last').addClass('c').css({opacity: 1, fontSize: '10px'});

    

    //for mins

    var mins = nMins;

    op = 0;

    fs = 0;

    for(var i=0;i<40;i++){ 

        op = op + 0.025;

        fs = fs + 0.45;

        var ind = mins+21;

        updateHands(op, ind, 60, 6,100, 'div.mins',fs);             

        mins = mins+1;

    }

    $('div.mins p:last').addClass('c').css({opacity: 1, fontSize: '26px'});

    

    //for hours

    var hours = nHours;

    op = 0;

    fs = 11;

    for(var i=0;i<8;i++){ 

        op = op + 0.15;

        fs = fs + 1.4;

        var ind = hours+5;

        updateHands(op, ind, 12, 30,50, 'div.hours',fs);                

        hours = hours+1;

    }

    $('div.hours p:last').addClass('c').css({opacity: 1, fontSize: '36px'});



    setInterval(updateTimer,1000);

});

function updateHands(op, ind, max, aDiff, r, elem, fSize){    

    ind = ind%max;

    var angle = (ind*aDiff)-90;

    var cosA = Math.cos(angle*(Math.PI/180));

    var sinA = Math.sin(angle*(Math.PI/180));

    var x = Math.round(162+(r*cosA)-50);

    var y = Math.round(160+(r*sinA)-25);

    if(max != 12){
        if (ind < 10) ind = '0' + ind;
    }

    if (max == 12 && ind == 0) ind = '12';

    var p = '<p style="font-size: ' + fSize + 'px;opacity: ' + op + ';left: ' + x + 'px;top: ' + y + 'px;">' + ind + '</p>';

    $(elem).append(p);    

}

function updateTimer(){

    //ind = secs;

    //ind = secs+37;

    nSecs = nSecs + 1;

    updateHands(0, nSecs, 60, 6,140, 'div.secs', 22);

    

    updateStyle('div.secs', 0.025, 40, '22px', 700, 0, .45);

    //update mins

    nSecs = nSecs%60;

    if(nSecs == 0){

        nMins = nMins + 1;

        updateHands(0, nMins, 60, 6,100, 'div.mins',25);

        updateStyle('div.mins', 0.025, 40, '25px', 1000, 0, .45);

        

        nMins = nMins%60;

        if(nSecs == 0 && nMins == 0){    

            nHours = nHours + 1;

            updateHands(0, nHours, 12, 30,50, 'div.hours',28);

            updateStyle('div.hours', 0.15, 9, '30px', 1000, 10, 1.2);

            //nHours = nHours + 1;

            bHours = nHours%12;
            setAMPM();

        }

    }

    

}



function updateStyle(elem, oI, limit, finalSize,t, s, fI){

    $(elem + ' p').eq(0).remove();

    $(elem + ' p.c').removeClass('c');



    var o = 0;

    var fs = s;

    for(var i=0;i<limit;i++){

        o = o + oI;

        fs = fs + fI;

        $(elem + ' p').eq(i).css({opacity: o, fontSize: fs + 'px' });

    }

    

    $(elem + ' p:last').addClass('c').css({fontSize: '0px',opacity: 0}).animate({

        fontSize: finalSize,

        opacity: 1        

    },t,'easeOutBounce');    

}
function setAMPM(){
    var nDate = new Date();
    if(nDate.getHours()>11)
        AMPM = 'PM';
    else
        AMPM = 'AM';
    $('div.ampm').css({opacity: 0, fontSize: '0px'}).animate({opacity: 1, fontSize: '20px'}, 700,'easeOutBounce').html(AMPM);
}

 具体效果看源码包吧。

点击下载源码包