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

 更新时间:2015年08月19日 09:55:27   作者:企鹅  
这篇文章主要介绍了js实现Form栏显示全格式时间时钟效果代码,可读取当前的完整时间并实时显示,非常具有实用价值,需要的朋友可以参考下

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-form-input-showtime-codes/

具体代码如下:

<!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程序设计有所帮助。

相关文章

  • 生成html静态文件后的分页(客户端版)

    生成html静态文件后的分页(客户端版)

    生成html静态文件后的分页(客户端版)...
    2006-07-07
  • javascript简单性能问题及学习笔记

    javascript简单性能问题及学习笔记

    最近在看一本书:《高性能javaScript》,发现自己平时写js存在很多小细节上的问题,虽然这些问题不会导致程序运行出错,但是会导致界面加载变慢,用户体验变差,那么我们就来细细数一下应该注意的地方吧
    2014-02-02
  • 用javascript做拖动布局的思路

    用javascript做拖动布局的思路

    这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间, 七拼八凑,总算是把这个效果写出来了。哎!还是js的功夫太差。因为是边找资料边写的,很多地方印象不深, 时间一长,再重新写估计也难,所以把当时的思路记录一下!也希望大虾指点一下!
    2008-05-05
  • 使用JavaScript获取地址栏参数的方法

    使用JavaScript获取地址栏参数的方法

    这篇文章主要介绍了几种使用JavaScript获取地址栏参数的方法以及注意事项,非常的实用,这里推荐给大家
    2014-12-12
  • Javascript显示和隐藏ul列表的方法

    Javascript显示和隐藏ul列表的方法

    这篇文章主要介绍了Javascript显示和隐藏ul列表的方法,涉及javascript针对页面元素遍历及显示与隐藏的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 一步快速解决微信小程序中textarea层级太高遮挡其他组件

    一步快速解决微信小程序中textarea层级太高遮挡其他组件

    这篇文章主要给大家介绍了关于如何通过一步快速解决微信小程序中textarea层级太高遮挡其他组件问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • JavaScript继承的三种方法实例

    JavaScript继承的三种方法实例

    这篇文章主要给大家介绍了关于JavaScript继承的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • echart自适应宽度的两种方法实例

    echart自适应宽度的两种方法实例

    最近工作中element后台管理使用Echarts图表,在使用过程中也遇到了些问题,下面这篇文章主要给大家介绍了关于echart自适应宽度的两种方法,需要的朋友可以参考下
    2022-12-12
  • uniapp小程序底部tabbar图标大小设置办法

    uniapp小程序底部tabbar图标大小设置办法

    这篇文章主要给大家介绍了关于uniapp小程序底部tabbar图标大小设置办法的相关资料,在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,需要的朋友可以参考下
    2023-08-08
  • js实现接收表单的值并将值拼在表单action后面的方法

    js实现接收表单的值并将值拼在表单action后面的方法

    这篇文章主要介绍了js实现接收表单的值并将值拼在表单action后面的方法,涉及JavaScript动态操作字符串及表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论