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

How to put the Javascript running time in an INPUT tag

本文关键字：INPUT Javascript 运行时间      更新时间：2023-09-26

感谢我得到这个运行时间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标签中。

任何修改或建议都会有所帮助。

非常感谢你的帮助。谢谢。

对于输入标签，innerHtml属性不合适。使用value属性代替:

timeElement.value = currentTime;

如果以后你想应用一些样式，使用CSS代替:

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

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/

在你的代码中:

> function DisplayTime(){
按照约定，以大写字母开头的标识符是为构造函数保留的。普通函数名应该以小写字母开头。 
>    if (!document.all && !document.getElementById)
>    return
>    timeElement=document.getElementById? document.getElementById("mytime"): document.all.tick2

我怀疑有任何正在使用的浏览器需要文档。所有，你可以一箭双雕做:

    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，它将传递给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>
相关文章：