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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
从javascript语言本身谈项目实战
Dec 27 Javascript
HTTP状态代码以及定义(解释)
Feb 02 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
js生成随机数方法和实例
Jan 17 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php简单图像创建入门实例
2015/06/10 PHP
js 替换
2008/02/19 Javascript
javascript中的new使用
2010/03/20 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
详解vue 命名视图
2019/08/14 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
python版大富翁源代码分享
2018/11/19 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Django的Modelforms用法简介
2019/07/27 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
公司市场部岗位职责
2013/12/02 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS