用Moment.js实现的时钟
用Moment.js实现的时钟
提问于 2016-08-17 09:25:11
这是一个使用moment.js的时钟的POC，最终我计划在Raect.js中重新创建它。有什么建议或者更好的方法吗？
<!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>回答 1
Code Review用户
回答已采纳
发布于 2016-08-17 09:49:50
- 我创建了一个函数来防止一秒的延迟。
- 添加
moment().tz(timezone)作为变量 - 将所有元素作为变量添加
- 将日期和时间直接添加到元素中
- 添加了一个更短的添加
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>页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://codereview.stackexchange.com/questions/138913
复制相关文章
相似问题
腾讯云开发者
