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的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
ajax php 实现写入数据库
2009/09/02 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP制作用户注册系统
2015/10/23 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python 日志增量抓取实现方法
2018/04/28 Python
详解python3中tkinter知识点
2018/06/21 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
教学器材管理制度
2014/01/26 职场文书
团支部建设方案
2014/05/02 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2015年防汛工作总结
2015/05/15 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
MySQL系列之六 用户与授权
2021/07/02 MySQL
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android