分類
<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>
<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>
onLoad="startTime()
1. 本站所有素材(未指定商用),僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后,只擁有使用權,著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材,未經合法授權,請勿用于商業用途,會員不得以任何形式發布、傳播、復制、轉售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統商業用途請預先授權。