World's Clock

Written by @kerixa 21 August 2012

In the following code, we have a drop-down list of countries. By selecting the time of each country, its current time is shown. This clock is live and shows the current time. In addition to the time, it also shows the date of the day. This code is very suitable for currency exchange websites.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<style>
#clock {
    font-family: "Courier New";
    background-color: #CCCCCC;
    border: solid #999999 1px;
    color: #000000;
    width: 300px;
    padding: 10px;
}
#date {
    font-size: 20px;
}
#time {
    font-size: 42px;
}
</style>
<div >
  <p>World Clock</p>
  <hr />
  <div id="clock">
    <select id="city">
    <option value="-10">Honolulu (USA)</option>
    <option value="-8">Los Angeles (USA)</option>
    <option value="-5">New York (USA)</option>
    <option value="-3">Rio de Janeiro (BRAZIL)</option>
    <option value="-0">London (UK)</option>
    <option value="2">Cairo (EGYPT)</option>
    <option value="5.5">New Delhi (INDIA)</option>
    <option value="7">Bangkok (THAILAND)</option>
    <option value="9" selected>Tokyo (JAPAN)</option>
    <option value="10">Sydney (AUSTRALIA)</option>
    </select>
    <span id="timezone"></span>
    <div id="date">----/--/-- ---</div>
    <div id="time">--:--:--</div>
  </div>
</div>
<script>
var myVar;
function myFunction() {
    myVar = setInterval(clock, 1000);
}
function clock() {
    var now = new Date();
    var timeTokyo = now.getTime();
    var timeUTC = timeTokyo - 9 * 60 * 60 * 1000;
    var cityElement = document.getElementById('city');
    var index = cityElement.selectedIndex;
    var timeZone = cityElement.options[index].value;
    var timezoneElement = document.getElementById('timezone');
    timezoneElement.innerHTML = "Timezone:" + timeZone;
    var timeCity = timeUTC + timeZone * 60 * 60 * 1000;
    now = new Date(timeCity);
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    if (hour < 10) hour = "0" + hour;
    if (min < 10) min = "0" + min;
    if (sec < 10) sec = "0" + sec;
    var timeElement = document.getElementById('time');
    timeElement.innerHTML = hour + ":" + min + ":" + sec;
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    var weekArray = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var week = weekArray[now.getDay()];
    var dateElement = document.getElementById('date');
    dateElement.innerHTML = year + "/" + month + "/"
        + day + " " + week;
}
myFunction();
</script>
<a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: CryptoTech, AstroAudrey, admin_js, bloxio, yqaice
advertisement 2