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编程起步(第七课)
Feb 27 Javascript
一个加载js文件的小脚本
Jun 28 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
script标签属性用type还是language
2015/01/21 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
学习jQuey中的return false
2015/12/18 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python常见排序算法基础教程
2017/04/13 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
np.dot()函数的用法详解
2020/01/17 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
党风廉设责任书
2014/04/16 职场文书
党员自我剖析材料
2014/08/31 职场文书