html+css实现按时区显示时间
注:部分国家正在执行夏令时
夏令时，表示为了节约能源，人为规定时间的意思。也叫夏时制，夏时令（Daylight Saving Time：DST），又称“日光节约时制”和“夏令时间”，在这一制度实行期间所采用的统一时间称为“夏令时间”。一般在天亮早的夏季人为将时间调快一小时，可以使人早起早睡，减少照明量，以充分利用光照资源，从而节约照明用电。各个采纳夏时制的国家具体规定不同。目前全世界有近110个国家每年要实行夏令时。
1986年4月，中国中央有关部门发出“在全国范围内实行夏时制的通知”，具体作法是：每年从四月中旬第一个星期日的凌晨2时整（北京时间），将时钟拨快一小时，即将表针由2时拨至3时，夏令时开始；到九月中旬第一个星期日的凌晨2时整（北京夏令时），再将时钟拨回一小时，即将表针由2时拨至1时，夏令时结束。从1986年到1991年的六个年度，除1986年因是实行夏时制的第一年，从5月4日开始到9月14日结束外，其它年份均按规定的时段施行。在夏令时开始和结束前几天，新闻媒体均刊登有关部门的通告。1992年起，夏令时暂停实行。
作者:彭刚
时间:2019年9月25日08:45:09
废话不多说先上图：
源代码：copy直接使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复选框求指定城市时间</title>
<style>
#show{
font-size:36px;
padding-top:200px;
width:80%;
margin:0 auto;
text-align:center;
}
#button{ /* 按钮美化 */
width: 200px; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
float:right;
margin-top:7px;
}
#button:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
float:right;
}
#all{
width:70%;
margin:0 auto;
margin-top:50px;
}
#form{
margin:0 auto;
width:100%;
font-size:36px;
margin-bottom:20px;
height:50px;
margin-bottom:50px;
margin-left:45px;
}
#beijing{
margin:0 auto;
width:70%;
font-size:36px;
margin-bottom:20px;
height:50px;
text-align:center;
}
#niuyue{
margin:0 auto;
width:70%;
font-size:36px;
margin-bottom:20px;
height:50px;
text-align:center;
}
#bali{
margin:0 auto;
width:70%;
font-size:36px;
margin-bottom:20px;
height:50px;
text-align:center;
}
#dongjing{
margin:0 auto;
width:70%;
font-size:36px;
margin-bottom:20px;
height:50px;
text-align:center;
}
#aiji{
margin:0 auto;
width:70%;
font-size:36px;
margin-bottom:20px;
height:50px;
text-align:center;
}
#checkbox{
margin:0;
width:25px;
height:25px;
}
</style>
</head>
<body>
<h1 style="text-align:center;font-size:48px;">根据时区显示时间</h1>
<div id="all">
<!--表单-->
<div id="form">
<form>
<label > <input id="checkbox" type="checkbox" name="test" value="8" checked style="margin-left:130px;"/>北京</span> </label>
<label > <input id="checkbox" type="checkbox" name="test" value="9" style="margin-left:47px;"/>东京</span></label>
<label > <input id="checkbox" type="checkbox" name="test" value="-5" style="margin-left:47px;"/>纽约</span></label>
<label > <input id="checkbox" type="checkbox" name="test" value="2" style="margin-left:47px;"/>埃及</span></label>
<label > <input id="checkbox" type="checkbox" name="test" value="1" style="margin-left:47px;zoom="200%";"/>巴黎</span></label>
<label > <input id="button" type='button' value='提交' οnclick="fun()"/> </label>
</form>
</div>
<!--北京-->
<div id="beijing">
</div>
<!--东京-->
<div id="dongjing">
</div>
<!--纽约-->
<div id="niuyue">
</div>
<!--埃及-->
<div id="aiji">
</div>
<!--巴黎-->
<div id="bali">
</div>
</div>
<script>
offset = [];
var weeks = [' 星期天 ',' 星期一 ',' 星期二 ',' 星期三 ',' 星期四 ',' 星期五 ',' 星期六 '];
quxiao = [];
var value=0;
// alert("定义及输出offset");
// alert(offset)
fun();
function fun(){
// alert("函数fun");
offset = [];
quxiao = [];
obj = document.getElementsByName("test");
for(k in obj){
//获取选中的城市的时区5
if(obj[k].checked){
offset.push(obj[k].value);
}else{
quxiao.push(obj[k].value);
}
}
//根据选中的复选框调用函数
for(j=0;j<=offset.length;j++) {;
value = offset[j]*1;
//alert("遍历内的value");
//alert(value);
//alert("开始value")
//alert(value);
if(value == 8){
clearTimeout(beijing);
beijingshowCityTime();
}else if (value == 9){
clearTimeout(dongjing);
dongjingshowCityTime();
}else if(value == -5){
clearTimeout(niuyue);
niuyueshowCityTime();
}else if(value == 2){
clearTimeout(aiji);
aijishowCityTime();
}else if(value == 1){
clearTimeout(bali);
balishowCityTime();
}
}
// 取消复选框时取消该时区的显示
for(j=0;j<=quxiao.length;j++){
a = quxiao[j]
if (a == 8){
document.getElementById("beijing").innerHTML='';
clearTimeout(beijing);
}else if (a == 1){
document.getElementById("bali").innerHTML='';
clearTimeout(bali);
}else if (a == 2){
document.getElementById("aiji").innerHTML='';
clearTimeout(aiji);
}else if (a == -5){
document.getElementById("niuyue").innerHTML='';
clearTimeout(niuyue);
}else if (a == 9){
document.getElementById("dongjing").innerHTML='';
clearTimeout(dongjing);
}else{
true;
}
}
}
// 1
var beijing;
function beijingshowCityTime(){
clearTimeout(beijing);
var d=new Date();
var localTime=d.getTime();
//2、得到本地时间与国际标准时间偏移量（单位化成毫秒）
var localOffset=d.getTimezoneOffset()*60000;//1分钟为60000毫秒
//3、得到当前国际标准时间
var utc=localTime+localOffset;
//4、得到目标城市的时间
var cityTime=utc+8*3600000;//3600000就是1小时
var dt=new Date(cityTime);
var year=dt.getFullYear();
var month=dt.getMonth()+1;
var day=dt.getDate();
var hours=dt.getHours();
var minutes=dt.getMinutes();
var seconds=dt.getSeconds();
var week=dt.getDay();//得到星期,只是一个数字
if (value != 8262){
document.getElementById("beijing").innerHTML="北京时间: "+year+"年"+preZero(month)+"月"+preZero(day)+"日"+weeks[week]+preZero(hours)+":"+preZero(minutes)+":"+preZero(seconds);
beijing=window.setTimeout("beijingshowCityTime()",1000);
}
}
// 2
function dongjingshowCityTime(){
clearTimeout(dongjing);
var d=new Date();
var localTime=d.getTime();
//2、得到本地时间与国际标准时间偏移量（单位化成毫秒）
var localOffset=d.getTimezoneOffset()*60000;//1分钟为60000毫秒
//3、得到当前国际标准时间
var utc=localTime+localOffset;
//4、得到目标城市的时间
var cityTime=utc+9*3600000;//3600000就是1小时
var dt=new Date(cityTime);
var year=dt.getFullYear();
var month=dt.getMonth()+1;
var day=dt.getDate();
var hours=dt.getHours();
var minutes=dt.getMinutes();
var seconds=dt.getSeconds();
var week=dt.getDay();//得到星期,只是一个数字
if (value != 8262){
document.getElementById("dongjing").innerHTML="东京时间: "+year+"年"+preZero(month)+"月"+preZero(day)+"日"+weeks[week]+preZero(hours)+":"+preZero(minutes)+":"+preZero(seconds);
dongjing = window.setTimeout("dongjingshowCityTime()",1000);
}
}
// 3
function niuyueshowCityTime(){
clearTimeout(niuyue);
var d=new Date();
var localTime=d.getTime();
//2、得到本地时间与国际标准时间偏移量（单位化成毫秒）
var localOffset=d.getTimezoneOffset()*60000;//1分钟为60000毫秒
//3、得到当前国际标准时间
var utc=localTime+localOffset;
//4、得到目标城市的时间
var cityTime=utc+(3600000*-5);//3600000就是1小时
var dt=new Date(cityTime);
var year=dt.getFullYear();
var month=dt.getMonth()+1;
var day=dt.getDate();
var hours=dt.getHours();
var minutes=dt.getMinutes();
var seconds=dt.getSeconds();
var week=dt.getDay();//得到星期,只是一个数字
if (value != 8262){
document.getElementById("niuyue").innerHTML="纽约时间: "+year+"年"+preZero(month)+"月"+preZero(day)+"日"+weeks[week]+preZero(hours)+":"+preZero(minutes)+":"+preZero(seconds);
niuyue = window.setTimeout("niuyueshowCityTime()",1000);
}
}
// 4
function aijishowCityTime(){
clearTimeout(aiji);
var d=new Date();
var localTime=d.getTime();
//2、得到本地时间与国际标准时间偏移量（单位化成毫秒）
var localOffset=d.getTimezoneOffset()*60000;//1分钟为60000毫秒
//3、得到当前国际标准时间
var utc=localTime+localOffset;
//4、得到目标城市的时间
var cityTime=utc+(3600000*2);//3600000就是1小时
var dt=new Date(cityTime);
var year=dt.getFullYear();
var month=dt.getMonth()+1;
var day=dt.getDate();
var hours=dt.getHours();
var minutes=dt.getMinutes();
var seconds=dt.getSeconds();
var week=dt.getDay();//得到星期,只是一个数字
if (value != 8262){
document.getElementById("aiji").innerHTML="埃及时间: "+year+"年"+preZero(month)+"月"+preZero(day)+"日"+weeks[week]+preZero(hours)+":"+preZero(minutes)+":"+preZero(seconds);
aiji = window.setTimeout("aijishowCityTime()",1000);
}
}
// 5
function balishowCityTime(){
clearTimeout(bali);
var d=new Date();
var localTime=d.getTime();
//2、得到本地时间与国际标准时间偏移量（单位化成毫秒）
var localOffset=d.getTimezoneOffset()*60000;//1分钟为60000毫秒
//3、得到当前国际标准时间
var utc=localTime+localOffset;
//4、得到目标城市的时间
var cityTime=utc+(3600000*1);//3600000就是1小时
var dt=new Date(cityTime);
var year=dt.getFullYear();
var month=dt.getMonth()+1;
var day=dt.getDate();
var hours=dt.getHours();
var minutes=dt.getMinutes();
var seconds=dt.getSeconds();
var week=dt.getDay();//得到星期,只是一个数字
if (value != 8262){
document.getElementById("bali").innerHTML="巴黎时间: "+year+"年"+preZero(month)+"月"+preZero(day)+"日"+weeks[week]+preZero(hours)+":"+preZero(minutes)+":"+preZero(seconds);
bali = window.setTimeout("balishowCityTime()",1000);
}
}
function preZero(n){
if(n<10){
return "0"+n;
}
return n;
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
