效果还是比较玄的,可以用来做iphone的主题。
算了,直接放上来还要调整模板,懒得弄了。 贴一些关键的代码吧。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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);
}
具体效果看源码包吧。