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 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
swiper自定义分页器使用方法详解
Sep 14 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
PHP ajax 分页类代码
2008/11/13 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
在PHP中使用redis
2013/11/04 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
javascript中对对层的控制
2006/12/29 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
python实现的防DDoS脚本
2011/02/08 Python
Python中的默认参数详解
2015/06/24 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
送货司机岗位职责
2013/12/11 职场文书
2015年安全月活动总结
2015/03/26 职场文书
学校远程教育工作总结
2015/08/11 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android