0

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

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

对你的帮助表示感谢。谢谢。

4

3 回答 3

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';
于 2013-06-06T01:28:07.933 回答
0

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

于 2013-06-06T01:58:53.463 回答
0

在您的代码中：

> 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>
于 2013-06-06T02:03:43.373 回答