基于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时钟特效专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。