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中奇葩的假值示例应用
Mar 11 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 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
第九节 绑定 [9]
2006/10/09 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python3实现点餐系统
2019/01/24 Python
python 实现return返回多个值
2019/11/19 Python
django框架两个使用模板实例
2019/12/11 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
python绘图模块之利用turtle画图
2021/02/12 Python
python 实现IP子网计算
2021/02/18 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
乳制品整治工作方案
2014/05/29 职场文书
体育节口号
2014/06/19 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python