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 = ['&nbsp;星期天&nbsp;','&nbsp;星期一&nbsp;','&nbsp;星期二&nbsp;','&nbsp;星期三&nbsp;','&nbsp;星期四&nbsp;','&nbsp;星期五&nbsp;','&nbsp;星期六&nbsp;'];quxiao = [];var value=0;// alert("定义及输出offset");// alert(offset)fun();function fun(){// alert("函数fun");offset = [];quxiao = [];obj = document.getElementsByName("test");for(k in obj){//获取选中的城市的时区5if(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="北京时间:&nbsp;&nbsp;"+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="东京时间:&nbsp;&nbsp;"+year+"年"+preZero(month)+"月"+preZero(day)+"日"+weeks[week]+preZero(hours)+":"+preZero(minutes)+":"+preZero(seconds);dongjing = window.setTimeout("dongjingshowCityTime()",1000);}}// 3function 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="纽约时间:&nbsp;&nbsp;"+year+"年"+preZero(month)+"月"+preZero(day)+"日"+weeks[week]+preZero(hours)+":"+preZero(minutes)+":"+preZero(seconds);niuyue = window.setTimeout("niuyueshowCityTime()",1000);}}// 4function 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="埃及时间:&nbsp;&nbsp;"+year+"年"+preZero(month)+"月"+preZero(day)+"日"+weeks[week]+preZero(hours)+":"+preZero(minutes)+":"+preZero(seconds);aiji = window.setTimeout("aijishowCityTime()",1000);}}// 5function 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="巴黎时间:&nbsp;&nbsp;"+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>

通过复选框单击按时区显示时间相关推荐

帆软复选框根据数据库值显示勾选效果
1.经过测试,帆软8.0,sql编辑框里面展示"勾选复选框"字体图标无法正常展示,不展示或者展示问号 2.解决办法步骤一.自定义字典前要修改fineReport的字符集参考:h ...
easyui数据表格显示复选框_【Excel技巧】使用控件一键切换实现单位元和万元随意显示...
工欲善其事,必先利其器.职场上亦是如此.Excel报表想要做得完美,首先肯定Excel要精通. 做一份Excel报表,如果涉及到金额,当金额比较大,单位到底是用元还是万元,经常是大家纠结的一个问题.我 ...
复选框checked 选中后不显示打钩
复选框checked 选中后不显示打钩 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因复选框绑定了click事件,点一次选中,再点击取消选 ...
原生js打印阅览复选框不显示问题
原生js打印阅览复选框不显示问题原生js打印预览,主要是阅览时候回出现一些问题,比如复选框传值,√不显示,那么怎么来解决这个问题呢?首先我们看一下效果图:我的页面是vue环境这是预览状态,√和元页 ...
在 GridView 控件中添加一列复选框51
简介在前面的教程中 , 我们学习了如何为 GridView 控件添加一列单选按钮来选择一个特定的记录.当用户被限制最多只能从网格中选中一项时,一列单选按钮是一个非常恰当的用户界面.然而,有时我们 ...
eazy ui 复选框单选_UI备忘单：单选按钮，复选框和其他选择器
eazy ui 复选框单选重点 (Top highlight) Pick me! Pick me! No, pick me! In today's cheat sheet we will be lo ...
JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。
一.Javacript设置全选的方法:首先创建一个HTML示例文件:然后添加script标签并创建js代码:最后通过循环遍历每个checkbox对象,将其checked属性设置为true实现全选功能即 ...
ztree指定节点设置复选框
ztree指定节点设置复选框首先,需引入ztree的js文件 <script src="../../assets/ztree/js/jquery.ztree.core-3.5.mi ...
winform checkedlistbox不显示复选框_据说90%的人都不知道怎么解决这个Word问题
Hello~我是你们的海宝老师最近遇到好几个学员问我同一个问题:"题注变成"图一-1"怎么解决?" (修改过后正确的) 正常咱们标题的编号都是"第1 ...

通过复选框单击按时区显示时间

html+css实现按时区显示时间

注:部分国家正在执行夏令时

废话不多说先上图：

源代码：copy直接使用

通过复选框单击按时区显示时间相关推荐

最新文章

热门文章