如何將Javascript運行時間放在INPUT標記中

Question

致信人我收到此Javascript代碼用於運行時間（清除了我的歷史記錄並忘記了該網站，非常抱歉。）Javascript代碼用於獲取時間。

<script type="text/javascript"> 
    function DisplayTime(){ 
    if (!document.all && !document.getElementById) 
     return 
    timeElement=document.getElementById? document.getElementById("mytime"): document.all.tick2 
    var CurrentDate=new Date() 
    var hours=CurrentDate.getHours() 
    var minutes=CurrentDate.getMinutes() 
    var seconds=CurrentDate.getSeconds() 
    var DayNight="PM" 
    if (hours<12) DayNight="AM"; 
    if (hours>12) hours=hours-12; 
    if (hours==0) hours=12; 
    if (minutes<=9) minutes="0"+minutes; 
    if (seconds<=9) seconds="0"+seconds; 
    var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight; 
    timeElement.innerHTML="<font style='font-family:verdana, arial,tahoma;font- size:12px;color:#E25984; font-weight:bold;'>"+currentTime+"</b>" 
    setTimeout("DisplayTime()",1000) 
    } 
    window.onload=DisplayTime 
</script> 

我的形式：

<form class="signin" method="POST" action="testVal.php"> 
    <span style="margin-top:15px; float:left;">Time</span> 
    <input name="times" type="text" id="mytime" value="<?php echo $mytime ?>" /> 

的時間工作，但這個是PHP獲取時間和需要刷新。我想要的是在Javascript中的運行時間，不需要刷新，實際上它的工作，但只有在<p>和<h1>標籤（我試過）。它動態顯示時間。

<p>Current time:</p><p id="mytimes"><p> 

除了輸入標籤，我不知道如何在HTML輸入標籤中顯示JavaScript。我嘗試了一些，但它顯示空白。我需要它出於某種原因在INPUT標籤中顯示。

任何修訂或建議將有所幫助。

您的幫助將不勝感激。謝謝。

Answer 1

對於輸入標籤，innerHtml屬性不合適。使用value屬性改爲：

timeElement.value = currentTime; 

如果以後你想申請一些造型，使用CSS來代替：

timeElement.style.fontWeight = 'bold'; 
timeElement.style.fontFamily = 'Verdana'; 
timeElement.style.fontSize = '12px'; 
timeElement.style.color = '#E25984'; 

Answer 2

的HTML：

<form class="signin" method="POST"> 
    <span style="margin-top:15px; float:left;">Time</span> 
    <input name="times" type="text" id="mytime" value=""/> 
</form> 

js：

window.onload=setInterval(
    function DisplayTime(){ 
     if (!document.all && !document.getElementById) 
      return; 
     timeElement=document.getElementById? document.getElementById("mytime"): document.all.tick2; 
     var CurrentDate = new Date(); 
     var hours = CurrentDate.getHours(); 
     var minutes = CurrentDate.getMinutes(); 
     var seconds = CurrentDate.getSeconds(); 
     var DayNight = "PM"; 
     if (hours<12) DayNight = "AM"; 
     if (hours>12) hours = hours-12; 
     if (hours===0) hours = 12; 
     if (minutes<=9) minutes = "0"+minutes; 
     if (seconds<=9) seconds = "0"+seconds; 
     var currentTime = hours+":"+minutes+":"+seconds+" "+DayNight; 
     timeElement.style.fontWeight = 'bold'; 
     timeElement.style.fontFamily = 'Verdana'; 
     timeElement.style.fontSize = '12px'; 
     timeElement.style.color = '#E25984'; 
     timeElement.value = currentTime; 

    },1000); 

小提琴：

http://jsfiddle.net/dAcwu/1/

Answer 3

在您的代碼：

> function DisplayTime(){ 

按照慣例，標識符開始以一個大寫字母被保留用於構造函數。簡單函數名稱應以小寫字母開頭。

> if (!document.all && !document.getElementById) 
> return 
> timeElement=document.getElementById? document.getElementById("mytime"): document.all.tick2 

我懷疑有使用需要的document.all任何瀏覽器，就可以一舉兩得做：

var timeElement = document.getElementById && document.getElementById("mytime"); 
    if (!timeElement) return; 

。

> var CurrentDate=new Date() 

請注意，按照慣例，以大寫字母開頭的變量名是爲構造函數保留的。而且，由於這個變量是內部的，這是很清楚，這是一個約會對象，並在此功能的唯一日期對象，考慮讓爲方便起見，名稱更短：

var d = new Date(); 

。

> var hours=CurrentDate.getHours() 
> var minutes=CurrentDate.getMinutes() 
> var seconds=CurrentDate.getSeconds() 
> var DayNight="PM" 
> if (hours<12) DayNight="AM"; 
> if (hours>12) hours=hours-12; 
> if (hours==0) hours=12; 
> if (minutes<=9) minutes="0"+minutes; 
> if (seconds<=9) seconds="0"+seconds; 
> var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight; 

可以使所有的小助手功能，以填充值和一些方便的運算符和方法縮短了很多：

function addZ(n){return (n<10? '0' : '') + n;} 
var h = d.getHours(); 
var ampm = h < 12? 'AM' : 'PM'; 
h = h % 12 || 12; 
var timeString = [addZ(h), addZ(d.getMinutes()), addZ(d.getSeconds())].join(':'); 

。

> timeElement.innerHTML="<font style='font-family:verdana, arial,tahoma;font- size:12px;color:#E25984; font-weight:bold;'>"+currentTime+"</b>" 

所有這些造型應直接施加到包含元素，並且HTML是無效的反正（font標籤在HTML 4棄用，在HTML 5被移除時，標籤不均衡）。您可以提供一個強大的setText函數來設置元素的文本內容（請參見下文），而不是替換innerHTML。

> setTimeout("DisplayTime()",1000) 
> } 

字符串不要傳遞給的setTimeout，它傳遞函數的構造，並通過該功能，只需通過參照一個緩慢而低效的方式。另外，將函數設置爲在下一個整秒之後運行。所以，全功能變爲：

// This looks long winded, but it provides a robust way to set 
// the text content for any browser in use. Since this uses a 
// function expression, it must be before any code that calls setText 
var setText = (function() { 
    var div = document.createElement('div'); 

    if (typeof div.textContent == 'string') { 
     div = null; 
     return function (el, s) { 
     el.textContent = s; 
     } 
    } else if (typeof div.innerText == 'string') { 
     div = null; 
     return function (el, s) { 
     el.innerText = s; 
     } 
    } else { 
     div = null; 
     return function (el, s) { 
     while (el.firstChild) { 
      el.removeChild(el.firstChild); 
     } 
     el.appendChild(document.createTextNode(s)); 
     } 
    } 
}()); 

function displayTime(){ 

    var timeElement = document.getElementById && document.getElementById("mytime"); 

    if (!timeElement) return; 

    var d = new Date(); 
    function addZ(n){return (n<10? '0' : '') + n;} 
    var h = d.getHours(); 
    var ampm = h < 12? 'AM' : 'PM'; 
    h = h % 12 || 12; 
    var timeString = [addZ(h), addZ(d.getMinutes()), addZ(d.getSeconds())].join(':') + ' ' + ampm; 
    if (typeof timeElement.textContent == 'string') { 
     timeElement.textContent = timeString; 
    } else if (typeof timeElement.innerText == 'string') { 
     setText(timeElement, timeString); 
    } 

    // Schedule to run just after next full second 
    setTimeout(displayTime, 1020 - d.getMilliseconds()); 
} 

// Start when page loads 
window.onload = displayTime; 

和HTML：<？PHP的echo $指明MyTime對應>

<div id="mytime"></div>