Часы HTML & JavaScript / Часы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Часы

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Laravel, WHMCS, PHP

Язык: Русский

Вес файла: 1.1 Kb

Уникальный ID: 6119

Количество символов:

Посмотрели: 647 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/61/6119.html

Прикреплён файл №2: /stuff/0-0-0-6119-20

Подбери: Домен для сайта

Скачали бесплатно: 23 раз

Прокомментировали: 0 раз

Рейтинг: 3.3 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: настраиваемые часы, Bootstrap, часы JavaScript, часы canvas, часы для сайта, Clock, часы html, часы

Поделился: BootstrapТема

Добавлено: 2024-01-10 в 21:55

Метка: 1704913751

⇄ ⇅

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<div class="d-flex justify-content-center">

<canvas id="⏰" width="300" height="300"></canvas>

</div>

<script type="application/x-javascript">
 draw(); 
 function draw() {
 var canvas = document.getElementById('⏰');
 if (canvas.getContext) {
 var c2d=canvas.getContext('2d');
 c2d.clearRect(0,0,300,300);
 var grad1=c2d.createLinearGradient(0,0,300,300);
 grad1.addColorStop(0,"#e61174");
 grad1.addColorStop(1,"#7f0632");
 var grad2=c2d.createLinearGradient(0,0,300,300);
 grad2.addColorStop(0,"#a1734f");
 grad2.addColorStop(1,"#ff1057");
 c2d.font="Bold 20px Arial";
 c2d.textBaseline="middle";
 c2d.textAlign="center";
 c2d.lineWidth=1;
 c2d.save();
 c2d.strokeStyle=grad1;
 c2d.lineWidth=10;
 c2d.beginPath();
 c2d.arc(150,150,138,0,Math.PI*2,true);
 c2d.shadowOffsetX=4;
 c2d.shadowOffsetY=4;
 c2d.shadowColor="rgba(0,0,0,0.6)";
 c2d.shadowBlur=6;
 c2d.stroke();
 c2d.restore();
 c2d.strokeStyle=grad2;
 c2d.lineWidth=10;
 c2d.beginPath();
 c2d.arc(150,150,129,0,Math.PI*2,true);
 c2d.stroke();
 c2d.strokeStyle="#222";
 c2d.save();
 c2d.translate(150,150);
 for (i=1;i<=60;i++) {
 ang=Math.PI/30*i;
 sang=Math.sin(ang);
 cang=Math.cos(ang);
 if (i % 5 == 0) {
 c2d.lineWidth=8;
 sx=sang*95;
 sy=cang*-95;
 ex=sang*120;
 ey=cang*-120;
 nx=sang*80;
 ny=cang*-80;
 c2d.fillText(i/5,nx,ny);
 } else {
 c2d.lineWidth=2;
 sx=sang*110;
 sy=cang*110;
 ex=sang*120;
 ey=cang*120;
 }
 c2d.beginPath();
 c2d.moveTo(sx,sy);
 c2d.lineTo(ex,ey);
 c2d.stroke();
 }
 var ampm="❄";
 var now=new Date();
 var hrs=now.getHours();
 var min=now.getMinutes();
 var sec=now.getSeconds();
 c2d.strokeStyle="#000";
 if (hrs>=12) ampm="❄";
 c2d.lineWidth=1;
 c2d.strokeRect(21,-14,44,27);
 c2d.fillText(ampm,43,0); 
 c2d.lineWidth=6;
 c2d.save();
 c2d.rotate(Math.PI/6*(hrs+(min/60)+(sec/3600)));
 c2d.beginPath();
 c2d.moveTo(0,10);
 c2d.lineTo(0,-60);
 c2d.stroke();
 c2d.restore();
 c2d.save();
 c2d.rotate(Math.PI/30*(min+(sec/60)));
 c2d.beginPath();
 c2d.moveTo(0,20);
 c2d.lineTo(0,-110);
 c2d.stroke();
 c2d.restore();
 c2d.save();
 c2d.rotate(Math.PI/30*sec);
 c2d.strokeStyle="#E33";
 c2d.beginPath();
 c2d.moveTo(0,20);
 c2d.lineTo(0,-110);
 c2d.stroke();
 c2d.restore();
 c2d.restore();
 setTimeout(draw,1000);
 }
 }
</script>