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

前端技术 2023/09/08 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/22830

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案