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定时保存表单数据的代码
Mar 17 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
js实现返回顶部效果
Mar 10 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
详解node child_process模块学习笔记
Jan 24 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JS写滑稽笑脸运动效果
May 28 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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 smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python工厂函数用法实例分析
2018/05/14 Python
django session完成状态保持的方法
2018/11/27 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
总经理助理岗位职责
2013/11/08 职场文书
企业办公室岗位职责
2014/03/12 职场文书
四年级学生评语大全
2014/04/21 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers