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 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
PHP memcache扩展的三种安装方法
2009/04/26 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
下载给定网页上图片的方法
2014/02/18 Python
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
从零学Python之hello world
2014/05/21 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
经典婚礼主持开场白
2014/03/13 职场文书
学员自我鉴定
2014/03/19 职场文书
四下基层实施方案
2014/03/28 职场文书
建设投标担保书
2014/05/13 职场文书
运动会拉拉队口号
2014/06/09 职场文书
合作协议书范文
2014/08/20 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书