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 form表单提交插件asp.net后台中文解码
Jun 12 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
JS数组的高级使用方法示例小结
Mar 14 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
js数组去重的hash方法
2016/12/22 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
centos6.4下python3.6.1安装教程
2017/07/21 Python
python使用super()出现错误解决办法
2017/08/14 Python
python实现三次样条插值
2018/12/17 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
计算机专业大学生的自我评价
2013/11/14 职场文书
业务内勤岗位职责
2014/04/30 职场文书
推广普通话演讲稿
2014/05/23 职场文书
体育课外活动总结
2014/07/08 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
企业承诺书格式范文
2015/04/28 职场文书
办公用品质量保证书
2015/05/11 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技