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 cookie插件代码类
May 26 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
详解Javascript继承的实现
Mar 25 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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中进行身份认证
2006/10/09 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php实例化一个类的具体方法
2019/09/19 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
js中判断控件是否存在
2010/08/25 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python笔记(2)
2012/10/24 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python中logger日志模块详解
2020/08/04 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
纽约海:Sea New York
2018/11/04 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
村优秀党员事迹材料
2014/01/15 职场文书
班风口号
2014/06/18 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
公司仓库管理制度
2015/08/04 职场文书
学会感恩主题班会
2015/08/12 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS