基于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 对象的原始值。
具体实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-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
function p(n){
return n<10?'0'+n:n;
}
//2.倒计时
function getMyTime(){
var startDate=new Date();
var endDate=new Date('2017/4/17 11:15:00');
var countDown=(endDate.getTime()-startDate.getTime())/1000;
var day=parseInt(countDown/(24*60*60));
var h=parseInt(countDown/(60*60)%24);
var m=parseInt(countDown/60%60);
var s=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.当前时间
function getMyTime1(){
var myDate=new Date();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var day=myDate.getDate();
var week=myDate.getDay();
var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];
var hour=myDate.getHours();
var minute=myDate.getMinutes();
var second=myDate.getSeconds();
document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);
setTimeout('getMyTime1()',500);
}
</script>
</head>
<body>
<div class="text">
<p>倒计时间：<span id="time"></span></p>
<p>当前时间：<span id="time1"></span></p>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
相关推荐
-
javascript获取系统当前时间的方法
本文实例讲述了javascript获取系统当前时间的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="text/javascript"> window.onload = function(){ showTime(); } function showTime(){
-
JavaScript 获取当前时间戳的代码
JavaScript 获取当前时间戳: 第一种方法: 复制代码 代码如下: var timestamp = Date.parse(new Date()); 结果:1280977330000 第二种方法: 复制代码 代码如下: var timestamp = (new Date()).valueOf(); 结果:1280977330748 以上代码将获取从 1970年1月1日午夜开始的毫秒数.二者的区别是,第一种方法的毫秒位上为全零,即只是精确到秒的毫秒数 如题所示,返回unix时间戳所对应的具体
-
Javascript获取当前时间函数和时间操作小结
在项目需要一个计时器,效果如下: js代码: 复制代码 代码如下: /*获取当前时间*/ function getCurrentDate() { var timeStr = ''; var curDate = new Date(); var curMonth = curDate.getMonth()+1; //获取当前月份(0-11,0代表1月) var curDay = curDate.getDate(); //获取
-
JS之Date对象和获取系统当前时间详解
一.Date对象每天一对象,今天来看看Date对象,相对于时间大家一定很熟悉,应为以前在网站中很多地方都会遇到这样的时间特效.温故而知新,今天我们来回忆一下Date对象. 我们首先来看看他的定义:dateObj = new Date()dateObj = new Date(dateVal)dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]) 必选项.如果是数字值,dateVal 表示指定日期与 1970
-
js获取当前时间显示在页面上并每秒刷新
方法很简单,代码也很简洁,直接奉上代码吧 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js获取当前时间显示在页面上</title> <script> window.onload=function(){ //定时器每秒调用一次fnDate() setInterval(f
-
JS动态获取当前时间,并写到特定的区域
复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/jav
-
js获取当前时间(昨天、今天、明天)
本文实例为大家分享了js获取当前时间的具体代码,供大家参考,具体内容如下 js获取当前时间(昨天.今天.明天) 开发过程中某些前台页面的时间控件我们需要给默认当前时间,jquery可以轻松的帮我们实现,代码如下 //昨天的时间 var day1 = new Date(); day1.setTime(day1.getTime()-24*60*60*1000); var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-&
-
asp.net 实现动态显示当前时间(不用javascript不考虑开销)
Default.aspx页面:先拉一个ScriptManager控件到页面,然后拉一个UpdatePanel控件.UpdatePanel里面放一个Label用于显示时间,放一个timer控件用于控制时间的更新.注意Label与Label都要放到UpdatePanel控件里面.最后,timer控件的Interval属性设置为1000,让它每1秒执行一次即更新时间. Default.aspx.cs页面:只需在 protected void Page_Load(object sender, Event
-
js实时获取并显示当前时间的方法
本文实例讲述了js实时获取并显示当前时间的方法.分享给大家供大家参考.具体实现方法如下: js部分如下: <script type="text/javascript"> window.onload = function() { var show = document.getElementById("show"); setInterval(function() { var time = new Date(); // 程序计时的月从0开始取值后+1 var
-
js实时获取系统当前时间实例代码
(1):首先用JS编写实时显示系统时间的函数 clockon() 只有一个参数bgclock,用于指定显示用于转化后的<div>标记的名称,无返回值,大家进行网站开发时可以将改函数保存在JS文件中,以便重用 代码如下: 复制代码 代码如下: <script>function clockon(bgclock){ var now = new Date(); var year = now.getYear(); var month = now.getMonth();