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的获取mouse坐标插件的实现代码
Apr 01 Javascript
再论Javascript的类继承
Mar 05 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
js判断节假日实例代码
Dec 27 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
javascript中floor使用方法总结
Feb 02 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实现的MySQL通用查询程序
2007/03/11 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python日期相关操作实例小结
2019/06/24 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
函授本科毕业生自我鉴定
2013/10/16 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
小学教师教学反思
2016/02/24 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Redis过期数据是否会被立马删除
2022/07/23 Redis