html:结构

css初始化结构:

body,html{background: #eee;height: 100%;width: 100%;}

    .game_time{width:.8rem;height:.8rem;position:absolute;top:5rem;left:41.4%;right: 0;text-align:center;}

    .game_time .pie{width:1.6rem;height:1.6rem;background-color:blue;border-radius:1.6rem;position:absolute;}

    .game_time .pie1{clip:rect(0px,1.6rem,1.6rem,.8rem);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);background-color:#fff;}

    .game_time .pie2{clip:rect(0px,.8rem,1.6rem,0px);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);background-color:#fff;}

    .game_time .hold{width:1.6rem;height:1.6rem;position:absolute;z-index:1;}

    .game_time .bg{width:1.6rem;height:1.6rem;border-radius:1.6rem;position:absolute;background-color:#facd89;}

    .game_time .time{width:1.28rem;height:1.28rem;color: #fff;margin:.16rem 0 0 .16rem;background-color:#333;border-radius:1.28rem;position:absolute;z-index:1;text-align:center;line-height:1.28rem;font-size:.64rem;}

1.引入time.js文件：

2.调用js方法：

    $(function(){

        countDown(6);

    })

3.这里是time.js;

var rotate = 0, // 总度数

    MS = 60, // 定义需要多少秒跑一圈

    total_time = 60,

    loop_time = 10, // 每秒钟调用次数

    totle = 360; // 每一圈的度数

function resetGameTime() {

    $(".pie2").css("-o-transform", "rotate(" + 0 + "deg)");

    $(".pie2").css("-moz-transform", "rotate(" + 0 + "deg)");

    $(".pie2").css("-webkit-transform", "rotate(" + 0 + "deg)");

    $(".pie1").css("-o-transform", "rotate(" + 0 + "deg)");

    $(".pie1").css("-moz-transform", "rotate(" + 0 + "deg)");

    $(".pie1").css("-webkit-transform", "rotate(" + 0 + "deg)");

    $(".pie2").css("background", "#fff");

}

function showTime() {

    if (MS == 0) {

        shutDown(true);

        return false;

    }

    var interval_time = 1000 / loop_time;

    MS = MS - interval_time;

    $(".time").html(Math.floor(MS / 1000));

};

function start1() {

    // 总度数 = 已经旋转度数+步长

    rotate = rotate + totle / (total_time * loop_time);

    if (rotate <= totle / 2) {

        $(".pie1").css({

            "-o-transform": "rotate(" + rotate + "deg)",

            "-moz-transform": "rotate(" + rotate + "deg)",

            "-webkit-transform": "rotate(" + rotate + "deg)"

        });

    } else {

        $(".pie2").css({

            backgroundColor: '#facd89',

            "-o-transform": "rotate(" + rotate + "deg)",

            "-moz-transform": "rotate(" + rotate + "deg)",

            "-webkit-transform": "rotate(" + rotate + "deg)"

        });

    }

};

//在页面调用此方法即可

function countDown(gameTime) {

    rotate = 0;

    total_time = gameTime+1;

    MS = total_time * 1000;

    resetGameTime();

    showTime();

    var interval_time = 1000 / loop_time;

    s = setInterval("showTime()", interval_time);

    start1();

    t1 = setInterval("start1()", interval_time);

}

//结束动画后的初始化，根据情况使用

function shutDown() {

    clearInterval(s);

    clearInterval(t1);

    rotate = 0;

    MS = 60;

}