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之解决IE下不渲染的bug
Jun 29 Javascript
JS 常用校验函数
Mar 26 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
JavaScript的==运算详解
Jul 20 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
axios封装与传参示例详解
Oct 18 Javascript
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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
JS前端笔试题分析
2016/12/19 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
Python中的闭包总结
2014/09/18 Python
解析Python中的异常处理
2015/04/28 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
大学生党课思想汇报
2013/12/29 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
置业顾问岗位职责
2014/03/02 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
公司承诺书范文
2014/05/19 职场文书
经理任命书模板
2014/06/06 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python