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设置css属性的代码
Dec 28 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
JavaScript中的类型检查
Feb 03 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
浅析VUE防抖与节流
Nov 24 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
学习Vue组件实例
2018/04/28 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python 互换字典的键值对实例
2019/02/12 Python
python 变量初始化空列表的例子
2019/11/28 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
顶岗实习接收函
2014/01/09 职场文书
企业管理培训感言
2014/01/27 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python