当前位置: 首页 > 编程笔记 >

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

巫研
2023-03-14
本文向大家介绍js实现Form栏显示全格式时间时钟效果代码,包括了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" target="_blank">设计有所帮助。

 类似资料:
  • 本文向大家介绍又一款js时钟!transform实现时钟效果,包括了又一款js时钟!transform实现时钟效果的使用技巧和注意事项,需要的朋友参考一下 又来一个时钟效果了,这个的实现不需要canvas,都是div、ul、li画出的,好玩有真实。  哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难。 主要是一个css里transform的使用的思路,transform里有很多变

  • 本文向大家介绍js实现的奥运倒计时时钟效果代码,包括了js实现的奥运倒计时时钟效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现的奥运倒计时时钟效果代码。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 希望本文所述对大家JavaScript程序设计有所帮助。

  • 本文向大家介绍Python实现时钟显示效果思路详解,包括了Python实现时钟显示效果思路详解的使用技巧和注意事项,需要的朋友参考一下 语言:Python IDE:Python.IDE 1.编写时钟程序,要求根据时间动态更新 2.代码思路 需求:5个Turtle对象, 1个绘制外表盘+3个模拟表上针+1个输出文字 Step1:建立Turtle对象并初始化 Step2:静态表盘绘制 Step3:根据

  • 本文向大家介绍js流动式效果显示当前系统时间,包括了js流动式效果显示当前系统时间的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js流动式时间的实现代码,供大家参考,具体内容如下 效果图: 实现代码: 以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

  • 本文向大家介绍javascript+jQuery实现360开机时间显示效果,包括了javascript+jQuery实现360开机时间显示效果的使用技巧和注意事项,需要的朋友参考一下 实现效果: 实现原理:   给关闭按钮绑定点击事件,点击以后触发动画效果。利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设

  • 本文向大家介绍php格式化时间戳显示友好的时间实现思路及代码,包括了php格式化时间戳显示友好的时间实现思路及代码的使用技巧和注意事项,需要的朋友参考一下 在项目中时间一律显示为2014-10-20 10:22显得很呆板。在微博、QQ空间等网站通常会显示为几秒前,几分钟前,几小时前等容易阅读的时间,我们称之为友好的时间格式。那么用php怎么实现呢? 大体思路如下: 如果是跨年并且大于3天就显示为具