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 相关文章推荐
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
JavaScript实现各种排序的代码详解
Aug 28 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
PHP简单获取视频预览图的方法
2015/03/12 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
应付会计岗位职责
2013/12/12 职场文书
银行办公室岗位职责
2014/03/10 职场文书
捐资助学倡议书
2014/04/15 职场文书
导游个人求职信
2014/04/25 职场文书
通信工程专业求职信
2014/06/04 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2015年中秋节主持词
2015/07/30 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书