JS获取当前日期时间并定时刷新示例


Posted in Javascript onMarch 04, 2021

JS获取当前日期时间

var date = new Date(); 
date.getYear(); //获取当前年份(2位) 
date.getFullYear(); //获取完整的年份(4位,2014) 
date.getMonth(); //获取当前月份(0-11,0代表1月) 
date.getDate(); //获取当前日(1-31) 
date.getDay(); //获取当前星期X(0-6,0代表星期天) 
date.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) 
date.getHours(); //获取当前小时数(0-23) 
date.getMinutes(); //获取当前分钟数(0-59) 
date.getSeconds(); //获取当前秒数(0-59) 
date.getMilliseconds(); //获取当前毫秒数(0-999) 
date.toLocaleDateString(); //获取当前日期 如 2014年6月25日 
date.toLocaleTimeString(); //获取当前时间 如 下午4:45:06 
date.toLocaleString(); //获取日期与时间 如 2014年6月25日 下午4:45:06

注意:getYear()和getFullYear()都可以获取年份,但两者稍有区别

getYear()在浏览器中显示则为:114 (以2014年为例),原因则是getYear返回的是"当前年份-1900"的值(即年份基数是1900)

使用JS来获取年份都使用:getFullYear()

getMonth()需要加1,如下面的函数

// 获取当前日期时间
function getDatetime() {
  var now = new Date();
  var year = now.getFullYear();    
  var month = now.getMonth() + 1;   
  var day = now.getDate();      
  var hh = now.getHours();      
  var mm = now.getMinutes();     
  var ss = now.getSeconds();     
  var clock = year + "-";
  if (month < 10)
    clock += "0";
  clock += month + "-";
  if (day < 10)
    clock += "0";
  clock += day + " ";
  if (hh < 10)
    clock += "0";
  clock += hh + ":";
  if (mm < 10) clock += '0';
  clock += mm + ":";
  if (ss < 10) clock += '0';
  clock += ss;
  return clock;
}
// 获取当前日期时间
function timestampToTime(timestamp) {
  var date = new Date(timestamp);
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ';
  var hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + ':';
  var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ':';
  var ss = date.getSeconds() < 10 ? '0' + date.getDate() : date.getSeconds() ;
  return Y + M + D + hh + mm + ss;
}

定时刷新

定时刷新则使用setInterval,具体setTimeout与setInterval的区别参考其他资料。

1、首先页面需要一区域用于显示时间

<div id="showDate"></div>

2、获取时间

<script type="text/javascript"> 
$(function(){ 
setInterval("getTime();",1000); //每隔一秒执行一次 
}) 
//取得系统当前时间 
function getTime(){ 
var myDate = new Date(); 
var date = myDate.toLocaleDateString(); 
var hours = myDate.getHours(); 
var minutes = myDate.getMinutes(); 
var seconds = myDate.getSeconds(); 
$("#showDate").html(date+" "+hours+":"+minutes+":"+seconds); //将值赋给div 
} 
</script>

使用toLocaleDateString()直接获取年月日,不需要再单独获取年、月、日

而toLocaleTimeString()可直接获取时分秒,由于它获取的格式不是需要的。于是可单独获取。

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
Vue异步加载about组件
Oct 31 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
JavaScript前端面试组合函数
Jun 21 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 #Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 #Javascript
php读取sqlite数据库入门实例代码
Jun 25 #Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 #Javascript
node.js学习总结之调式代码的方法
Jun 25 #Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 #Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 #Javascript
You might like
Terran魔法科技
2020/03/14 星际争霸
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
浅谈php提交form表单
2015/07/01 PHP
yii用户注册表单验证实例
2015/12/26 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python 字符串常用函数详解
2019/09/11 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
python GUI模拟实现计算器
2020/06/22 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
成考报名单位证明范本
2014/01/16 职场文书
2014学年自我鉴定
2014/02/23 职场文书
法人授权委托书
2014/04/03 职场文书
爱心助学感谢信
2015/01/21 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
家长意见书
2015/06/04 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers