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 this 深入理解
Jul 30 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
生成二维码方法汇总
Dec 26 Javascript
js中this的用法实例分析
Jan 10 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
angular6开发steps步骤条组件
Jul 04 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
一个取得文件扩展名的函数
2006/10/09 PHP
第三节--定义一个类
2006/11/16 PHP
php类
2006/11/27 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JS实现self的resend
2010/07/22 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
javascript数组的使用
2013/03/28 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
js中实例与对象的区别讲解
2019/01/21 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
使用python画社交网络图实例代码
2019/07/10 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Django之腾讯云短信的实现
2020/06/12 Python
美国家具网站:Cymax
2016/09/17 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
房地产营销活动策划方案
2014/09/15 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
大学生学年个人总结
2015/02/15 职场文书
离婚财产分割协议书
2015/08/11 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书