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

I'm making a few PHP sites for a client and I have a small problem.

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

I have a JavaScript text clock located at the top and the bottom of the page (each a copy of the other).

我有一个JavaScript文本时钟位于页面的顶部和底部(每个都是另一个的副本)。

They work perfectly in Chrome, but on Firefox and IE it sometimes doesn't. I've made a new, clean PHP file and attached the JS to check if the problem is from the Javascript file. It doesn't appear to be.

它们在Chrome中完美运行,但在Firefox和IE上它有时却没有。我已经创建了一个新的,干净的PHP文件并附加了JS以检查问题是否来自Javascript文件。它似乎不是。

The top clock is GetClock() and the bottom one is GetClockPrint()

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

Here's the Javascript code for the clock:

这是时钟的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();
            }

And here's the HTML code for the page itself (no PHP code yet)

这是页面本身的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>

Please forgive the Portuguese text. I don't know what's wrong here... I want the clock to show on IE and Firefox as normally as it shows on Chrome. Can you guys help me out, please?

请原谅葡萄牙文。我不知道这里有什么问题...我想让时钟在IE和Firefox上正常显示在Chrome上。你能帮帮我吗?

I'm using XAMPP to simulate a PHP server. Don't know if that will be helpful.

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

Thank you in advance

先谢谢你

2 个解决方案

#1

I used http://jsfiddle.net/poseavx0/1/ instead of your fiddle (you had an extra } at the end, and you had it set to run 'onLoad instead of No wrap - in <head>, so your window.onload would never fire).

我使用http://jsfiddle.net/poseavx0/1/而不是你的小提琴(最后你有一个额外的},你设置为运行'onLoad而不是没有换行 - 在,所以你的窗口.onload永远不会开火)。

I was still unable to duplicate the problem.

我仍然无法复制问题。

I can only assume that you have/had multiple window.onload calls where subsequent calls to window.onload would overwrite previous calls because of your comment "I went into FF, and I removed a body onload function" (emphasis mine).

我只能假设您有多个window.onload调用,其中后续调用window.onload将覆盖以前的调用,因为您的注释“我进入FF,我删除了一个正文onload函数”(强调我的)。

The solution to this could be to set up your window.onload as you did in your fiddle:

对此的解决方案可能是设置window.onload,就像你在小提琴中所做的那样:

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

Billy had a very valid point regarding the clocks, although it would not affect the display. Your CSS for #clockbox and #clockbox2 really should be:

比利对时钟有一个非常有效的观点,虽然它不会影响显示器。 #clockbox和#clockbox2的CSS应该是:

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

Also, in your fiddle, you do not have an element with an id of clockbox2. Instead, it seems to be called relogio2 (based on the markup) but your JavaScript does not reflect this name change. As such, clockbox2 cannot be set.

另外,在你的小提琴中,你没有id为clockbox2的元素。相反,它似乎被称为relogio2(基于标记),但您的JavaScript不反映此名称更改。因此,无法设置clockbox2。

Overall, you could probably benefit from a decent cross-browser event attaching routine.

总的来说,你可能会受益于一个体面的跨浏览器事件附加例程。

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

See http://jsfiddle.net/poseavx0/2/ for that in action (which also refactors most of your JavaScript).

请参阅http://jsfiddle.net/poseavx0/2/以了解其实际情况(也重构了大部分JavaScript)。

#2

U can use muse..

你可以使用缪斯..

Paste in this code an it will work.

粘贴在此代码中它将起作用。

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