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 相关文章推荐
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Bootstrap表单布局
Jul 19 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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 date()日期时间函数详解
2010/05/16 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP加密解密实例分析
2015/12/25 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
javascript中floor使用方法总结
2019/02/02 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
详解python中docx库的安装过程
2019/11/08 Python
python3中确保枚举值代码分析
2020/12/02 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
法制宣传日活动总结
2014/04/29 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
银行求职信模板
2015/03/20 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js