Bladeren bron

Модуль 2 (version 2.0)

Oleg 6 jaren geleden
bovenliggende
commit
1fe6807387
2 gewijzigde bestanden met toevoegingen van 59 en 33 verwijderingen
  1. 6 3
      module2/index.html
  2. 53 30
      module2/script.js

+ 6 - 3
module2/index.html

@@ -3,12 +3,12 @@
 <head>
 	<meta charset="UTF-8">
 	<title>document</title>
-	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-	<script type="text/javascript" src="script.js"></script>
+	
 </head>
 <body>
 
-	<div id="diagramma"></div>
+	<canvas id="diagram1"></canvas><br>
+	<canvas id="diagram2"></canvas>
 	<div>
 		<table>
 			<tbody>
@@ -88,5 +88,8 @@
 			</tbody>
 		</table>
 	</div>
+
+	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+	<script type="text/javascript" src="script.js"></script>
 </body>
 </html>

+ 53 - 30
module2/script.js

@@ -36,34 +36,26 @@ var arr1 = ['Привет', 'как', 'дела?'],
 
 function newSplice(arr, index, deleteCount, ...elements) {
 
-	if (elements.length == 0) {
+	for(var i = 0; i < arr.length; i++) {          // Удаление deleteCount элементов с позиции index
 
-		for(var i = 0; i < arr.length; i++) {
-
-			if (arr.indexOf(arr[i]) < index || arr.indexOf(arr[i]) > index + deleteCount - 1) {
+		if (arr.indexOf(arr[i]) < index || arr.indexOf(arr[i]) > index + deleteCount - 1) {
 
-				arr2[arr2.length] = arr[i];
-			}
-		};
-
-		return arr2;
-	} else {
+			arr2[arr2.length] = arr[i];
+		}
+	};
 
-		var c = 0;
-		for(var i = 0; i < arr.length; i++) {
+	if (elements.length !== 0) {                 // Добавление элементов elements если они были заданы
 
-			if (i >= index && i <= index+deleteCount-1) {
+		for(var i = 0; i < elements.length; i++) {
 
-				arr[i] = elements[c++];
-			}
+			arr2[i+index] = elements[i];
 		}
 	}
-
-	return arr;
-
+	
+	return arr2;
 };
 
-newSplice(arr1, 1, 1);
+newSplice(arr1, 1, 1, "все", "ок.", "Как", "сам?");
 
 // 3. Напишите функцию, которая возвращает сумму всех чисел, 
 // переданных в качестве аргументов, число которых не ограничено. 
@@ -83,35 +75,70 @@ function sum() {
 
         return arr.reduce(function (sum, elem) {
          
-            if ( isNumber(elem) ) sum += +elem;
-            else if ( Array.isArray(elem) ) sum += sumRecursion(elem);
+            if ( isNumber(elem) ) {
+
+            	sum += +elem;
+
+            } else 
+
+            if ( Array.isArray(elem) ) {
+
+            	sum += sumRecursion(elem);
+
+            }
+
             return sum;
+
         }, 0); 
+
     }
     return sumRecursion(arr);
 }
+
 function isNumber(val) {
+
     return !isNaN(parseFloat(val)) && isFinite(val);
 }
+
 var sum = sum(1, '1', 'one', [2, '2', 'two']);
 console.log( sum );
 
 
+
+
+
 // 4. Напишите функцию, которая рисует в указанном HTML-контейнере 
 // диаграмму из данных, представляющих из себя массив объектов: 
 // каждый объект имеет свойства color и value, означающих соответственно 
 // цвет столбца и его высоту.
 
-function buildDiagram(obj, diag) {
 
 
+function buildDiagram(arr, id) {
+
+	var canvas = document.getElementById(id),
+		ctx = canvas.getContext("2d"),
+		h = canvas.clientHeight,
+		w = 40;
+
+	for(var i = 0; i < arr.length; i++) {
+
+		ctx.fillStyle = arr[i].color;
+		ctx.fillRect(i*w, h - arr[i].value, w, arr[i].value);
+	}
+	
 };
 
 
-var data1 = [ {color: '#DE9797', value: 70}];
-buildDiagram(data1, '#diagram1');
-var data2 = [ {color: '#97DEDA', value: 20}];
-buildDiagram(data2, '#diagram2');
+var data1 = [ {color: '#DE9797', value: 70}, {color: 'red', value: 40}, {color: 'blue', value: 90}, {color: 'yellow', value: 10}, {color: 'green', value: 57}, {color: 'orange', value: 85},];
+buildDiagram(data1, 'diagram1');
+
+var data2 = [ {color: '#DE9797', value: 70}, {color: 'red', value: 40}, {color: 'blue', value: 90}, {color: 'yellow', value: 10}, {color: 'green', value: 57}, {color: 'orange', value: 85},];
+buildDiagram(data2, 'diagram2');
+
+
+
+
 
 
 // 5. Напишите функцию, которая изображает в теге HTML картинку 
@@ -146,12 +173,8 @@ $(document).ready(function() {
 
 	function draw(arr) {
 
-		// arr = [][];
-
 		for(var i = 0; i < arr.length; i++) {
 		
-			// var tr = document.querySelector("tr:nth-child("+i+")");
-
 			arr[i].forEach(function(item) {
 				
 				$("tr:nth-child("+ +(i+1)+") > td:nth-child("+item+")").css({