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无论如何都是无效的（字体标记在HTML 4中已弃用，在HTML 5中被删除，标记不平衡）。您可以提供强大的 setText 函数来设置元素的文本内容（参见下文），而不是替换innerHTML。

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

不要将字符串传递给 setTimeout ，它会传递Function构造函数，并且是一种传递函数的慢速且低效的方法，只需传递引用即可。此外，将功能设置为在下一整秒后运行。所以完整的功能变为：

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

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

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

3 个答案: