JavaScript实现世界各地时间显示

发布于 2022.03.26

by 珂李斯

本文实例为大家分享了JavaScript实现世界各地时间显示的具体代码，供大家参考，具体内容如下代码如下： …

本文实例为大家分享了JavaScript实现世界各地时间显示的具体代码，供大家参考，具体内容如下

JavaScript实现世界各地时间显示 (https://www.wpmee.com/) javascript教程第1张

代码如下：

<!DOCTYPE html>

<head>

<title>世界各地时间</title>

<style>

*{margin: 0px;padding: 0px;background-color: black;}

#box{width: 500px;margin:50px auto;border:1px solid;padding:20px;background-color: #0f0;}

p{font-size:20px;font-weight: bold;padding:5px;border-bottom: 2px solid #ddd;background-color: #ffffff;}

span{display: inline-block;text-indent: 20px;background-color: #ffff;}

</style>

</head>

<body>

伦敦时间：

北京时间：

悉尼时间：

洛杉矶时间：

印度时间：

迪拜时间：

西班牙时间：

</div>

//获取到span

var spans = document.getElementsByTagName(“span”);

//定义星期数组

var arr = [“星期日”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”];

//有名函数

function fn(){

var date = new Date();

//获得中时区的时间（毫秒）

var UTCTime = Date.now() + date.getTimezoneOffset()*60*1000;

//定义数组

var timeArr = [

dateFormat(UTCTime + 60*60*1000), //伦敦

dateFormat(date), //北京

dateFormat(UTCTime + 11*60*60*1000), //悉尼

dateFormat(UTCTime – 7*60*60*1000), //洛杉矶

dateFormat(UTCTime + 6*60*60*1000), //印度

dateFormat(UTCTime + 4*60*60*1000), //迪拜

dateFormat(UTCTime + 2*60*60*1000) //西班牙

];

//打印到控制台

console.log(timeArr);

//添加数据

for( var i = 0;i<spans.length;i++ ){

spans[i].innerHTML = timeArr[i];

}

//执行

fn();

//多次执行的定时器

setInterval(fn,1000);

//传入形参计算年月日….

function dateFormat(d){

var date = new Date(d);

var YY = date.getFullYear();

var MM = date.getMonth() + 1 ;

var Day = date.getDay(); //星期三？？？

var DD = date.getDate();

var hh = addZero(date.getHours());

var mm = addZero(date.getMinutes());

var ss = addZero(date.getSeconds());

return YY + “年” + MM + “月” + DD + “日” + hh + “时” + mm + “分” + ss + “秒 ” + arr[Day]

}

//使输出的格式为双数

function addZero ( n ){

return n < 10 ? “0” + n : n + “”;

}

</script>

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JavaScript实现世界各地时间显示 (https://www.wpmee.com/) javascript教程第2张

类别：WordPress函数讲解、

本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。

猜你喜欢GUESS YOU LIKE

WordPress添加贴吧表情

PHP使用Imagick扩展处理图片

如何在WordPress中添加用户在线功能？

WordPress静态缓存插件WP Super Cache

WordPress禁止上传图片自动生成多张缩略图

WordPress非插件版插入表格

评论 (0)COMMENT