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 相关文章推荐
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python unittest模块用法实例分析
2018/05/25 Python
python实现图片九宫格分割
2021/03/07 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
物业管理个人自我评价
2013/11/08 职场文书
学生打架检讨书
2014/02/14 职场文书
客服专员岗位职责
2014/02/28 职场文书
施工安全汇报材料
2014/08/17 职场文书
励志演讲稿600字
2014/08/21 职场文书
销售顾问工作计划书
2014/09/15 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
教育实习指导教师评语
2014/12/31 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
学校远程教育工作总结
2015/08/11 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python