如何将Javascript运行时间放在INPUT标记中

Question

Credits to the person I get this Javascript code for running time (Cleared my history and forgot the site, so sorry.) Javascript code for getting time.

<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>

My form:

<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 ?>" />

The time is working but this is in PHP to get the time and needs to refresh. What I want is a running time in Javascript that doesn't need to refresh and indeed it's working but only in <p> and <h1> tags (in what I tried). It displays the time dynamically.

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

Aside from the input tags I don't know how to display the javascript in HTML Input tag. I tried some but it displays blank. I need it to be displayed in an INPUT tag for some reason.

Any revisions or suggestions will help.

Your help will be greatly appreciated. Thanks.

Answer 1

For an input tag, the innerHtml attribute is improper. Use the value attribute instead:

timeElement.value = currentTime;

If later on you wish to apply some styling, use CSS instead:

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

Answer 2

The html:

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

The 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);

The fiddle:

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

Answer 3

In your code:

> function DisplayTime(){

By convention, identifiers starting with a capital letter are reserved for constructors. Plain functions names should start with a lower case letter.

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

I doubt that there are any browsers in use that require document.all , you can kill two birds with one stone doing:

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

.

>  var CurrentDate=new Date()

Note that variable names starting with a capital letter are, by convention, reserved for constructors. And since this variable is internal and it is quite clear that it's a date object, and the only date object in this function, consider making the name shorter for convenience:

    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;

You can make all that a lot shorter with a small helper function to pad values and some handy operators and methods:

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>"

All that styling should be applied to the containing element directly, and the HTML is invalid anyway (the font tag was deprecated in HTML 4 and is removed in HTML 5, tags are not balanced). Rather than replacing the innerHTML, you can provide a robust setText function to set the text content of an element (see below).

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

Don't pass a string to setTimeout , it is passed the Function constructor and is a slow and inefficient way to pass the function, just pass a reference. Also, set the function to run just after the next full second. So the full function becomes:

// 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; 

And the HTML:

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