js动态获取时间的方法分析

 更新时间:2019年08月02日 10:27:06   作者:专属n  
这篇文章主要介绍了js动态获取时间的方法,结合实例形式分析了javascript日期时间计算与页面元素动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了js动态获取时间的方法。分享给大家供大家参考,具体如下:

<script type="text/javascript">
  function show_cur_times(){
    //获取当前日期
    var date_time = new Date();
    //定义星期
    var week;
    //switch判断
    switch (date_time.getDay()){
      case 1: week="星期一"; break;
      case 2: week="星期二"; break;
      case 3: week="星期三"; break;
      case 4: week="星期四"; break;
      case 5: week="星期五"; break;
      case 6: week="星期六"; break;
      default:week="星期天"; break;
    }
    //年
    var year = date_time.getFullYear();
    //判断小于10,前面补0
    if(year<10){
      year="0"+year;
    }
    //月
    var month = date_time.getMonth()+1;
    //判断小于10,前面补0
    if(month<10){
      month="0"+month;
    }
    //日
    var day = date_time.getDate();
    //判断小于10,前面补0
    if(day<10){
      day="0"+day;
    }
    //时
    var hours =date_time.getHours();
    //判断小于10,前面补0
    if(hours<10){
      hours="0"+hours;
    }
    //分
    var minutes =date_time.getMinutes();
    //判断小于10,前面补0
    if(minutes<10){
      minutes="0"+minutes;
    }
    //秒
    var seconds=date_time.getSeconds();
    //判断小于10,前面补0
    if(seconds<10){
      seconds="0"+seconds;
    }
    //拼接年月日时分秒
    var date_str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds+" "+week;
    //显示在id为showtimes的容器里
    document.getElementById("showtimes").innerHTML= date_str;
  }
  //设置1秒调用一次show_cur_times函数
  setInterval("show_cur_times()",100);
</script>

为解决访问该页面出现 "一闪",才出现时间,应当在现在容器(id为showtimes的层)里先调用一次show_cur_times函数;

<div id="showtimes">
  <script language="javascript">show_cur_times();</script>
</div>

运行效果:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:

在线日期/天数计算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器:
http://tools.jb51.net/jisuanqi/datecalc

在线日期天数差计算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具:
http://tools.jb51.net/code/unixtime

更多关于JavaScript相关内容可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • webpack结合express实现自动刷新的方法

    webpack结合express实现自动刷新的方法

    这篇文章主要给大家介绍了关于webpack结合express实现自动刷新的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用webpack具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • js仿淘宝和百度文库的评分功能

    js仿淘宝和百度文库的评分功能

    这篇文章主要为大家详细介绍了js仿淘宝和百度文库的评分功能的相关代码和实现思路,具有一定的参考价值,需要的朋友可以参考下
    2016-05-05
  • uniapp小程序配置tabbar底部导航栏实战指南

    uniapp小程序配置tabbar底部导航栏实战指南

    tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp小程序配置tabbar底部导航栏的相关资料,需要的朋友可以参考下
    2022-09-09
  • 固定表格行列(expression)在IE下适用

    固定表格行列(expression)在IE下适用

    本文为大家介绍下使用expression固定表格行列,这是一种在IE下适用的固定行列的方法,感兴趣的朋友可以学习下,希望对大家有所帮助
    2013-07-07
  • js代码延迟一定时间后执行一个函数的实例

    js代码延迟一定时间后执行一个函数的实例

    下面小编就为大家带来一篇js代码延迟一定时间后执行一个函数的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 解决javascript 全局变量失效的问题

    解决javascript 全局变量失效的问题

    这篇文章主要介绍了解决javascript 全局变量失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2016-04-04
  • 理解javascript异步编程

    理解javascript异步编程

    这篇文章主要为大家介绍了javascript异步编程,从浅入深的学习javascript异步编程,对javascript异步编程感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 上传的js验证(图片/文件的扩展名)

    上传的js验证(图片/文件的扩展名)

    下文给大家介绍下js 验证上传图片以及怎样控制一个上传文件的扩展名,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-04-04
  • 微信小程序实现客服功能(客服消息)的全过程

    微信小程序实现客服功能(客服消息)的全过程

    在最近做的微信小程序中需要实现一个自带的客服功能,下面这篇文章主要给大家介绍了关于微信小程序实现客服功能(客服消息)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JavaScript事件对象event用法分析

    JavaScript事件对象event用法分析

    这篇文章主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
    2018-07-07

最新评论