JavaScript 时钟适用于 Chrome，但不适用于 Firefox 或 IE答案

【问题标题】：JavaScript clock works on Chrome but doesn't work with Firefox or IEJavaScript 时钟适用于 Chrome，但不适用于 Firefox 或 IE
【发布时间】：2015-02-13 10:11:27
【问题描述】：

我正在为客户制作几个 PHP 网站，但遇到了一个小问题。

我在页面的顶部和底部有一个 JavaScript 文本时钟（每个都是另一个的副本）。

它们在 Chrome 中可以完美运行，但在 Firefox 和 IE 上有时不能。我制作了一个新的、干净的 PHP 文件并附加了 JS 以检查问题是否来自 Javascript 文件。好像没有。

顶部时钟是GetClock()，底部时钟是GetClockPrint()

这是时钟的 Javascript 代码：

tday=new Array("Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado");
tmonth=new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro");

        function GetClock(){
            var d=new Date();
            var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

            if(nyear<1000) nyear+=1900;
            if(nmin<=9) nmin="0"+nmin;
            if(nsec<=9) nsec="0"+nsec;

            document.getElementById('clockbox').innerHTML="<u><h4>"+tday[nday]+", "+ndate+" de "+tmonth[nmonth]+" de "+nyear+", "+nhour+":"+nmin+":"+nsec+"</h4></u>";
            document.getElementById('clockbox2').innerHTML="<u><h4>"+tday[nday]+", "+ndate+" de "+tmonth[nmonth]+" de "+nyear+", "+nhour+":"+nmin+":"+nsec+"</h4></u>";
        }

        function GetClockPrint(){
            var c=new Date();
            var nday=c.getDay(),nmonth=c.getMonth(),ndate=c.getDate(),nyear=c.getYear(),nhour=c.getHours(),nmin=c.getMinutes(),nsec=c.getSeconds(),ap;


            if(nyear<1000) nyear+=1900;
            if(nmin<=9) nmin="0"+nmin;
            if(nsec<=9) nsec="0"+nsec;

            document.getElementById('clockbox2').innerHTML="<u><h4>"+tday[nday]+", "+ndate+" de "+tmonth[nmonth]+" de "+nyear+", "+nhour+":"+nmin+":"+nsec+"</h4></u>";
        }
        window.onload=function(){
            GetClock();
            }

这是页面本身的 HTML 代码（还没有 PHP 代码）

<table align="center"><!-- Botões de submeter/reiniciar e relógio -->
            <tr>
                <td>
                    <div align="left">
                        <button type="button" id="restart1" onClick="window.open('../../Index.php','_self')"><img src="../../restart.png">Recomeçar</button>
                    </div>
                </td>
                <td valign="middle">
                    <div id="clockbox" align="center"></div>
                </td>
                <td align="right">
                    <div align="right">
                        <button type="button" id="print1" onClick="submeter()"><img src="../../Check.png">Imprimir esta página</button>
                    </div>
                </td>
            </tr>
        </table>
<!-- Start of the second clock code -->
<table align="center">
        <tr>
            <td>
                <div align="left">
                    <button type="button" id="restart2" onClick="window.open('../../Index.php','_self')"><img src="../../restart.png">Recomeçar</button>
                </div>
            </td>
            <td valign="middle">
                <div id="clockbox2" align="center"></div>
            </td>
            <td align="right">
                <div align="right">
                    <button type="button" id="print2" onClick="submeter()"><img src="../../Check.png">Imprimir esta página</button>
                </div>
            </td>
        </tr>
    </table>

请原谅葡萄牙语文本。我不知道这里有什么问题... 我希望时钟在 IE 和 Firefox 上像在 Chrome 上一样正常显示。请大家帮帮我好吗？

我正在使用 XAMPP 来模拟 PHP 服务器。不知道会不会有帮助。

提前谢谢你

【问题讨论】：

只是作为旁注，而不是在 u 标签内使用 h4 标签（我认为这是错误的嵌套）使用 css 来强调时钟框元素。有些浏览器会原谅你，有些则不会。这可能会导致问题
在jsfiddle.net/wjwuLj92 中测试您的代码在 Chrome、FF 和 IE8 (jsfiddle.net/wjwuLj92/embedded/result) 中对我来说看起来是一样的。 FF 或 IE 中的时钟如何不“正常显示”？它是否显示不正确的字符串？它没有显示任何字符串吗？请说明预期的行为以及它在 FF 和 IE 上的失败原因。
@pete 时钟显示在 Chrome 中的按钮和 FF 上的某些页面之间，就像在 jsfiddle 中一样，但在 IE 中（不知道哪个版本，抱歉）它不显示向上。按钮并排，中间没有时钟。这个项目绝对必须是跨浏览器的...
你能找出哪些 IE 版本受到影响吗？另外，您能否澄清“在FF的某些页面中”？ FF中是否有“其他页面”没有出现时钟？
在 IE11（本机上安装的那个）中，时钟不显示。在 FF 中，在我现在正在处理的页面中，同样适用。但在 Chrome 中，它显示得很好。如果有帮助，我可以提供图片。

标签： javascript php html google-chrome clock

【解决方案1】：

我用http://jsfiddle.net/poseavx0/1/ 代替了你的小提琴（你最后有一个额外的}，并且你将它设置为运行'onLoad 而不是No wrap - in <head>，所以你的window.onload 永远不会触发）。

我仍然无法复制问题。

我只能假设您有/有多个 window.onload 调用，随后对 window.onload 的调用将覆盖以前的调用，因为您的评论“我进入 FF，我删除了 a 正文onload 函数”（强调我的）。

解决方案可能是像在小提琴中那样设置window.onload：

window.onload = function () {
    // call as many functions as you want in here
};

Billy 有一个关于时钟的非常有效的点，尽管它不会影响显示。 #clockbox 和 #clockbox2 的 CSS 应该是：

#clockbox, #clockbox2 {
    text-decoration:underline;
    margin: 1.33em 0;
    font-weight: bold;
}

另外，在你的小提琴中，你没有一个元素具有 id 或 clockbox2。相反，它似乎被称为relogio2（基于标记），但您的 JavaScript 并未反映此名称更改。因此，clockbox2 无法设置。

总的来说，您可能会从一个不错的跨浏览器事件附加例程中受益。

var addHandler = function addHandler(object, event, handler, useCapture) {
    var existingHandlers,
        o = typeof object === 'string' ? document.getElementById(object) : object;
    useCapture = !!useCapture; // coerce to boolean
    if ('addEventListener' in o) {
        o.addEventListener(event, handler, useCapture);
    } else if ('attachEvent' in o) {
        o.attachEvent(event, handler);
    } else {
        existingHandlers = o['on' + event];
        if (existingHandlers) {
            o['on' + event] = function (e) {
                existingHandlers(e);
                handler(e);
            };
        } else {
            o['on' + event] = handler;
        }
    }
};

请参阅http://jsfiddle.net/poseavx0/2/ 了解实际情况（这也重构了您的大部分 JavaScript）。

【讨论】：

我一直在搞乱 JS 代码，我似乎已经确定了问题的根源。似乎当 AtribMorada（一种从 localStorage 发布数据的功能）在页面加载时加载时，时钟不会显示。但是当我创建一个按钮来运行 AtribMorada 时，时钟没有问题。我就这样离开了，但目标是让网站尽可能自动化......我会制作一个小版本的网站，只有一两页 + 索引，看看你们能不能得到它工作。顺便说一句，如果可以的话，让 JS 保持基础。我不知道 jQuery 或其中的任何一个...
@RobSp1derp1g：底部小提琴中没有 jQuery。这都是普通的 JavaScript。我只是重写了您的函数以使它们更高效（并为您提供更好的实践示例）。如果有办法与您进行聊天会话，我会很高兴地解释为什么我按照我的方式重构您的代码。您是否有机会更新您的小提琴以包含 AtribMorada 函数，它会在页面加载时加载并导致问题？

【解决方案2】：

你可以使用缪斯..

粘贴此代码即可。

<table align="center"><!-- Botões de submeter/reiniciar e relógio -->
            <tr>
                <td>
                    <div align="left">
                        <button type="button" id="restart1" onClick="window.open('../../Index.php','_self')"><img src="../../restart.png">Recomeçar</button>
                    </div>
                </td>
                <td valign="middle">
                    <div id="clockbox" align="center"></div>
                </td>
                <td align="right">
                    <div align="right">
                        <button type="button" id="print1" onClick="submeter()"><img src="../../Check.png">Imprimir esta página</button>
                    </div>
                </td>
            </tr>
        </table>
<!-- Start of the second clock code -->
<table align="center">
        <tr>
            <td>
                <div align="left">
                    <button type="button" id="restart2" onClick="window.open('../../Index.php','_self')"><img src="../../restart.png">Recomeçar</button>
                </div>
            </td>
            <td valign="middle">
                <div id="clockbox2" align="center"></div>
            </td>
            <td align="right">
                <div align="right">
                    <button type="button" id="print2" onClick="submeter()"><img src="../../Check.png">Imprimir esta página</button>
                </div>
            </td>
        </tr>
    </table>

【讨论】：

恐怕还是不行……好像和我贴的代码一样。另外，我正在使用 Dreamweaver。