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 单选框,多选框美化代码
Aug 01 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
js异步编程小技巧详解
Aug 14 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
通过C++学习Python
2015/01/20 Python
python中logging包的使用总结
2018/02/28 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
Python restful框架接口开发实现
2020/04/13 Python
Python如何将模块打包并发布
2020/08/30 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
你会写请假条吗?
2019/06/26 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
python 经纬度求两点距离、三点面积操作
2021/06/03 Python