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将XML转成JSON的方法
Mar 12 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
详解vuex commit保存数据技巧
Dec 25 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
浅谈python中set使用
2016/06/30 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
Python中的全局变量如何理解
2020/06/04 Python
python字典按照value排序方法
2020/12/28 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
公司董事长职责
2013/12/12 职场文书
高中生期末评语大全
2014/01/28 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
铣工实训报告
2014/11/05 职场文书
2015年环卫工作总结
2015/04/28 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
python实现自动化群控的步骤
2021/04/11 Python