Форум программистов [Powered by Invision Power Board]

Код

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      
      var selected_elements = 0;
      
      $('#generate').click(function() {
        var error = null;
        var size = parseInt($('#size').val());
        var limit = parseInt($('#limit').val());
        var d_rest = size % 10;
        
        selected_elements = 0;
        $('#result').html('');
        
        if ( ! size || ! limit) {
          alert('Size or Limit is not integer');
          return;
        } else if (size < limit) {
          alert('Size can not be less than Limit');
          return;
        }
        
        var matrix = '<div id="wrapper">';
        for (var i = 0; i < size; i++) {
          matrix += '<div id="element-' + (i + 1) + '" colored="0">' + (i + 1) + '</div>';
        }
        
        if (d_rest > 0) {
          d_rest = 10 - d_rest;
          for (var j = 0; j < d_rest; j++) {
            matrix += '<div>&nbsp;</div>';
          }
        }
        matrix += '</div>';
        
        $('#work-area').html(matrix);
        
        $('#controls').show();
        $('#wrapper').click(function(e) {
          
          var color_select = '#008000';
          var color_unselect = '#FFC0C0';
          var active = $(e.target);
          if ( ! $(active).attr('id')) return;
          
          if ($(active).attr('colored') == 0 && selected_elements != limit) {
            $(active).css('background', color_select).attr('colored', 1);
            selected_elements++;
          } else if ($(active).attr('colored') == 1) {
            $(active).css('background', color_unselect).attr('colored', 0);
            selected_elements--;
          }
          
        });
      });
      
      $('#check-button').live('click', function() {
        var selected_elems = $('#wrapper div');
        var len = selected_elems.length;
        var result = '';
        
        for (var i = 0; i < len; i++) {
          if ($(selected_elems[i]).attr('colored') == 1) {
            result += $(selected_elems[i]).text() + ', ';
          }
        }
        if (result != '') {
          result = result.substring(0, result.length - 2);
        } else {
          result = 'Nothing selected';
        }
        
        $('#result').html(result);
      });
        
      $('#cancel-button').live('click', function() {
        if (confirm('It will remove your progress. Are you sure?')) {
          $('#wrapper').die('click');
          selected_elements = 0;
          $('#size').val('');
          $('#limit').val('');
          $('#result').html('');
          $('#work-area').html('');
          $('#controls').hide();
        }
      });
      
    });
  </script>
  <style>
    #work-area {
      margin: 20px;
      width: 570px;
    }
    
    #controls {
      display: none;
      width: 570px;
      margin: 20px;
      text-align: center;
    }
    
    #wrapper div {
      margin: 0 5px 5px 0;
      float: left;
      width: 50px;
      height: 35px;
      background: #FFC0C0;
      border: solid 1px #000000;
      text-align: center;
      padding-top: 15px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <div>Size: <input type="text" id="size" /></div>
    <div>Limit: <input type="text" id="limit" /></div>
    <div><input type="button" id="generate" value="Generate" /></div>
    <div id="result"></div>
  </div>
  
  <div id="work-area"></div>
  <div id="controls">
    <input type="button" id="check-button" value="Check" />
    <input type="button" id="cancel-button" value="Cancel" />
  </div>
  
</body>
</html>