js实现Form栏显示全格式时间时钟效果代码


Posted in Javascript onAugust 19, 2015

本文实例讲述了js实现Form栏显示全格式时间时钟效果代码。分享给大家供大家参考。具体如下:

这里演示的Form栏特效时钟,显示全日期格式的时间日期效果,可显示星期几、几月几号,以往都是直接显示在网页中,而本代码是将时间显示在表单的文本框中,看一下代码就明白了。

运行效果截图如下:

js实现Form栏显示全格式时间时钟效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Form栏特全时钟</TITLE>
</HEAD>
<body bgcolor="#ffffff" onLoad="startclock()">
<script language="JavaScript">
<!-- Hide
 var timerID = null
 var timerRunning = false
 function MakeArray(size) 
 {
 this.length = size;
 for(var i = 1; i <= size; i++)
 {
 this[i] = "";
 }
 return this;
 }
 function stopclock (){
 if(timerRunning)
 clearTimeout(timerID);
 timerRunning = false
 }
 function showtime () {
 var now = new Date();
 var year = now.getFullYear();
 var month = now.getMonth() + 1;
 var date = now.getDate();
 var hours = now.getHours();
 var minutes = now.getMinutes();
 var seconds = now.getSeconds();
 var day = now.getDay();
 Day = new MakeArray(7);
 Day[0]="星期天";
 Day[1]="星期一";
 Day[2]="星期二";
 Day[3]="星期三";
 Day[4]="星期四";
 Day[5]="星期五";
 Day[6]="星期六";
 var timeValue = "";
 timeValue += year + "年";
 timeValue += ((month < 10) ? "0" : "") + month + "月";
 timeValue += date + "日 ";
 timeValue += (Day[day]) + " ";
 timeValue += ((hours <= 12) ? hours : hours - 12);
 timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
 timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
 timeValue += (hours < 12) ? "上午" : "下午";
 document.jsfrm.face.value = timeValue;
 timerID = setTimeout("showtime()",1000);
 timerRunning = true
 }
 function startclock () {
 stopclock();
 showtime()
 }
 //-->
</script>
<form name='jsfrm'>
<input type=text name='face' size=34 value=''>
</form>
</BODY>
</HTML>

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

Javascript 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
js函数调用常用方法详解
Dec 03 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
easyui Droppable组件实现放置特效
Aug 19 #Javascript
js实现简单的联动菜单效果
Aug 19 #Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 #Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 #Javascript
easyui Draggable组件实现拖动效果
Aug 19 #Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 #Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 #Javascript
You might like
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
如何使用python切换hosts文件
2020/04/29 Python
Python如何实现的二分查找算法
2020/05/27 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
学生实习自我鉴定
2013/10/11 职场文书
家长写给老师的建议书
2014/03/13 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
情况说明书格式及范文
2019/06/24 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL