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 相关文章推荐
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
需要发散思维学习PHP
2009/06/29 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php技巧小结【推荐】
2017/01/19 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
动态加载js的几种方法
2006/10/23 Javascript
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python 中split 和 strip的实例详解
2017/07/12 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
带你认识Django
2019/01/15 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python队列原理及实现方法示例
2019/11/27 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
优秀毕业生事迹材料
2014/02/12 职场文书
建筑管理专业求职信
2014/07/28 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript