jQuery css3圆形倒数秒计时器代码_jq css 圆到计时-CSDN博客

源码:jQuery css3圆形倒数秒计时器代码

i = 0;
j = 0;
count = 0;
MM = 0;
SS = 30; // 秒 90s
MS = 0;
totle = (MM + 1) * 600;
d = 180 * (MM + 1);
MM = "0" + MM;
var gameTime = 30;

var resettime = function () {

i = 0;
j = 0;
count = 0;
MM = 0;
SS = 30; // 秒 90s
MS = 0;
totle = (MM + 1) * 600;
d = 180 * (MM + 1);
MM = "0" + MM;
gameTime = 30;
clearInterval(s);
clearInterval(t1);

$(".pie1").css("-o-transform", "rotate(" + 179.999999999999 + "deg)");
$(".pie1").css("-moz-transform", "rotate(" + 179.999999999999 + "deg)");
$(".pie1").css("-webkit-transform", "rotate(" + 179.999999999999 + "deg)");

$(".pie2").css("-o-transform", "rotate(" + 359.4000000000022 + "deg)");
$(".pie2").css("-moz-transform", "rotate(" + 359.4000000000022 + "deg)");
$(".pie2").css("-webkit-transform", "rotate(" + 359.4000000000022 + "deg)");

$(".pie1").css("backgroundColor", "#fff");
$(".pie2").css("backgroundColor", "#fff");
countDown();
}

//count down
var showTime = function () {
totle = totle - 1;
if (totle == 0) {
clearInterval(s);
clearInterval(t1);
} else {
if (totle > 0 && MS > 0) {
MS = MS - 1;
if (MS < 10) {
MS = "0" + MS
}
;
}
;
if (MS == 0 && SS > 0) {
MS = 10;
SS = SS - 1;
if (SS < 10) {
SS = "0" + SS
}
;
}
;
if (SS == 0 && MM > 0) {
SS = 30;
MM = MM - 1;
if (MM < 10) {
MM = "0" + MM
}
;
}
;
}
;
$(".time").html(SS + "s");
//console.log(SS);
if (SS == 00) {
$(".pie1").css("-o-transform", "rotate(" + 0 + "deg)");
$(".pie1").css("-moz-transform", "rotate(" + 0 + "deg)");
$(".pie1").css("-webkit-transform", "rotate(" + 0 + "deg)");
}
};

//console.log('i<348==========>'+i);
}
};

var countDown = function () {
i = 0;
j = 0;
count = 0;
MM = 0;
SS = gameTime;
MS = 0;
totle = (MM + 1) * gameTime * 10;
d = 180 * (MM + 1);
MM = "0" + MM;

showTime();

s = setInterval("showTime()", 100);
start1();

t1 = setInterval("start1()", 100);
}
countDown();
</script>
<style type="text/css">
html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
body { font-family: "微软雅黑","华文细黑",Arial, Helvetica, sans-serif; font-size: 14px; color: #fff; user-select: none; -webkit-user-select: none; -webkit-text-size-adjust: none; background-color: #ccc; }

.game_time { width: 100px; height: 100px; position: absolute; top: 30%; left: 40%; text-align: center; }

/* time scroll*/
.pie { width: 200px; height: 200px; background-color: blue; border-radius: 100px; position: absolute; }
.pie1 { clip: rect(0px,200px,200px,100px); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); background-color: #fff; }
.pie2 { clip: rect(0px,100px,200px,0px); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); background-color: #fff; }
.hold { width: 200px; height: 200px; position: absolute; z-index: 1; }
.bg { width: 200px; height: 200px; border-radius: 200px; position: absolute; background-color: #d13c36; }
.time { width: 160px; height: 160px; margin: 20px 0 0 20px; background-color: #e45534; border-radius: 160px; position: absolute; z-index: 1; text-align: center; line-height: 160px; font-size: 30px; }
</style>
</head>
<body>

<h1>ohyewang.com</h1>