SHARE
TWEET

Untitled

a guest Sep 17th, 2019 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function displayCanvas() {
  2.     var chas = +document.getElementById("hours").value;
  3.     var mins = +document.getElementById("minutes").value;
  4.     var canvasHTML = document.getElementById('myCanvas');
  5.     var contextHTML = canvasHTML.getContext('2d');
  6.     contextHTML.strokeRect(0, 0, canvasHTML.width, canvasHTML.height);
  7.  
  8.     //Расчет координат центра и радиуса часов
  9.     var radiusClock = canvasHTML.width / 2 - 10;
  10.     var xCenterClock = canvasHTML.width / 2;
  11.     var yCenterClock = canvasHTML.height / 2;
  12.  
  13.     //Очистка экрана.
  14.     contextHTML.fillStyle = "#ffffff";
  15.     contextHTML.fillRect(0, 0, canvasHTML.width, canvasHTML.height);
  16.  
  17.     //Рисуем контур часов
  18.     contextHTML.strokeStyle = "#000000";
  19.     contextHTML.lineWidth = 1;
  20.     contextHTML.beginPath();
  21.     contextHTML.arc(xCenterClock, yCenterClock, radiusClock, 0, 2 * Math.PI, true);
  22.     contextHTML.moveTo(xCenterClock, yCenterClock);
  23.     contextHTML.stroke();
  24.     contextHTML.closePath();
  25.  
  26.     //Рисуем рисочки часов
  27.     var radiusNum = radiusClock - 10; //Радиус расположения рисочек  
  28.     var radiusPoint;
  29.     for (var tm = 0; tm < 60; tm++) {
  30.         contextHTML.beginPath();
  31.         if (tm % 5 == 0) {
  32.             radiusPoint = 5;
  33.         } else {
  34.             radiusPoint = 2;
  35.         } //для выделения часовых рисочек
  36.         var xPointM = xCenterClock + radiusNum * Math.cos(-6 * tm * (Math.PI / 180) + Math.PI / 2);
  37.         var yPointM = yCenterClock - radiusNum * Math.sin(-6 * tm * (Math.PI / 180) + Math.PI / 2);
  38.         contextHTML.arc(xPointM, yPointM, radiusPoint, 0, 2 * Math.PI, true);
  39.         contextHTML.stroke();
  40.         contextHTML.closePath();
  41.     }
  42.  
  43.     //Оцифровка циферблата часов
  44.     for (var th = 1; th <= 12; th++) {
  45.         contextHTML.beginPath();
  46.         contextHTML.font = 'bold 25px sans-serif';
  47.         var xText = xCenterClock + (radiusNum - 30) * Math.cos(-30 * th * (Math.PI / 180) + Math.PI / 2);
  48.         var yText = yCenterClock - (radiusNum - 30) * Math.sin(-30 * th * (Math.PI / 180) + Math.PI / 2);
  49.         if (th <= 9) {
  50.             contextHTML.strokeText(th, xText - 5, yText + 10);
  51.         } else {
  52.             contextHTML.strokeText(th, xText - 15, yText + 10);
  53.         }
  54.         contextHTML.stroke();
  55.         contextHTML.closePath();
  56.     }
  57.  
  58.  
  59.     //Рисуем стрелки
  60.     var lengthSeconds = radiusNum - 10;
  61.     var lengthMinutes = radiusNum - 15;
  62.     var lengthHour = lengthMinutes / 1.5;
  63.     var d = new Date(); //Получаем экземпляр даты
  64.     var t_sec = 6*d.getSeconds();
  65.     var t_min = 6 * (mins + (1 / 60)); //Определяем угол для минут
  66.     var t_hour = 30 * (chas + (1 / 60) * mins); //Определяем угол для часов
  67.  
  68.  
  69.  
  70.     //Рисуем минуты
  71.     contextHTML.beginPath();
  72.     contextHTML.strokeStyle = "#000000";
  73.     contextHTML.lineWidth = 3;
  74.     contextHTML.moveTo(xCenterClock, yCenterClock);
  75.     contextHTML.lineTo(xCenterClock + lengthMinutes * Math.cos(Math.PI / 2 - t_min * (Math.PI / 180)),
  76.         yCenterClock - lengthMinutes * Math.sin(Math.PI / 2 - t_min * (Math.PI / 180)));
  77.     contextHTML.stroke();
  78.     contextHTML.closePath();
  79.  
  80.     //Рисуем часы
  81.     contextHTML.beginPath();
  82.     contextHTML.lineWidth = 5;
  83.     contextHTML.moveTo(xCenterClock, yCenterClock);
  84.     contextHTML.lineTo(xCenterClock + lengthHour * Math.cos(Math.PI / 2 - t_hour * (Math.PI / 180)),
  85.         yCenterClock - lengthHour * Math.sin(Math.PI / 2 - t_hour * (Math.PI / 180)));
  86.     contextHTML.stroke();
  87.     contextHTML.closePath();
  88.  
  89.     //Рисуем центр часов
  90.     contextHTML.beginPath();
  91.     contextHTML.strokeStyle = "#000000";
  92.     contextHTML.fillStyle = "#ffffff";
  93.     contextHTML.lineWidth = 3;
  94.     contextHTML.arc(xCenterClock, yCenterClock, 5, 0, 2 * Math.PI, true);
  95.     contextHTML.stroke();
  96.     contextHTML.fill();
  97.     contextHTML.closePath();
  98.  
  99.     return(mins, chas);
  100. }
  101.  
  102.  
  103. window.onload = function () {
  104.     window.setInterval(
  105.         function () {
  106.             var d = new Date();
  107.             displayCanvas();
  108.         }, 1000);
  109. }
  110. function result() {
  111. var chas = +document.getElementById("hours").value;
  112.     var mins = +document.getElementById("minutes").value;
  113.  
  114.  
  115.     var minutesAngle = (360 / 60) * mins;
  116.     var hoursAdd = (mins / 2);
  117.     var hoursAngle = ((360 / 12) * chas) + hoursAdd;
  118.  
  119.  
  120.     if (chas > 23 || chas < 1) {
  121.         alert("Некорректное время.");
  122.         return;
  123.     }
  124.     if (mins == 60) mins = 0;
  125.     if (mins > 60 || mins < 0) {
  126.         alert("Некорректное время.");
  127.         return;
  128.     }
  129.     if (chas > 12) {
  130.         chas -= 12;
  131.     }
  132.  
  133.     if (hoursAngle > minutesAngle) {
  134.          var minutesAngle = (360 / 60) * mins;
  135.         var hoursAdd = (mins / 2);
  136.         var hoursAngle = ((360 / 12) * chas) + hoursAdd;
  137.         var diff = hoursAngle - minutesAngle;
  138.         if (Math.abs(diff) >= 90) {
  139.             var a = 360 - diff;
  140.             alert("Разница между стрелками = " + Math.abs(a));
  141.         } else {
  142.             alert("Разница между стрелками = " + Math.abs(diff));
  143.         }
  144.     } else {
  145.         var diff = minutesAngle - hoursAngle;
  146.         if (Math.abs(diff) >= 180) {
  147.             var a = 360 - diff;
  148.             alert("Разница между стрелками = " + Math.abs(a));
  149.         } else {
  150.             alert("Разница между стрелками = " + Math.abs(diff));
  151.         }
  152.     }
  153. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top