Question

我帮助管理逃生室，我们要做的是使用第二台计算机显示器创建数字计时器。本地网页将显示在具有倒数计时器的室内监视器上。

我的主要问题是如何使用html和javascipt或其他任何您认为最佳的解决方案来控制来自不同内部网页的时钟？谢谢！

     <! doctype html>
<head>
 <title></title>
 <style>
div.timer {
    height:400px;
    font-size:160px;
    font-family:"Erbos Draco 1st Open NBP";
    text-align:center;
    margin:5px;
  color:white; 
}
.control{width: 400px;margin:auto}
body{background-color:black;}
button{
    -webkit-appearance: none;
    border: none;
    border-radius: 5px;
    padding: 10px;
    color:white;
    width:120px
}
button#start {background-color:green}
button#pause {background-color:orange}
button#reset {background-color:red}

 </style>
 <link rel="stylesheet" type="text/css"  href="animate.css"/>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script src="HackTimer.js"></script>
</head>
<body>

        <div id="timer" class="timer animated fadeIn">
            <span class="hour">01</span><span id="colon">:</span><span class="minute">00</span><span id="colon2">:</span><span class="second">00</span>&nbsp<span id="seconds" style="display:none">seconds</span><span class="timesup" style="display:none">Time is up!</span>
        </div>
        <div class="control">
            <button id="start" onClick="timer.start(1000)">Start</button> 
            <button id="pause" onClick="timer.stop()">Pause</button> 
            <button id="reset" onClick="timer.reset(65)">Reset to 1 Hour</button> 

        </div>
<script>

function _timer(callback)
{
    var time = 0;     //  The default time of the timer
    var mode = 1;     //    Mode: count up or count down
    var status = 0;    //    Status: timer is running or stoped
    var timer_id;    //    This is used by setInterval function

    // this will start the timer ex. start the timer with 1 second interval timer.start(1000) 
    this.start = function(interval)
    {
        interval = (typeof(interval) !== 'undefined') ? interval : 1000;

        if(status == 0)
        {
            status = 1;
            timer_id = setInterval(function()
            {
                switch(mode)
                {
                    default:
                    if(time)
                    {
                        time--;
                        generateTime();
                        if(typeof(callback) === 'function') callback(time);
                    }
                    break;

                    case 1:
                    if(time < 86400)
                    {
                        time++;
                        generateTime();
                        if(typeof(callback) === 'function') callback(time);
                    }
                    break;
                }
            }, interval);
        }
    }

    //  Same as the name, this will stop or pause the timer ex. timer.stop()
    this.stop =  function()
    {
        if(status == 1)
        {
            status = 0;
            clearInterval(timer_id);
        }
    }

    // Reset the timer to zero or reset it to your own custom time ex. reset to zero second timer.reset(0)
    this.reset =  function(sec)

    {
        sec = (typeof(sec) !== 'undefined') ? sec : 0;
        time = sec;
        generateTime(time);

    }

    // Change the mode of the timer, count-up (1) or countdown (0)
    this.mode = function(tmode)
    {
        mode = tmode;
    }

    // This methode return the current value of the timer
    this.getTime = function()
    {
        return time;

    }

    // This methode return the current mode of the timer count-up (1) or countdown (0)
    this.getMode = function()
    {
        return mode;
    }

    // This methode return the status of the timer running (1) or stoped (1)
    this.getStatus
    {
        return status;
    }

    // This methode will render the time variable to hour:minute:second format
    function generateTime()
    {
        //var millisecond = Math.floor(time / 60) % 60;
        var second = time % 60;
        var minute = Math.floor(time / 60) % 60;
        var hour = Math.floor(time / 3600) % 60;

        //millisecond = (millisecond < 10) ? '0'+millisecond : millisecond;
        second = (second < 10) ? '0'+second : second;
        minute = (minute < 10) ? '0'+minute : minute;
        hour = (hour < 10) ? '0'+hour : hour;

        //$('div.timer span.milliseconds').html(millisecond);
        $('div.timer span.second').html(second);
        $('div.timer span.minute').html(minute);
        $('div.timer span.hour').html(hour);

        document.title = hour + ':' + minute + ':' + second + ' remaining';
    }
}

// example use
var timer;

$(document).ready(function(e) 
{

    timer = new _timer
    (
        function(time)
        {        
        if(time <= 3600)
            { 
              //$('span.hour').hide();
              //$('span#colon').hide();
            }

        if(time >= 60)
            { 
              $('div.timer').css('color','#32CD32');
            }
        if(time < 60)
            { 
              $('span#seconds').hide();
              $('span.milliseconds').show();
              $('div#timer').removeClass('tada');
              $('div#timer').addClass('fast');

              $('div.timer').css('color','yellow');
                $('span.timesup').hide();
                $('span.minute').show();
                $('span#colon2').show();
                $('span.second').show();
                $('span.milliseconds').show();
                $('span.hour').show();
                $('span#colon').show();
                $('div#timer').css('margin','5px');
                $('div#timer').css('font-size','160px');
            }

        if(time == 0)
            {
                timer.stop();
                $('div.timer').css('color','red');
                $('span.timesup').show();
                $('span.minute').hide();
                $('span#colon2').hide();
                $('span.second').hide();
                $('span.milliseconds').hide();
                $('span.hour').hide();
                $('span#colon').hide();
             $('div#timer').css('font-size','100px');
            }
        }
    );
    timer.reset(0);
    timer.mode(0);


});
</script>
</body>
</html>

截图：

HTML Jquery Timer控件本地网络

0 个答案: