Форум

piraids · #1 (**permalink**) 30.06.2016, 16:04

Буду благодарен за помощь в понимании замыкания не стандартного

собственно хочу написать простой скрипт часов

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(document).ready(function(){

jQuery.fn.digitalWatch = function() {
  
  var el = $(this),
  		clock = this,
  		init = function(){
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
        el.html( hours + ":" + minutes + ":" + seconds );
      };
  
  
      init();
  
}

$('#clock').digitalWatch();

});
  </script>
</head>

<body>
<div id="clock"></div>
</body>
</html>

пытаюсь его заставить работать, но пока что тщетно

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(document).ready(function(){

jQuery.fn.digitalWatch = function() {
  
  var el = $(this),
  		clock = this,
  		init = function(){
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
        el.html( hours + ":" + minutes + ":" + seconds );
      };
  
  
  	setTimeout(function(){
    	(function(newClock){newClock.init()})(clock);
    }, 1000);
  
}

$('#clock').digitalWatch();

});
  </script>
</head>

<body>
<div id="clock"></div>
</body>
</html>

piraids · #2 (**permalink**) 30.06.2016, 16:15

все решил проблему так:

jQuery.fn.digitalWatch = function() {
  
  var el = $(this),
  		clock = this,
  		init = function(){
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        if (hours < 10) hours = "0" + hours;
        if (minutes < 10) minutes = "0" + minutes;
        if (seconds < 10) seconds = "0" + seconds;
        el.html( hours + ":" + minutes + ":" + seconds );
        
        setTimeout(function(){
          init();
        }, 1000);
      };
  
  
  	init();
    
  
}

$('#clock').digitalWatch();

рони · #3 (**permalink**) 30.06.2016, 17:10

piraids,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    jQuery.fn.digitalWatch = function() {
        function formatTime(num)
      {
         return ("0" + num).substr(-2)
      }
        this.each(function(i, el) {
            var el = $(el),
                init = function() {
                    var date = new Date,
                        hours = date.getHours(),
                        minutes = date.getMinutes(),
                        seconds = date.getSeconds();
                    hours = formatTime(hours);
                    minutes = formatTime(minutes);
                    seconds = formatTime(seconds);
                    el.html(hours + ":" + minutes + ":" + seconds);
                    setTimeout(init, 1000)
                };
            init()
        });
        return this
    };
    $(".clock").digitalWatch().css({
        color: "red"
    })
});
  </script>
</head>

<body>
<div class="clock"></div> <div class="clock"></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript