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的console.log()用法小结
May 31 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
js实现多图左右切换功能
Aug 04 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
使用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页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
简单了解vue.js数组的常用操作
2019/06/17 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
Windows下为Python安装Matplotlib模块
2015/11/06 Python
python使用opencv读取图片的实例
2017/08/17 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
写好求职信第一句话的技巧
2013/10/26 职场文书
小学开学寄语
2014/01/19 职场文书
车辆转让协议书
2014/04/15 职场文书
给学校的建议书范文
2014/05/15 职场文书
党员一帮一活动总结
2014/07/08 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
初中生毕业评语
2014/12/29 职场文书
门面租赁合同范文
2019/08/06 职场文书