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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
jquery foreach使用示例
Sep 12 Javascript
javascript回到顶部特效
Jul 30 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
js实现滑动进度条效果
Aug 21 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
Terran剧情介绍
2020/03/14 星际争霸
Smarty安装配置方法
2008/04/10 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
django从后台返回html代码的实例
2020/03/11 Python
django中的数据库迁移的实现
2020/03/16 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
聊聊python中的异常嵌套
2020/09/01 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
幼儿园开学家长寄语
2014/01/19 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
中学社团活动总结
2015/05/07 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python