Coin163

首页 > jQuery css3圆形倒数秒计时器代码

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

相关标签: css3 jquery css3圆形倒数秒计时器代 jquery

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

  查看效果
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script type="text/javascript" src="http://ohyewang.com/Content/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">         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)");
            }
        };         var start1 = function () {
            //i = i + 0.6;
            i = i + 360 / ((gameTime) * 10);  //旋转的角度  90s 为 0.4  60s为0.6
            count = count + 1;
            if (count <= (gameTime / 2 * 10)) {  // 一半的角度  90s 为 450
                $(".pie1").css("-o-transform", "rotate(" + i + "deg)");
                $(".pie1").css("-moz-transform", "rotate(" + i + "deg)");
                $(".pie1").css("-webkit-transform", "rotate(" + i + "deg)");
                //console.log('count <= (gameTime/2*10)==========>'+i);
            } else {
                if (i < 348) {
                    $(".pie2").css("backgroundColor", "#d13c36");
                    $(".pie2").css("-o-transform", "rotate(" + i + "deg)");
                    $(".pie2").css("-moz-transform", "rotate(" + i + "deg)");
                    $(".pie2").css("-webkit-transform", "rotate(" + i + "deg)");
                }
                else {
                    $(".pie1").css("-o-transform", "rotate(" + 0 + "deg)");
                    $(".pie1").css("-moz-transform", "rotate(" + 0 + "deg)");
                    $(".pie1").css("-webkit-transform", "rotate(" + 0 + "deg)");
                    $(".pie1").css("backgroundColor", "#d13c36");
                }                 //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>     <div style="text-align: center">
        <input onclick="resettime()" style="width: 100px; height: 50px" type="button" value="Reset"></div>     <div class="game_time">
        <div class="hold">
            <div class="pie pie1" style="-webkit-transform: rotate(110.40000000000018deg);">&nbsp;</div>
        </div>         <div class="hold">
            <div class="pie pie2" style="-webkit-transform: rotate(359.4000000000022deg);">&nbsp;</div>
        </div>         <div class="bg">&nbsp;</div>         <div class="time">20s</div>
    </div>     <div style="clear: both">&nbsp;</div>
</body>
</html>

原文

源码:jQuery css3圆形倒数秒计时器代码   查看效果 <html> <head>     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">     <script type="text/javascript" src="http:/

------分隔线----------------------------
相关推荐