javascript实现模拟时钟的方法


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript实现模拟时钟的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>javascript模拟时钟</title>
 <!--Javascript示例代码解释:
 这个示例用到了Javascript内置对象Date的getFullYear,
 getMonth和getDate方法。首先申明一个变量d,var d = new Date(),
 表示将当天的日期值赋给变量d。然后使用getFullYear得到年份的值,
 用getMonth得到月份值(注:getMonth返回值范围为0到11,
 所以要得到实际的月份,还要加1),
 用getDate得到当天日期所在月份的日期值。
 这个示例还用到了"test?语句1:语句2",
 意思是如果符合test条件,那么执行语句1,
 否则使用语句2。计算月和日都用到了这个语法,
 如果月和日小于10,在月和日的值之前应该加0。=-->
 <script type="text/javascript">
  function Format2Len(i) {
//   if (i < 10) {
//    return "0" + i;
//   }
//   else {
//    return i;
   //   }
   return i < 10 ? "0" + i : i;
  }
  function RefreshClock() {
   var CurrentTime = new Date();
   var timeStr = CurrentTime.getFullYear() + "-" +
     Format2Len(CurrentTime.getMonth()+1) + "-" +
     Format2Len(CurrentTime.getDate()) + " " +
     Format2Len(CurrentTime.getHours()) + ":" +
     Format2Len(CurrentTime.getMinutes()) + ":" +
     Format2Len(CurrentTime.getSeconds());
   txtClock.value = timeStr;
  }
  setInterval("RefreshClock()", 1000);
 </script>
</head>
<body onload="RefreshClock()">
<!--页面加载的时候执行一次-->
 当前时间:<input type="text" id="txtClock" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
原生JS实现留言板功能
Feb 08 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 #Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 #Javascript
javascript中clipboardData对象用法详解
May 13 #Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 #Javascript
浅谈jQuery中replace()方法
May 13 #Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 #Javascript
JS实现模拟风力的雪花飘落效果
May 13 #Javascript
You might like
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
vuejs指令详解
2017/02/07 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
nuxt.js 缓存实践
2018/06/25 Javascript
vue 组件简介
2020/07/31 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
Python多线程学习资料
2012/12/19 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
介绍Ibatis的核心类
2013/11/18 面试题
大学生专科学习生活的自我评价
2013/12/07 职场文书
社区学习十八大感想
2014/01/22 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
数控专业自荐书范文
2014/03/16 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
读书活动总结范文
2014/04/26 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
同学会邀请函模板
2015/01/30 职场文书
欢送领导祝酒词
2015/08/12 职场文书
Python类方法总结讲解
2021/07/26 Python