倒计时与圆环

倒计时：

倒计时并不难，主要用setInterval，但用setInterval需要调用clearInterval结束；用setTimeout也可以，但setTimeout只执行一次，不过我们可以在里面嵌套调用，直到不满足条件为止。

另外格式化时间是个关键，/表示取整，与floor合用表示向下取整；与round使用表示四舍五入；与ceil合用表示向上取整；与parseInt用表示只取整数部分，丢弃小数部分。%表示取余

//开始计时
function event_timer(time_remain) {
//由页面提交的时间与服务器时间一般都有2~4秒的差值
rt = parseInt(time_remain) + 4;
var eventid=document.getElementById('event_time_remain');
if (rt == 0) {
alert("时间到！");
}else {
eventid.innerHTML = time_format(rt);
time_remain = time_remain - 1;
setTimeout("event_timer('" + time_remain + "')",1000);
}
}

// 以hh:mm:ss格式化时间，可以根据需要 定义格式
function time_format(s) {
var t;
if(s > -1){
hour = Math.floor(s/3600);
min = Math.floor(s/60) % 60;
sec = s % 60;
day = parseInt(hour / 24);
if (day > 0) {
hour = hour - 24 * day;
t = day + "天," + hour + ":";
}
else t = hour + ":";

if(min < 10){t += "0";}
t += min + ":";
if(sec < 10){t += "0";}
t += sec;}
else
{t = "00:00";}
return t;
}

圆环：

圆环可用css实现，参见：http://www.yangqq.com/web/css3demo/index.html

步骤是

1.先正方形：width:200px; height:200px; background-color:blue;

2.再用border-radius宽度一半变成圆形：width:200px; height:200px; background-color:blue; border-radius:100px;

3.再在上面叠加一个小一点的圆：width:160px; height:160px; margin:20px 0 0 20px; background-color:#fff; border-radius:80px; position:absolute; z-index:1;

这仅是圆环的形状，如果要加上动画效果，则需要用clip划分成两个半圆，垫个底在下面，再用rotate进行旋转，露出底色。注意控制旋转到180度时停止，开始旋转另外一个半圆。用js配合。

var i = 0;
var j = 0;
var count = 0;
var total=0;
var score=80;
function showScore(){
if(total>score){
clearInterval(s);
clearInterval(t1);
clearInterval(t2);

}
else{
$(".spn_score").text(total);
total++;
}
}
s=setInterval("showScore()",10);
function start1(){
i = i + 3.6;
if(i>180){
clearInterval(t1);
t2 = setInterval("start2()",10);
}else{
$(".pie1").css("-o-transform","rotate(" + i + "deg)");
$(".pie1").css("-moz-transform","rotate(" + i + "deg)");
$(".pie1").css("-webkit-transform","rotate(" + i + "deg)");}
};
function start2(){
j = j + 3.6;
if(j>180){
clearInterval(t2);
}else{
$(".pie2").css("-o-transform","rotate(" + j + "deg)");
$(".pie2").css("-moz-transform","rotate(" + j + "deg)");
$(".pie2").css("-webkit-transform","rotate(" + j + "deg)");}
};
t1 = setInterval("start1()",10);

效果：