\$\begingroup\$
\$\endgroup\$
This is a POC for a clock using moment.js, eventually I plan to recreate this in Raect.js. Any opimisations or a better way to do it?
<!DOCTYPE html>
<html>
<head>
<title>Html clock</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone-with-data.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<p id='show_time'></p>
<p id='show_date'></p>
<select id='timezone_list'></select>
<script type="text/javascript">
var list = moment.tz.names();
var timezone;
var sel = document.getElementById('timezone_list');
for(var i = 0; i < list.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = list[i];
opt.value = list[i];
sel.appendChild(opt);
}
sel.onchange = function(){
timezone=sel.options[sel.selectedIndex].text;
console.log(timezone)
setInterval(function(){
var times = moment().tz(timezone).format('h:mm:ss a');
var dates = moment().tz(timezone).format('MMMM Do YYYY');
var par = document.getElementById('show_time');
var par2 = document.getElementById('show_date');
par.innerHTML= times;
par2.innerHTML=dates;
},1000);
}
</script>
</body>
200_success
145k22 gold badges190 silver badges478 bronze badges
asked Aug 17, 2016 at 9:25
1 Answer 1
\$\begingroup\$
\$\endgroup\$
- I have created a function to prevent the one second delay.
- Added
moment().tz(timezone)as variable - Added all elements as variable
- Added the date and time directly to the elements
- Added a shorter way to add
options
var list = moment.tz.names();
var timezone;
// elements
var elTimezoneList = document.getElementById('timezone_list');
var elTime = document.getElementById('show_time');
var elDate = document.getElementById('show_date');
// loop over timezones and set options
for(var i = 0; i < list.length; i++) {
elTimezoneList.appendChild(new Option(list[i], list[i]));
}
// time function to prevent the 1s delay
var setTime = function() {
var time = moment().tz(timezone);
// set time in html
elTime.innerHTML= time.format('h:mm:ss a');
// set date in html
elDate.innerHTML = time.format('MMMM Do YYYY');
}
// on change select
elTimezoneList.onchange = function(){
// set selected timezone
timezone = elTimezoneList.options[elTimezoneList.selectedIndex].text;
setTime();
setInterval(setTime, 1000);
}<!DOCTYPE html>
<html>
<head>
<title>Html clock</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone-with-data.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<p id="show_time"></p>
<p id="show_date"></p>
<select id="timezone_list"></select>
</body>
</html>Explore related questions
See similar questions with these tags.
lang-html