JavaScript页面实时显示当前时间实例代码


Posted in Javascript onOctober 23, 2016

前言

这次认认真真又重新看了相关内容,现把需要注意的地方总结如下:

1、通过getDay()得到的星期数是从0开始,0表示星期天,之后从1~6依次表示星期一到星期六;

2、得到日期需使用getDate()而不是getDay() ,因为可能习惯性地认为日期就是天数,可能会使用getDay() ,但其实getDay()是用于得到星期数的;

3、通过getMonth()得到月份,从0开始计数,所以需要再加1。

实例代码如下:

<html>
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <link rel="stylesheet" type="text/css" href="">
  <script type="text/javascript"></script>
  <style type="text/css">
    input{
      width: 200px;
    }
  </style>
</head>
<body>
  <input id="input">
  <script type="text/javascript">
    var in_1 = document.getElementById('input');
    function showTime(){
      var date = new Date();
      var week = date.getDay();
      var weekday;
      switch(week){
        case 0: weekday = '星期天';break;
        case 1: weekday = '星期一';break;
        case 2: weekday = '星期二';break;
        case 3: weekday = '星期三';break;
        case 4: weekday = '星期四';break;
        case 5: weekday = '星期五';break;
        case 6: weekday = '星期六';break;
      }
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      var in_1 = document.getElementById('input');
      in_1.value = year + '年' + month + "月" + day + '日'+' ' + weekday + ' ' + hour + ':' + minute + ':' + second;
      setTimeout(showTime,1000);
    }
    showTime();
  </script>
</body>
</html>

总结

以上就是利用JavaScript实现页面实时显示时间的全部内容,文中介绍的方法还是很简单易懂的,非常适合大家学习或者直接使用,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
JavaScript中的Screen屏幕对象
Jan 16 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
jquery 实现回车登录详解及实例代码
Oct 23 #Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 #Javascript
web前端开发upload上传头像js示例代码
Oct 22 #Javascript
jQuery中$.ajax()方法参数解析
Oct 22 #Javascript
详解Javascript函数声明与递归调用
Oct 22 #Javascript
js中利用cookie实现记住密码功能
Aug 20 #Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 #Javascript
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
js function定义函数的几种不错方法
2014/02/27 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
详解vue 组件
2020/06/11 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
tornado 多进程模式解析
2018/01/15 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python中退出多层循环的方法
2018/11/27 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
python tkinter实现连连看游戏
2020/11/16 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
CSS3 文字动画效果
2020/11/12 HTML / CSS
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
大学军训感言1000字
2014/02/25 职场文书
检讨书1000字
2014/10/11 职场文书
保研专家推荐信范文
2015/03/25 职场文书
2015年外联部工作总结
2015/04/03 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
开业典礼致辞
2015/07/29 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
win10清理dns缓存
2022/04/19 数码科技