javascript实现页面的实时时钟显示示例


Posted in Javascript onAugust 06, 2020

时钟实现

实现这个时钟时间需要解决以下三个问题:

  • 获得当前时间,并格式化
  • 如何可以在页面中显示时间
  • 让时间动起来

1、获得当前时间,并格式化

要获得当前时间,可以使用JavaSctipt的Date对象,默认构造函数会返回当前时间。存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数。

setXxx 这些方法用于设置时间和日期值

getXxx 这些方法用于获取时间和日期值

实现代码如下:  

function getnow(){

      //1、获得当前时间,格式化时间

      var now=new Date(); 

      var year=now.getFullYear(); 

      var month=now.getMonth()+1;

      if(month<10){

       month="0"+month;

      } 

      var date=now.getDate();

      if(date<10){

       date="0"+date;

      }

     var hour=now.getHours();

      if(hour<10){

       hour="0"+hour;

      }

     var minute=now.getMinutes();

      if(minute<10){

       minute="0"+minute;

      } 

      var second=now.getSeconds();

      if(second<10){

       second="0"+second;

      }

      var nowstr=year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second;

     alert(nowstr);

}

在body标签中使用onLoad事件绑定这个函数,使页面一加载就运行这个时钟。

<body οnlοad="getnow()">

 </body>

运行代码就可以看到如下效果:

javascript实现页面的实时时钟显示示例

2、如何可以在页面中显示时间

目的当然不是要通过弹出框的方式显示时间,而是让他在页面中显示,可以在页面中定义一个span标签显示时间,如何可以使用JavaScript操作标签的内容呢?这里就需要用到内置对象document了,它提供了一个getElementById方法,可以根据id获得标签对象,然后就可以修改这个对象了。现在doby中顶一个一个span对象,并定义id属性,值为nowspan,代码如下:   

<body οnlοad="

  <span id="nowspan" >

  </span>

 </body>

修改上面的javascript代码,获得这个对象并把格式化好的时间赋给它。

// alert(nowstr);      

//2、显示时间 html

 //获得标签对象

var nowspan=document.getElementById("nowspan");

nowspan.innerHTML=nowstr;

3、让时间动起来

要让时间动起来可以使用setTimeout("函数",毫秒数) 设置定时器:经过指定毫秒值后执行某个函数。实现代码如下:

//3、使时间动起来

setTimeout("getnow()", 1000);

完整代如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<script type="text/javascript">
  function getnow(){
      //1、获得当前时间,格式化时间
      var now=new Date(); 
      var year=now.getFullYear(); 
      var month=now.getMonth()+1;
      if(month<10){
       month="0"+month;
      } 
      var date=now.getDate();
      if(date<10){
       date="0"+date;
      }
     var hour=now.getHours();
      if(hour<10){
       hour="0"+hour;
      }
     var minute=now.getMinutes();
      if(minute<10){
       minute="0"+minute;
      } 
      var second=now.getSeconds();
      if(second<10){
       second="0"+second;
      }
      var nowstr=year+"年"+month+"月"+date+"日 "+hour+":"+minute+":"+second;
      //alert(nowstr);
      //2、显示时间 html
      //获得标签对象
      var nowspan=document.getElementById("nowspan");
      nowspan.innerHTML=nowstr;
      //3、使时间动起来
      setTimeout("getnow()", 1000);
}
</script>
<body onLoad="getnow()">
<span id="nowspan" />
</body>
</html>

运行代码效果:

javascript实现页面的实时时钟显示示例

到此这篇关于javascript实现页面的实时时钟显示示例的文章就介绍到这了,更多相关javascript页面实时时钟内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Javascript如何递归遍历本地文件夹
Aug 06 #Javascript
通过vue刷新左侧菜单栏操作
Aug 06 #Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 #Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 #Javascript
前端开发基础javaScript的六大作用
Aug 06 #Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 #Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 #Javascript
You might like
PHP+AJAX 投票器功能
2017/11/11 PHP
解放web程序员的输入验证
2006/10/06 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
从零学Python之入门(三)序列
2014/05/25 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python selenium firefox使用详解
2019/02/26 Python
python的sorted用法详解
2019/06/25 Python
python反转列表的三种方式解析
2019/11/08 Python
如何基于Python实现自动扫雷
2020/01/06 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
大学生社会实践评语
2014/04/25 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers