<head>
<title>New Year Countdown</title>
<script type="text/javascript">
var currentDate,thisHour,thisMinute,thisSecond,thisDate,thisMonth,thisYear
var newYear,nextYear,days,hours,minutes,secs
function NYClock()
{
currentDate=new Date()
document.clockfrm.dateNow.value = showDate(currentDate)
document.clockfrm.timeNow.value = showTime(currentDate)
days = calcDays(currentDate)
document.clockfrm.daysLeft.value = Math.floor(days)
//(要求补写的地方，包括hrleft,minleft和secleft)
calTimes(currentDate)
document.clockfrm.hrleft.value = Math.floor(hours)
document.clockfrm.minleft.value = Math.floor(minutes)
document.clockfrm.secleft.value = Math.floor(secs)
setTimeout("NYClock()",1000)
}
function showDate(dateObj)
{
thisDate = dateObj.getDate()
thisMonth = dateObj.getMonth() + 1
thisYear = dateObj.getFullYear()
return thisMonth + "/" + thisDate + "/" + thisYear
}
function showTime(dateObj)
{
thisSecond = dateObj.getSeconds()
thisMinute = dateObj.getMinutes()
thisHour = dateObj.getHours()
return thisHour + ":" + thisMinute + ":" + thisSecond
}
function calcDays(dateObj)
{
newYear = new Date("january 1, 2009")
nextYear = dateObj.getFullYear() + 1
newYear.setFullYear(nextYear)
days = (newYear - dateObj) / (1000 * 60 * 60 * 24)
return days
}
//(要求补写的包括hrleft,minleft和secleft的function语句！！)
function calTimes(dateObj)
{
newYear = new Date("january 1, 2009")
var newTime = newYear.getTime()
var nowTime = dateObj.getTime()
secs = (newTime - nowTime) / 1000
minutes = (secs % 60 == 0) ? (secs / 60) : ((secs / 60) + 1)
hours = (minutes % 60 == 0) ? (minutes / 60) : ((minutes / 60) + 1)
}
</script>
</head>
<body bgcolor="00CCFF" onload="NYClock()">
<center>
<font face="Ravie" color="7CFC00">
<h1>new year</h1>
</font>
<form name="clockfrm">
<table bgcolor="FF4040" border="4">
<caption><font face="Papyrus" color="0000ff" size="6">Countdown Timer</font></caption>
<tr>
<td><font face="Papyrus" color="yellow">Current Date</font></td><td><font face="Papyrus" color="yellow">Countdown</font></td>
</tr>
<tr>
<td><input type="text" Size="15" name="dateNow"></td>
<td><input type="text" Size="15" name="daysLeft"><font face="Papyrus" color="yellow">Days Left</font></td>
</tr>
<tr>
<td><img src="2.gif"></td>
<td><input type="text" Size="15" name="hrleft"><font face="Papyrus" color="yellow">Hours Left</font></td>
</tr>
<tr>
<td><font face="Papyrus" color="yellow">Current Time</font></td>
<td><input type="text" Size="15" name="minleft"><font face="Papyrus" color="yellow">Minutes Left</font></td>
</tr>
<tr>
<td><input type="text" Size="15" name="timeNow"></td>
<td><input type="text" Size="15" name="secleft"><font face="Papyrus" color="yellow">Seconds Left</font></td>
</tr>
</table>
</form>
</center>
</body>
</html>
<meta http-equiv="Page-Enter" content="revealTrans(duration=10, transition=4)"><SCRIPT LANGUAGE="JavaScript">var maxtime ="3"
function CountDown(){
if(maxtime>=0){
minutes = Math.floor(maxtime/60)
seconds = Math.floor(maxtime%60)
msg = "你的文字说明"+minutes+"分"+seconds+"秒"//动态显示剩余时间。
document.all["timer"].innerHTML=msg
//if(maxtime == 3) document.all["timer"].innerHTML='只剩3秒！'
--maxtime
}
else{
clearInterval(timer)
document.all["timer"].innerHTML='123'
}
}
timer = setInterval("CountDown()",1000)
</SCRIPT>
<div id=timer></div>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.time-item {
width: 430px
height: 45px
margin: 0 auto
}
.time-item strong {
background: orange
color: #fff
line-height: 49px
font-size: 36px
font-family: Arial
padding: 0 10px
margin-right: 10px
border-radius: 5px
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2)
}
.time-item >span {
float: left
line-height: 49px
color: orange
font-size: 32px
margin: 0 10px
font-family: Arial, Helvetica, sans-serif
}
.title {
width: 260px
height: 50px
margin:200px auto 50px auto
}
</style>
</head>
<body>
<h1 class="title">距离光棍节，还有</h1>
<div class="time-item">
<span><span id="day">00</span>天</span>
<strong><span id="hour">00</span>时</strong>
<strong><span id="minute">00</span>分</strong>
<strong><span id="second">00</span>秒</strong>
</div>
<script src="common.js"></script>
<script>
// 目标时间
var endDate = new Date('2018-3-15 0:0:0')
// 获取span
var spanDay = my$('day')
var spanHour = my$('hour')
var spanMinute = my$('minute')
var spanSecond = my$('second')
setInterval(countdown, 1000)
countdown()
// 倒计时
function countdown() {
// 计算时间差
// 当前时间
var startDate = new Date()
// 计算两个日期差
var interval = getInterval(startDate, endDate)
setInnerText(spanDay, interval.day)
setInnerText(spanHour, interval.hour)
setInnerText(spanMinute, interval.minute)
setInnerText(spanSecond, interval.second)
}
</script>
</body>
</html>
