JS计时器仅适用于秒,如何添加分钟和小时

时间:2014-08-01 12:20:58

标签: javascript jquery time timer countdown

我试图编辑一个开源的js倒计时器,以便用户可以输入小时,分钟和秒,而不仅仅是秒。我想这并不难解决,因为它只是基础数学,但我对js来说是全新的,所以我迷失了。 =(

这里是代码(也可以在jsbin上找到:http://jsbin.com/odiya3/90/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="language" content="en-au" />

        <meta name="robots" content="ALL" />

        <meta name="revisit-after" content="7 Days" />

        <title>CSS3 pie graph timer with jquery</title>

        <meta name="keywords" content="css3, jquery, pie, graph, chart, timer" />

        <meta name="description" content="CSS3 pie graph timer with jquery" />
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
        <link rel="stylesheet" href="http://blakek.us/labs/jquery/css3-pie-graph-timer/style.css" type="text/css" media="screen" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

        <style>

            .timer {

                position:relative;

                font-size: 200px;

                width:1em;

                height:1em;

                float: left;

            }

            .timer > .percent {

                position: absolute;

                top: 1.05em;

                left: 0;

                width: 3.33em;

                font-size: 0.3em;

                text-align:center;

            }

            .timer > #slice {

                position:absolute;

                width:1em;

                height:1em;

                clip:rect(0px,1em,1em,0.5em);

            }

            .timer > #slice.gt50 {

                clip:rect(auto, auto, auto, auto);

            }

            .timer > #slice > .pie {

                border: 0.1em solid #c0c0c0;

                position:absolute;

                width:0.8em; /* 1 - (2 * border width) */

                height:0.8em; /* 1 - (2 * border width) */

                clip:rect(0em,0.5em,1em,0em);

                -moz-border-radius:0.5em;

                -webkit-border-radius:0.5em; 

                border-radius:0.5em; 

            }

            .timer > #slice > .pie.fill {

                -moz-transform:rotate(180deg) !important;

                -webkit-transform:rotate(180deg) !important;

                -o-transform:rotate(180deg) !important;

                transform:rotate(180deg) !important;

            }

            .timer.fill > .percent {

                display: none;

            }

            .timer.fill > #slice > .pie {

                border: transparent;

                background-color: #c0c0c0;

                width:1em;

                height:1em;

            }

        </style>




<style id="jsbin-css">

</style>
</head>

    <body>


        <h2>Size</h2>

        <p><input type="button" id="size" value="Set timer to" /> <input type="text" id="size" size="2" value="40" />px</p>

        <h2>Set percent</h2>

        <p><input type="button" id="percent" value="Set timer to" /> <input type="text" id="percent" size="2" value="35" />%</p>

        <h2>Stop watch</h2>

        <p><input type="button" id="watch" value="Start" /> count down from <input type="text" id="watch" size="2" value="10" /> seconds</p>

        <div class="timer"></div><div class="timer fill"></div>

        <p><a href="http://blakek.us/css3-pie-graph-timer-with-jquery/">Back to discussion</a></p>

    <script>
var timer;

            var timerCurrent;

            var timerFinish;

            var timerSeconds;

            function drawTimer(percent){

                $('div.timer').html('<div class="percent"></div><div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');

                var deg = 360/100*percent;

                $('#slice .pie').css({

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

                    '-webkit-transform':'rotate('+deg+'deg)',

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

                    'transform':'rotate('+deg+'deg)'

                });

                $('.percent').html(Math.round(percent)+'%');

            }

            function stopWatch(){

                var seconds = (timerFinish-(new Date().getTime()))/1000;

                if(seconds <= 0){

                    drawTimer(100);

                    clearInterval(timer);

                    $('input[type=button]#watch').val('Start');

                    alert('Finished counting down from '+timerSeconds);

                }else{

                    var percent = 100-((seconds/timerSeconds)*100);

                    drawTimer(percent);

                }

            }

            $(document).ready(function(){

                $('input[type=button]#percent').click(function(e){

                    e.preventDefault();

                    drawTimer($('input[type=text]#percent').val());

                });

                $('input[type=button]#size').click(function(e){

                    e.preventDefault();

                    $('.timer').css('font-size',$('input[type=text]#size').val()+'px');

                });

                $('input[type=button]#watch').click(function(e){

                    e.preventDefault();

                    if($('input[type=button]#watch').val() == 'Start'){

                        $('input[type=button]#watch').val('Stop');

                        timerSeconds = $('input[type=text]#watch').val();

                        timerCurrent = 0;

                        timerFinish = new Date().getTime()+(timerSeconds*1000);

                        timer = setInterval('stopWatch()',50);

                    }else{

                        $('input[type=button]#watch').val('Start');

                        clearInterval(timer);

                    }

                });

                $('input[type=button]#watch').click();

            });
</script>
</body>

</html>

1 个答案:

答案 0 :(得分:1)

在以下位置修改您的代码:

    <p>
      <input type="button" id="watch" value="Start" /> count down from 
      <input type="text" id="watchH" size="2" value="0" /> hours and 
      <input type="text" id="watchM" size="2" value="0" /> minutes and  
      <input type="text" id="watchS" size="2" value="10" /> seconds
   </p>

并按以下行替换javascript行timerSeconds = $('input[type=text]#watch').val();

    timerMinutes = ~~($('input[type=text]#watchM').val()) * 60;
    timerHours = ~~($('input[type=text]#watchH').val()) * 3600;
    timerSeconds = ~~($('input[type=text]#watchS').val());
    timerSeconds = timerSeconds + timerMinutes + timerHours;
PS:这是实现目标的一种方式。