[javascript]代码库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js显示当前世界各国时间代码</title>
<style>
body {
background-image: url("img/bj.jpg");
background-size: cover;
background-repeat: no-repeat;
}
#container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
line-height: 90px;
text-align: center;
background: rgba(255, 255, 255, 0.3);
}
#time_body {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 50%;
width: 90%;
}
.time {
font-size: 90px;
}
.title {
font-size: 40px;
margin-bottom: 60px;
}
li {
float: left;
width: 30%;
list-style: none;
}
</style>
</head>
<body onLoad="startTime()">
<div id="container">
<div id="time_body">
<ul>
<li id="beijing" class="time"></li>
<li id="mengmai" class="time"></li>
<li id="niuyue" class="time"></li>
<li class="title">北京时间</li>
<li class="title">孟买时间</li>
<li class="title">纽约时间</li>
<li id="dongjing" class="time"></li>
<li id="bali" class="time"></li>
<li id="xini" class="time"></li>
<li class="title">东京时间</li>
<li class="title">巴黎时间</li>
<li class="title">悉尼时间</li>
</ul>
</div>
</div>
<script type="text/javascript">
function startTime() {
document.getElementById('beijing').innerHTML = calcTime(+8)
document.getElementById('mengmai').innerHTML = calcTime(+5.5)
document.getElementById('niuyue').innerHTML = calcTime(-5)
document.getElementById('dongjing').innerHTML = calcTime(+9)
document.getElementById('bali').innerHTML = calcTime(+2)
document.getElementById('xini').innerHTML = calcTime(+10)
t = setTimeout('startTime()', 1000)
}
function checkTime(i) {
if (i < 10) { i = "0" + i }
return i
}
function calcTime(offset) {
var d = new Date();
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var nd = new Date(utc + (3600000 * offset));
var h = nd.getHours()
var m = nd.getMinutes()
var s = nd.getSeconds()
h = checkTime(h)
m = checkTime(m)
s = checkTime(s)
return h + ":" + m + ":" + s
}
</script>
</body>
</html>
[代码运行效果截图]
初级程序员
by: 云代码会员 发表于:2019-06-02 16:23:23 顶(0) | 踩(0) 回复
大打
回复评论