基于javascript显示当前时间以及倒计时功能
自我练习，顺便分享给大家的一段js原生代码。
Date对象用于处理日期和时间。
Date() 返回当日的日期和时间。
getDate() 从Date对象返回一个月中的某一天(1~31)。
getDay() 从Date对象返回一周中的某一天(0~6)。
getMonth() 从Date对象返回月份(0~11)。
getFullYear() 从Date对象以四位数字返回年份。
getYear() 请使用getFullYear()方法代替。
getHours() 返回Date对象的小时(0~23)。
getMinutes() 返回Date对象的分钟(0~59)。
getSeconds() 返回Date对象的秒数(0~59)。
getMilliseconds() 返回Date对象的毫秒(0~999)。
getTime() 返回1970年1月1日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间(GMT)的分钟差。
getUTCDate() 根据世界时从Date对象返回月中的一天(1~31)。
getUTCDay() 根据世界时从Date对象返回周中的一天(0~6)。
getUTCMonth() 根据世界时从Date对象返回月份(0~11)。
getUTCFullYear() 根据世界时从Date对象返回四位数的年份。
getUTCHours() 根据世界时返回Date对象的小时(0~23)。
getUTCMinutes() 根据世界时返回Date对象的分钟(0~59)。
getUTCSeconds() 根据世界时返回Date对象的秒钟(0~59)。
getUTCMilliseconds() 根据世界时返回Date对象的毫秒(0~999)。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置Date对象中月的某一天(1~31)。
setMonth() 设置Date对象中月份(0~11)。
setFullYear() 设置Date对象中的年份（四位数字）。
setYear() 请使用setFullYear()方法代替。
setHours() 设置Date对象中的小时(0~23)。
setMinutes() 设置Date对象中的分钟(0~59)。
setSeconds() 设置Date对象中的秒钟(0~59)。
setMilliseconds() 设置Date对象中的毫秒(0~999)。
setTime() 以毫秒设置Date对象。
setUTCDate() 根据世界时设置Date对象中月份的一天(1~31)。
setUTCMonth() 根据世界时设置Date对象中的月份(0~11)。
setUTCFullYear() 根据世界时设置Date对象中的年份（四位数字）。
setUTCHours() 根据世界时设置Date对象中的小时(0~23)。
setUTCMinutes() 根据世界时设置Date对象中的分钟(0~59)。
setUTCSeconds() 根据世界时设置Date对象中的秒钟(0~59)。
setUTCMilliseconds() 根据世界时设置Date对象中的毫秒(0~999)。
toSource() 返回该对象的源代码。
toString() 把Date对象转换为字符串。
toTimeString() 把Date对象的时间部分转换为字符串。
toDateString() 把Date对象的日期部分转换为字符串。
toGMTString() 请使用toUTCString()方法代替。
toUTCString() 根据世界时，把Date对象转换为字符串。
toLocaleString() 根据本地时间格式，把Date对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把Date对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把Date对象的日期部分转换为字符串。
UTC() 根据世界时返回1970年1月1日到指定日期的毫秒数。
valueOf() 返回Date对象的原始值。
具体实现代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<title>原生js当前时间倒计时代码</title>
<style>
*{margin:0;padding:0;}
body{text-align:center;}
.text{margin-top:150px;font-size:14px;}
</style>
<script>
window.onload=function(){
getMyTime();
getMyTime1();
}
//1.前面补0
functionp(n){
returnn<10?'0'+n:n;
}
//2.倒计时
functiongetMyTime(){
varstartDate=newDate();
varendDate=newDate('2017/4/1711:15:00');
varcountDown=(endDate.getTime()-startDate.getTime())/1000;
varday=parseInt(countDown/(24*60*60));
varh=parseInt(countDown/(60*60)%24);
varm=parseInt(countDown/60%60);
vars=parseInt(countDown%60);
document.getElementById('time').innerHTML=day+'天'+p(h)+'时'+p(m)+'分'+p(s)+'秒';
setTimeout('getMyTime()',500);
if(countDown<=0){
document.getElementById('time').innerHTML='活动结束';
}
}
//3.当前时间
functiongetMyTime1(){
varmyDate=newDate();
varyear=myDate.getFullYear();
varmonth=myDate.getMonth()+1;
varday=myDate.getDate();
varweek=myDate.getDay();
vararray=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];
varhour=myDate.getHours();
varminute=myDate.getMinutes();
varsecond=myDate.getSeconds();
document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);
setTimeout('getMyTime1()',500);
}
</script>
</head>
<body>
<divclass="text">
<p>倒计时间：<spanid="time"></span></p>
<p>当前时间：<spanid="time1"></span></p>
</div>
</body>
</html>
更多关于倒计时的文章请查看专题：《倒计时功能》
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。