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 相关文章推荐
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
angular select 默认值设置方法
Jun 23 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
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
服务器web工具 php环境下
2010/12/29 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
python快排算法详解
2019/03/04 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python中添加模块导入路径的方法
2021/02/03 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
反邪教警示教育方案
2014/05/13 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
导游词开场白
2015/01/31 职场文书
毕业生学校组织意见
2015/06/04 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
5个实用的JavaScript新特性
2022/06/16 Javascript
springboot读取resources下文件的方式详解
2022/06/21 Java/Android