Zegar na stronę www

Trochę bardziej zaawansowany zegar na stronę, 4 w 1. Zegarek analogowy i cyfrowy, datownik oraz strefy czasowe.

Poniżej znajdziecie kody do wstawienia na stronie.

Trochę bardziej rozbudowany zegar

Godz

Min

Sek

Zmień strefę czasową

Jak wstawić zegar na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Tworzymy odpowiednie pliki:

index.html
style.css
script.js

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<!-- META ============================================= -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title> Rozbudowany zegar analogowy </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/analog-clock.css">
</head>
<body>
<div class="clock-container">
  <div class="clock-body">
    <div id="clock-main">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="clock-main">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="clock-main">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="clock-main">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="clock-main">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="clock-content">
      <div id="hour-hand"> <span class="anArrow close"></span> </div>
      <div id="minute-hand"> <span class="anArrow closer"></span> </div>
      <div id="second-hand" class="d-red"> <span class="anArrow closest"></span> </div>
    </div>
    <div id="clock-vertical" class="clock-label w3-serif"> <span>XII</span> <span>VI</span> </div>
    <div id="clock-horizontal" class="clock-label w3-serif"> <span>III</span> <span>IX</span> </div>
  </div>
</div>
<div style="padding: 10px;width: 300px">
  <div class="flexMe">
    <div class="carda blue rounded"> <span id="clock-hour"></span> <span class="red rounded">Godz</span> </div>
    <div class="carda blue rounded"> <span id="clock-minute"></span> <span class="red rounded">Min</span> </div>
    <div class="carda red rounded"> <span id="clock-second"></span> <span class="blue rounded">Sek</span> </div>
  </div>
  <div class="carda rounded" style="margin-top:5px;padding:5px;text-align: center;width: 100%;color:#000;font-weight: bold;font-size: 1.5em"> <span class="not-span specx" id="clock-city"></span> </div>
  <div class="carda red rounded" style="margin-top:5px;padding:5px;text-align: center;width: 100%"> <span class="not-span" id="clock-day"></span> <span class="not-span" id="clock-date"></span> <span class="not-span" id="clock-month"></span> <span class="not-span" id="clock-year"></span> </div>
</div>
<div class="w3-padding-24 w3-block">
  <div class="w3-bar-block" style="max-width: 300px;margin:0 auto">
    <div class="w3-bar-item">
      <h4>Zmień strefę czasową</h4>
    </div>
    <div class="w3-bar-item">
      <select class="w3-input" id="selectCity" style="display: none;">
      </select>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/analog-clock.js"></script>
</body>
</html>

style.css

/* @import 'styles.css'; */ :root {
  --bg-clock: #ecf0f3;
  --bg-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
  --bg-shadow-1: inset 18px 18px 30px 2px #d1d9e6, inset -18px -18px 30px 2px #fff, 0 0.234375rem 2.1875rem #D1D4E6, inset 0 0.234375rem 2.1875rem rgba(4, 9, 20, .2);
  --darkblue: #18191b;
  --white-light: #ecf0f3;
  --clock-dimensions: 300px;
  --clock-padding: 29px;
  --clock-font-size: calc(2em - 10px);
}
*, *::before, *::after {
  box-sizing: border-box;
  user-select: none; /* Standard syntax */
}
body {
  background: var(--bg-clock);
  overflow-x: hidden;
}
body > div {
  margin: 0 auto;
}
.clock-container {
  width: var(--clock-dimensions);
  height: var(--clock-dimensions);
  padding: var(--clock-padding);
  background: var(--bg-clock);
  background-color: #ecf0f3;
}
.clock-body {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border: 1px double gray;
  background: transparent;
  box-shadow: 18px 18px 30px 2px #d1d9e6, -18px -18px 30px 2px #fff;
  position: relative;
}
#clock-main {
  position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: 95%;
  height: 95%;
  background-color: none;
  border-radius: 50%;
  border: 1px solid var(--darkblue);
}
#clock-main:nth-child(1) > div {
  height: 2.5px;
  background-color: var(--darkblue);
  position: absolute;
  top: calc(50% - 1.5px);
}
#clock-main > div {
  height: 1px;
  width: 100%;
  position: absolute;
  top: calc(50% - 0.5px);
  background-color: var(--darkblue);
}
#clock-main > div:nth-child(1) {
  transform: rotate(0deg);
}
#clock-main > div:nth-child(2) {
  transform: rotate(30deg);
}
#clock-main > div:nth-child(3) {
  transform: rotate(60deg);
}
#clock-main > div:nth-child(4) {
  transform: rotate(90deg);
}
#clock-main > div:nth-child(5) {
  transform: rotate(120deg);
}
#clock-main > div:nth-child(6) {
  transform: rotate(150deg);
}
#clock-main:nth-child(2) {
  transform: rotate(6deg) !important;
}
#clock-main:nth-child(3) {
  transform: rotate(12deg) !important;
}
#clock-main:nth-child(4) {
  transform: rotate(18deg) !important;
}
#clock-main:nth-child(5) {
  transform: rotate(24deg) !important;
}
.clock-content {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  box-shadow: var(--bg-shadow-1);
}
.clock-content::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #d23737;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.clock-content > div {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: bottom;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  z-index: 1;
  opacity: .8;
}
#hour-hand {
  width: 4px;
  height: 38%;
  background-color: var(--darkblue);
}
#minute-hand {
  width: 2px;
  height: 45%;
  background-color: var(--darkblue);
}
#second-hand {
  width: 1.25px;
  height: 50%;
  background-color: #d23737;
}
/* arrows/ pointers */
.anArrow {
  position: absolute;
  padding: 0;
  border: 0px solid;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.anArrow.close {
  top: -20%;
  left: -100%;
  border-bottom-color: var(--darkblue);
}
.anArrow.closer {
  top: -40%;
  left: -300%;
  border-bottom-color: var(--darkblue);
}
.anArrow.closest {
  top: -10%;
  left: -500%;
  border-bottom-color: #d23737;
}
.clock-label {
  position: absolute;
  transform-origin: 0% 50%;
  border-radius: 100px;
  transform: rotate(-90deg);
  z-index: 0.5; /* below pointers */
  opacity: .8;
  height: 20px;
  width: 100%;
  background-color: transparent;
  top: calc(50% - 10px);
  transform-origin: 50% 50% !important;
}
#clock-vertical, #clock-horizontal > span {
  display: inline-block;
  text-align: center;
  padding: 1px;
  font-size: var(--clock-font-size);
}
#clock-vertical > span {
  transform: rotate(90deg);
}
#clock-vertical > span:nth-child(1) {
  float: right;
  margin-right: calc(1.5em - 10px);
}
#clock-vertical > span:nth-child(2) {
  float: left;
  margin-left: calc(1.5em - 10px);
}
#clock-horizontal {
  height: 15px;
  width: 100%;
  background-color: transparent;
  top: calc(50% - 15px);
  transform: rotate(0deg) !important;
  transform-origin: 50% 50% !important;
}
#clock-horizontal > span:nth-child(1) {
  float: right;
  margin-right: calc(1.5em - 12px);
}
#clock-horizontal > span:nth-child(2) {
  float: left;
  margin-left: calc(1.5em - 12px);
}
/* 3d buttons */
.blue {
  outline: none;
  border-radius: 5px;
  border: none;
  border-bottom: 3px solid #1c7acc;
  box-shadow: 0px 2px 2px 1px #1f5789;
  background-color: dodgerblue;
  color: #fff;
  font-size: 1.2em;
}
.red {
  outline: none;
  border-radius: 5px;
  border: none;
  border-bottom: 3px solid #9b1d1d;
  box-shadow: 0px 2px 2px 1px #641616;
  background-color: #d23737;
  color: #fff;
  font-size: 1.2em;
}
.btn-block {
  display: block;
  margin: 5px auto;
  width: 75%;
}
/* cards */
.carda {
  display: inline-block;
  padding: 7.5px 5px;
  color: #fff;
}
.carda.blue, .carda > span.blue {
  background-color: #2196F3 !important;
}
.carda.red, .carda > span.red {
  background-color: #e91e63 !important;
}
.carda > span:not(.not-span) {
  display: block;
  padding: 5px;
}
.carda > span:not(.not-span):first-child {
  font-size: 1.5em;
  font-family: "Agency FB", sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.carda > span:not(.not-span):last-child, .not-span {
  font-size: .75em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.not-span {
  font-size: 1em !important;
}
.rounded {
  border-radius: 5px;
}
.flexMe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100% !important;
}
.flexMe div {
  width: calc(100% / 3);
  margin: 0 5px;
  text-align: center;
}
/* composite */
span.blue.rounded {
  box-shadow: none !important;
  border: none !important;
}
span.red.rounded {
  box-shadow: none !important;
  border: none !important;
}
/* dark mode */
html.clock-darkmode, .clock-darkmode body, .clock-darkmode .clock-content {
  background: #111;
  color: #ff974a;
}
.clock-darkmode {
  --bg-clock: transparent;
  --bg-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);
  --bg-shadow-1: inset 0 3px 8px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);
  --darkblue: rgba(226, 185, 155, .5);
  --white-light: transparent;
}
.clock-darkmode .w3-input, .clock-darkmode .w3-hover-none:hover, .clock-darkmode .w3-hover-white:hover {
  color: #ff974a !important;
}
.clock-darkmode .w3-border {
  border-color: #ff974a !important;
}
.clock-darkmode .w3-hover-white:hover {
  background-color: rgba(0, 0, 0, .5) !important;
  opacity: .8;
}
.clock-darkmode .clock-container, .clock-darkmode .w3-input {
  background: transparent !important;
}
.clock-darkmode .clock-body {
  box-shadow: 0 3px 18px rgba(0, 0, 0, .7) !important;
}
.clock-darkmode .carda {
  opacity: .8 !important;
}
.clock-darkmode .carda .specx {
  color: #fff !important;
  font-weight: bold;
}

script.js

// JavaScript Document
// www.skrip.pl
let startClock = function (_options) {
  // Days and Months store
  let _days = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'];
  let _months = ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'];
  // get local time
  let _local_time = new Date();
  // date timezone in HOURS => not sure if a remainder exists
  let _local_timezone = -(_local_time.getTimezoneOffset() / 60);
  // date time in LONDON where GMT +0000
  let _local_time_london = 0;
  // check timezone on number line
  // To get local time in London, 
  if (_local_timezone > 0) {
    // time in London 
    _local_time_london = _local_time.getTime() - (_local_timezone * 60 * 60 * 1000);
  } else if (_local_timezone < 0) {
    // time in London
    _local_time_london = _local_time.getTime() + (_local_timezone * 60 * 60 * 1000);
  } else {
    // time in London
    _local_time_london = _local_time.getTime();
  }
  // Now let's format the Time
  // from London time to any time by
  // adding timezone given in the OPTIONS 

  // ****OPTIONS**** //

  // timezone in GMT format e.g; GMT+0200, we take & need +2
  let _option_timezone = _options.timezone || _local_timezone; // local timezone as fallback

  // Containers for Time Display 
  // Timezone Name
  let _option_cityDisplay = (_options.displayPrint && _options.displayPrint.city) ? _options.displayPrint.city : null;
  // hour
  let _option_hourDisplay = (_options.displayPrint && _options.displayPrint.hour) ? _options.displayPrint.hour : null;
  // minute
  let _option_minuteDisplay = (_options.displayPrint && _options.displayPrint.minute) ? _options.displayPrint.minute : null;
  // second
  let _option_secondDisplay = (_options.displayPrint && _options.displayPrint.second) ? _options.displayPrint.second : null;
  // day
  let _option_dayDisplay = (_options.displayPrint && _options.displayPrint.day) ? _options.displayPrint.day : null;
  // date
  let _option_dateDisplay = (_options.displayPrint && _options.displayPrint.date) ? _options.displayPrint.date : null;
  // month
  let _option_monthDisplay = (_options.displayPrint && _options.displayPrint.month) ? _options.displayPrint.month : null;
  // year
  let _option_yearDisplay = (_options.displayPrint && _options.displayPrint.year) ? _options.displayPrint.year : null;

  // Containers for Action Hands
  // hour hand
  let _option_hourHand = (_options.actionHand && _options.actionHand.hour) ? _options.actionHand.hour : null;
  // minute hand
  let _option_minuteHand = (_options.actionHand && _options.actionHand.minute) ? _options.actionHand.minute : null;
  // second hand
  let _option_secondHand = (_options.actionHand && _options.actionHand.second) ? _options.actionHand.second : null;

  // Timezones with their names
  // Each should be identical
  // valid timezone inputs
  let _option_valid_zones = (_options.timeZones && _options.timeZones.length != 0) ? _options.timeZones : null;

  // ****OPTIONS**** //

  // Which City & Timezone
  let _whichCity = 'City';
  if (_option_valid_zones) {
    for (let i = 0; i < _option_valid_zones.length; i++) {
      if (_option_valid_zones[i].offset == _option_timezone) {
        _whichCity = _option_valid_zones[i].name;
        //console.log('City : '+_valid_timezone[i].name);
        break;
      }
    }
  }

  // OVERWRITE the local hours 
  // New datetime in the given timezone / local timezone as default
  // We create new Date Object with London time plus the timezone offset( changed to milliseconds ) 
  let _new_correct_time = new Date(_local_time_london + (Number(_option_timezone) * 60 * 60 * 1000));
  // Now, its a new time/date 
  // so we fetch the constraints 
  // date string
  const _new_correct_year = _new_correct_time.getFullYear();
  const _new_correct_month = _new_correct_time.getMonth();
  const _new_correct_date = _new_correct_time.getDate();
  const _new_correct_day = _new_correct_time.getDay();
  // date time
  const _new_correct_second = _new_correct_time.getSeconds();
  const _new_correct_minute = _new_correct_time.getMinutes();
  let _new_correct_hour = _new_correct_time.getHours();


  // With the correct time now,
  // calculate the TRANSFORMATION of each hand
  const secondsFraction = _new_correct_second / 60;
  const minutesFraction = (secondsFraction + _new_correct_minute) / 60;
  const hoursFraction = (minutesFraction + _new_correct_hour) / 12;

  // Prepare to print/apply   
  // hands rotation
  let _second_rotation = secondsFraction * 360;
  let _minute_rotation = minutesFraction * 360;
  let _hour_rotation = hoursFraction * 360;
  // date string
  let _print_date = _new_correct_date;
  let _print_day = _days[_new_correct_day];
  let _print_month = _months[_new_correct_month];
  let _print_year = _new_correct_year;
  // timezone name
  let _print_city = _whichCity;
  // date time
  let _print_second = _new_correct_second;
  let _print_minute = _new_correct_minute;
  let _print_hour = _new_correct_hour;


  // Apply the Action EFFECT on the hands
  if (_option_secondHand) {
    document.querySelector(_option_secondHand).style.transform = `rotate(${_second_rotation}deg)`;
  }
  if (_option_minuteHand) {
    document.querySelector(_option_minuteHand).style.transform = `rotate(${_minute_rotation}deg)`;
  }
  if (_option_hourHand) {
    document.querySelector(_option_hourHand).style.transform = `rotate(${_hour_rotation}deg)`;
  }

  // Display Independent values
  if (_option_secondDisplay) {
    document.querySelector(_option_secondDisplay).innerHTML = _new_correct_second < 10 ? '0' + _new_correct_second : _new_correct_second;
  }
  if (_option_minuteDisplay) {
    document.querySelector(_option_minuteDisplay).innerHTML = _new_correct_minute < 10 ? '0' + _new_correct_minute : _new_correct_minute;
  }
  if (_option_hourDisplay) {
    document.querySelector(_option_hourDisplay).innerHTML = _new_correct_hour < 10 ? '0' + _new_correct_hour : _new_correct_hour;
  }
  if (_option_dayDisplay) {
    document.querySelector(_option_dayDisplay).innerHTML = _print_day + ', ';
  }
  if (_option_dateDisplay) {
    document.querySelector(_option_dateDisplay).innerHTML = _print_date;
  }
  if (_option_monthDisplay) {
    document.querySelector(_option_monthDisplay).innerHTML = _print_month;
  }
  if (_option_yearDisplay) {
    document.querySelector(_option_yearDisplay).innerHTML = _print_year;
  }
  if (_option_cityDisplay) {
    document.querySelector(_option_cityDisplay).innerHTML = _print_city;
  }
}

// Running 
let _some_time_zones = [{
    name: 'Samoa',
    offset: -11,
    gmt: '-11:00'
  },
  {
    name: 'Honolulu',
    offset: -10,
    gmt: '-10:00'
  },
  {
    name: 'Anchorage',
    offset: -9,
    gmt: '-09:00'
  },
  {
    name: 'Los Angeles',
    offset: -8,
    gmt: '-08:00'
  },
  {
    name: 'Phoenix',
    offset: -7,
    gmt: '-07:00'
  },
  {
    name: 'Chicago',
    offset: -6,
    gmt: '-06:00'
  },
  {
    name: 'New York',
    offset: -5,
    gmt: '-05:00'
  },
  {
    name: 'Santiago',
    offset: -4,
    gmt: '-04:00'
  },
  {
    name: 'Bermuda',
    offset: -3,
    gmt: '-03:00'
  },
  {
    name: 'Central Atlantic',
    offset: -2,
    gmt: '-02:00'
  },
  {
    name: 'Cape Verde',
    offset: -1,
    gmt: '-01:00'
  },
  {
    name: 'London',
    offset: '0',
    gmt: '+00:00'
  },
  {
    name: 'Łódź',
    offset: 1,
    gmt: '+01:00'
  },
  {
    name: 'Cape Town',
    offset: 2,
    gmt: '+02:00'
  },
  {
    name: 'Nairobi',
    offset: 3,
    gmt: '+03:00'
  },
  {
    name: 'Abu Dhabi',
    offset: 4,
    gmt: '+04:00'
  },
  {
    name: 'Kabul',
    offset: 4.5,
    gmt: '+04:30'
  },
  {
    name: 'Islamabad',
    offset: 5,
    gmt: '+05:00'
  },
  {
    name: 'Mumbai',
    offset: 5.5,
    gmt: '+05:30'
  },
  {
    name: 'Dhaka',
    offset: 6,
    gmt: '+06:00'
  },
  {
    name: 'Bangkok',
    offset: 7,
    gmt: '+07:00'
  },
  {
    name: 'Beijing',
    offset: 8,
    gmt: '+08:00'
  },
  {
    name: 'Tokyo',
    offset: 9,
    gmt: '+09:00'
  },
  {
    name: 'Melbourne',
    offset: 10,
    gmt: '+10:00'
  },
  {
    name: 'Solomon',
    offset: 11,
    gmt: '+11:00'
  },
  {
    name: 'South Pole',
    offset: 12,
    gmt: '+12:00'
  },
  {
    name: 'Tonga',
    offset: 13,
    gmt: '+13:00'
  },
  {
    name: 'Apia',
    offset: 14,
    gmt: '+14:00'
  }
];

// but first
let needOptions = {
  timezone: null,
  timeZones: _some_time_zones,
  displayPrint: {
    hour: '#clock-hour',
    minute: '#clock-minute',
    second: '#clock-second',
    day: '#clock-day',
    date: '#clock-date',
    month: '#clock-month',
    year: '#clock-year',
    city: '#clock-city'
  },
  actionHand: {
    hour: '#hour-hand',
    minute: '#minute-hand',
    second: '#second-hand'
  }
};

// Now running...
setInterval(function () {
  startClock(needOptions || {});
}, 1000);
// ADDINS


/* change timezones with a select */
let _selectCity = document.querySelector('#selectCity');
if (_selectCity) {
  let myDateLoco = -(new Date().getTimezoneOffset()) / 60;
  myDateLoco = Math.floor(myDateLoco);
  for (let i = 0; i < _some_time_zones.length; i++) {
    let _addin1 = ' ';
    if (myDateLoco === _some_time_zones[i].offset) {
      _addin1 = " selected='true' ";
    }
    _selectCity.innerHTML += `
                <optgroup>
                    <option disabled>GMT ` + _some_time_zones[i].gmt + `</option>
                    <option ` + _addin1 + ` value='` + _some_time_zones[i].offset + `'>` + _some_time_zones[i].name + `</option>
                </optgroup>
            `;
  }

  _selectCity.addEventListener('change', function () {
    // CHANGES clock timezone  and so City name
    needOptions.timezone = _selectCity.value;
  });
}


// on load
window.addEventListener('load', function () {
  // body...
  if (_selectCity) {
    _selectCity.style.display = 'block';
  }
})


/* FullScreen */
let toggleFullScreen = function () {
  if (
    (document.fullScreenElement && document.fullScreenElement !== null)
    ||
    // alternative standard method
    (!document.mozFullScreen && !document.webkitIsFullScreen)
  ) { // current working methods
    if (document.documentElement.requestFullScreen) {
      document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (document.documentElement.oRequestFullScreen) {
      document.documentElement.oRequestFullScreen();
    } else if (document.documentElement.msRequestFullScreen) {
      document.documentElement.msRequestFullScreen();
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.oCancelFullScreen) {
      document.oCancelFullScreen();
    } else if (document.msCancelFullScreen) {
      document.msCancelFullScreen();
    }
  }
};

// Fullscreen handler
let _fullScreenBtn = document.getElementById('fullScreenBtn');
if (_fullScreenBtn) {
  _fullScreenBtn.addEventListener('click', function () {
    toggleFullScreen();
  });
}

/* Dark Mode / Light Mode */
let _htmlTag = document.documentElement;
/*
    using body gave me a bug on my Android, 
    to fix that i used html tag and
    assign the darkmode class to html 

    LIKE =>

        html.calc-darkmode,
        .calc-darkmode body 
        {
            background: #111;
            color: #ff974a;
        }

    ...
*/
let _htmlBody = document.body;
let _toggleDLMode = document.getElementById('darkModeBtn');
if (_toggleDLMode) {
  _toggleDLMode.addEventListener('click', function () {
    _htmlTag.classList.toggle('clock-darkmode');
    if (_htmlTag.classList.contains('clock-darkmode')) {
      // console.log('Dark Mode');
      _toggleDLMode.innerHTML = '<i class="fa fa-moon"></i><span class="w3-hide-small">&nbsp;&nbsp;Dark Mode</span>';
      //document.body.classList.replace('calc-darkmode', 'w3-light-grey');
      if (localStorage) {
        try {
          localStorage.setItem("clock-dark-mode", "true");
        } catch (error) {
          //console.log('Enable cookies in your browser');
        }
      }
    } else if (_htmlTag.classList.contains('clock-lightmode')) {
      // console.log('Light Mode');
      _toggleDLMode.innerHTML = '<i class="fa fa-sun"></i><span class="w3-hide-small">&nbsp;&nbsp;Light Mode</span>';
      //_htmlTag.classList.replace('w3-light-grey', 'calc-darkmode');
      if (localStorage) {
        try {
          localStorage.setItem("clock-dark-mode", "false");
        } catch (error) {
          //console.log('Enable cookies in your browser');
        }
      }
    }
  });
}
/* store Dark Mode value in Local Storage */
window.addEventListener('load', function () {
  if (localStorage && localStorage.getItem("clock-dark-mode") === "true") {
    if (_toggleDLMode) {
      _toggleDLMode.click();
    }
  }
});

Top Stories

Cicada 3301 – krótka historia

Do sprzedania: CASIO G-Shock Multi Fluorescent GA-B2100MF-1A Tough Solar – Bluetooth

Grupa PLA Unit 61398 – krótka historia

Rozbudowany zegar z GMT i datownikiem na stronę www

Zegarek analogowy i cyfrowy, datownik oraz strefy czasowe.

Zegar na stronę www

Trochę bardziej rozbudowany zegar

Zmień strefę czasową

Jak wstawić zegar na własną stronę?

index.html

style.css

script.js

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

Cicada 3301 – krótka historia

Do sprzedania: CASIO G-Shock Multi Fluorescent GA-B2100MF-1A Tough Solar – Bluetooth

Grupa PLA Unit 61398 – krótka historia

Zegar na stronę www

Trochę bardziej rozbudowany zegar

Zmień strefę czasową

Jak wstawić zegar na własną stronę?

index.html

style.css

script.js

Może Ci się spodobać:

Bezpieczne korzystanie z Facebooka.

Prosty edytor zdjęć online

Command and Conquer – zagraj online w przeglądarce

Podpis elektroniczny – co to jest?