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 相关文章推荐
js计算德州扑克牌面值的方法
Mar 04 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
JS实现元素上下左右移动效果
Oct 18 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php表单敏感字符过滤类
2014/12/08 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python一些性能分析的技巧
2020/08/30 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
pandas按条件筛选数据的实现
2021/02/20 Python
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
公司请假条格式
2014/04/11 职场文书
销售员岗位职责
2014/06/09 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python