js implements the Form bar to display the full format time clock effect code

js implements the Form bar to display the full format time clock effect code_javascript skills

WBOY

Release： 2016-05-16 15:44:27

Original

1402 people have browsed it

The example in this article describes the js implementation code to display the full-format time clock effect in the Form bar. Share it with everyone for your reference. The details are as follows:

The Form bar special effect clock demonstrated here displays the time and date effect in full date format. It can display the day of the week and the day of the month. In the past, it was displayed directly on the web page, but this code displays the time in the text of the form. box, look at the code and you will understand.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<!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) &#63; "0" : "") + month + "月";
 timeValue += date + "日 ";
 timeValue += (Day[day]) + " ";
 timeValue += ((hours <= 12) &#63; hours : hours - 12);
 timeValue += ((minutes < 10) &#63; ":0" : ":") + minutes;
 timeValue += ((seconds < 10) &#63; ":0" : ":") + seconds;
 timeValue += (hours < 12) &#63; "上午" : "下午";
 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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.