1

Как сделать такие часы с временем Голландии?

введите сюда описание изображения

5
  • 1
    Берете, например, codepen.io/yumeeeei/pen/qRwOOb + moment.js 10 янв 2018 в 22:10
  • а как поставить время страны определенной?
    – Aslero
    10 янв 2018 в 22:14
  • @Aslero Просто, по часовому поясу.
    – user262779
    10 янв 2018 в 22:19
  • 2
    @Aslero, moment().tz("Europe/Amsterdam") 10 янв 2018 в 22:29
  • а как в этом примере установить moment().tz("Europe/Amsterdam")
    – Aslero
    11 янв 2018 в 12:49

2 ответа 2

4

Пожалуйста:

// Define the canvas
var canvas = document.getElementById("clock");
var ctx = canvas.getContext("2d");

// Define some size
var radius = canvas.height / 2;

// Center the ctx
ctx.translate(radius,radius);

// Draw the Clock every second
setInterval(drawClock, 1000);

// Draw the Clock 
function drawClock() {
	drawFace(ctx, radius);
	drawNumbers(ctx, radius);
	drawTime(ctx,radius);
	drawNose(ctx,radius);
}

// Define how to draw the Face
function drawFace(ctx, radius) {
	ctx.beginPath();
	ctx.arc(0, 0, radius, 0, 2*Math.PI);
	ctx.fillStyle = "#F8F8FF";
	ctx.fill();
}

// Define how to draw the Numbers
function drawNumbers(ctx, radius) {
	var ang;
	var num;
	
	// Define the text styles
	ctx.font = "14px 'Lato'";
	ctx.fillStyle = "black";
	ctx.textBaseline = "middle";
	ctx.textAlign = "center";
	
	// Rotate and put number and rotate back
	for(num=1; num<=12; num++) {
		ang = num * Math.PI / 6;
		ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
	}
}

// Draw the Hands depends on current time
function drawTime(ctx,radius) {
	// Get the current time
	var now = moment().tz("Europe/Amsterdam");
	var hour = now.hour();
	var minute = now.minutes();
	var second = now.seconds();
	
	// Draw the Hour Hand
	hour=hour%12;
	hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
	drawHand(ctx, hour, radius*0.4, 4, "black");
	// Draw the Minute Hand
	minute=(minute*Math.PI/(30))+(second*Math.PI/(30*60));
	drawHand(ctx, minute, radius*0.6, 2, "black");
	// Draw the Second Hand
	second=(second*Math.PI/30);
	drawHand(ctx, second, radius*0.75, 1, "#DC143C");
}

// Define how to draw the Hands
function drawHand(ctx, pos, length, width, color){
	ctx.beginPath();
	ctx.lineWidth = width;
	ctx.lineCap = "round";
	ctx.moveTo(0,0);
	ctx.rotate(pos);
	ctx.lineTo(0, -length);
	ctx.strokeStyle = color;
	ctx.stroke();
	ctx.rotate(-pos);
}

function drawNose(ctx, radius) {
	ctx.beginPath();
	ctx.arc(0, 0, radius*.08, 0, 2*Math.PI);
	ctx.fillStyle = "#DC143C";
	ctx.fill();
}
@import url("https://fonts.googleapis.com/css?family=Lato:100");
html,
body,
.flex-container {
  width: 100%;
  height: 100%;
}
.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-direction: column;
}
.caption {
  font-size: 18px;
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data.min.js"></script>

<div class="flex-container">
  <canvas id="clock" width="240" height="240"></canvas>
  <div class="caption">Время в Амстердаме</div>
</div>

2

Насколько я понял, вы не разбираетесь как это самостоятельно реализовать на JavaScript?
Впринципе, это не является проблемой используйте в таком случае библиотеку Moment.js

Также пересмотрите некоторые готовые решения на SO:

Вывод времени в javascript
Javascript. Формат времени
Как выбрать зону времени?

Что касается самостоятельной реализации таких же часов как в вашей ссылке, необходимы будут познания в canvas.

Изучите библиотеку LibCanvas . Возможно с ней вас будет намного проще реализовать, то что вы задумали.
Перечитайте статьи на habrahabr.ru , связанные с вашим вопросом.

1
  • 1
    @Aslero Если вы получили ответ который искали, в сообществе принято его принимать. Выберите тот, что вам подошел или отпишитесь, что не получается. Ваша реакция на ответы и обсуждения важна для всего сообщества. Кто-либо позже будет искать такую информацию и хорошо, если она уже есть, и оформлена достойно.
    – user262779
    11 янв 2018 в 16:05

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.