이 문서의 예에서는 양식 표시줄에 전체 형식의 시간 시계 효과를 표시하는 js 구현 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
여기서 시연한 폼 바 특수 효과 시계는 시간과 날짜 효과를 전체 날짜 형식으로 표시합니다. 이전에는 요일과 날짜를 웹 페이지에 직접 표시할 수 있었습니다. 하지만 이 코드는 양식 상자의 텍스트에 시간을 표시합니다. 코드를 보면 이해할 수 있습니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
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 프로그래밍 설계에 도움이 되기를 바랍니다.