How to display the time of this counter in the title bar of the window?

0

Follow the timer file:

link

It shows the time in the input, but I wanted it to also show in the title bar of the browser, even minimized I want the time to be shown in the window title dynamically (updated from time to time in the case, every second)

I think I have to do something like:

document.title = Stopwatch time;

But how do I get the time shown in the input?

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
  <link rel="shortcut icon" href="icone.png" type="image/x-icon" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Cronômetro</title>


    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div   style="background: #00662e; color: white; padding: 20px; text-align: center;"> <strong> Cronômetro </strong> </div>
    <p><br/><br/><br/></p>
    <div class="container">

            <div class="row">
                <div class="col-md-3">
                    <input name="timer" class="form-control timer" placeholder="0 sec" type="text">
                </div>
                <div class="col-md-9">
                    <button class="btn btn-success start-timer-btn">Iniciar</button>
                    <button class="btn btn-success resume-timer-btn hidden">Retornar</button>
                    <button class="btn pause-timer-btn hidden">Pausar</button>
                    <button class="btn btn-danger remove-timer-btn hidden">Resetar</button>
                </div>
            </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--><scriptsrc="timer.jquery.min.js"></script>
    <script>
    (function(){
            var hasTimer = false;
            // Init timer start
            $('.start-timer-btn').on('click', function() {
                hasTimer = true;
                $('.timer').timer({
                    editable: true
                });
                $(this).addClass('hidden');
                $('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
            });

            // Init timer resume    
            $('.resume-timer-btn').on('click', function() {
                $('.timer').timer('resume');
                $(this).addClass('hidden');
                $('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
            });


            // Init timer pause
            $('.pause-timer-btn').on('click', function() {
                $('.timer').timer('pause');
                $(this).addClass('hidden');
                $('.resume-timer-btn').removeClass('hidden');
            });

            // Remove timer
            $('.remove-timer-btn').on('click', function() {
                hasTimer = false;
                $('.timer').timer('remove');
                $(this).addClass('hidden');
                $('.start-timer-btn').removeClass('hidden');
                $('.pause-timer-btn, .resume-timer-btn').addClass('hidden');
            });

            // Additional focus event for this demo
            $('.timer').on('focus', function() {
                if(hasTimer) {
                    $('.pause-timer-btn').addClass('hidden');
                    $('.resume-timer-btn').removeClass('hidden');
                }
            });

            // Additional blur event for this demo
            $('.timer').on('blur', function() {
                if(hasTimer) {
                    $('.pause-timer-btn').removeClass('hidden');
                    $('.resume-timer-btn').addClass('hidden');
                }
            });
    })();
    </script>
  </body>
</html>
    
asked by anonymous 14.10.2015 / 17:55

1 answer

1

Just put a set interval every 1 second by picking up the value in the input timer.

setInterval(function(){ document.title = $('.timer').val(); }, 1000);
    
14.10.2015 / 18:31