编写时钟表的方法
通过调用Date()函数可实现在指定的位置显示系统时间，实现代码及注释：
- 实现一个时钟表
*/
//开始的时间
var today = new Date();//创建一个taday并获取Date()的函数调用
var h = today.getHours();//调用Date()函数里的getHours()
var m = today.getMinutes();//通过Date()调用getMinutes()
var s = today.getSeconds();//调用getSeconds()
m = checkTime(m);//调用checkTime()
s = checkTime(s);//调用checkTime()
document.getElementById("timeOne").innerHTML=h+":"+m+":"+s;//在名为：timeOne中显示结果
t=setTimeout('startTime()',1000);//每过1000毫秒就会执行一次startTime()函数 1s=1000ms 至少每过1000ms执行一次
}
function checkTime(i){//规定在m/s小于10时在前面补零变成两位数
if(i<10)
{i="0" +i}
return i;
}
/**
* 实现年月日的变化
*/
//判断是否是闰年
function isLeapYear(year){
var leapyear=year%4===0&&year%100!==0||year%400===0 ? 31622400:31536000;
return leapyear;
}
//从计算机的系统时间中调用年、月、日、时、分、秒
var toDay = new Date();
var presentYear = toDay.getFullYear();
var presentMonth = toDay.getMonth() + 1;
var presentDay = toDay.getDate();
var presentH = toDay.getHours();
var presentM = toDay.getMinutes();
var presentS = toDay.getSeconds();
//根据系统时间来计算该年过了几天，几秒 2018/8/28/15:48:08
var passByMonth = presentMonth;
var passByDay = presentDay;
var _day=0,_totalDays=0;
var passByH = presentH*3600,
passByM = presentM*60,
passByS = presentS;
var passTime = passByH+passByM+passByS;
for(var i=0;i<passByMonth-1;i++){
switch (i){
case 2:
_day = presentYear%4===0&&presentYear%100!==0||presentYear%400===0 ? 29:28;
break;
case 4:
case 6:
case 9:
case 11:
_day = 30;
break;
default:
_day = 31;
}
_totalDays+=_day;
}
_totalDays+=passByDay;
_totalDaysTime= 86400-passTime;
if(presentYear%4===0&&presentYear%100!==0||presentYear%400===0){
_totalDays = 366-_totalDays;
}else{
_totalDays = 365-_totalDays;
}
//实现年份、月份、秒数的递减或递增
var _year=presentYear,
tmp =_totalDaysTime,
count=0,
day=_totalDays;
var y=window.document.getElementById("year");
y.innerHTML=_year;
var d=window.document.getElementById("totalDays");
d.innerHTML=day;
function totalSeconds(){
var _totalS=tmp;
if(_totalS===0){
var year=presentYear;
y=window.document.getElementById("year");
y.innerHTML=year;
_totalS = isLeapYear(year);
var a=window.document.getElementById("totalS");
a.innerHTML=_totalS;
}
a=window.document.getElementById("totalS");
a.innerHTML=_totalS;
tmp=_totalS-1;
count++;
if(count===86400){
day--;
d=window.document.getElementById("totalDays");
d.innerHTML=day;
count=0;
}
t=setTimeout('totalSeconds()',1000);
}
totalSeconds();
HTML代码:
<body onload="startTime()">
<div class="box">
<dl>
<dt id="timeOne"></dt>
<dd id="timeTwo">距离<span id="year"></span>年年底还有<span id="totalDays"></span>天<span id="totalS"></span>秒</dd>
</dl>
</div>
<div class="date">
</div>
CSS代码：
@charset "UTF-8";
/**
*
* @authors Marte (iqianduan@126.com)
* @date 2018-08-27 10:21:09
* @version $Id$
*/
*{margin:0;padding:0;}
.box{
height: 400px;
widht:100%;
background:url(../images/bg/7.jpg) no-repeat center center;
background-size: 100% 100%;
margin-top: 20px;
overflow: hidden;
}
.box dl{
margin:0 auto;
width:800px;
height:200px;
// background: orange;
margin-top:200px;
text-align: center;
color:#c9dfd3;
}
.box dl dt{
font-size: 48px;
color:#c9dfd3;
height:50px;
line-height:50px;
}
.box dl dd{
height:80px;
line-height: 80px;
font-size: 24px;
}
.date{
float: right;
background:yellow;
}
.box dl dd span{
font-size:36px;
}
网友评论