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