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 编写匿名函数的几种方法
Feb 21 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
实现vuex原理的示例
Oct 21 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Python读写压缩文件的方法
2020/07/30 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
回门宴父母答谢词
2014/01/26 职场文书
教师个人剖析材料
2014/02/05 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Python中的xlrd模块使用整理
2021/06/15 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
golang语言指针操作
2022/04/14 Golang