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

时间:2014-12-15 10:26:19

标签: javascript php html google-chrome clock

我正在为客户制作一些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服务器。不知道这是否有用。

提前谢谢

2 个答案:

答案 0 :(得分:1)

我使用了http://jsfiddle.net/poseavx0/1/而不是你的小提琴(最后你有一个额外的},你设置为'onLoad而不是No wrap - in <head>,所以你的window.onload永远不会开火。

我仍然无法复制问题。

我只能假设你有多个window.onload来电,后来对window.onload的调用会覆盖以前的来电,因为你发表了评论&#34;我进入了FF,我删除了 a body onload function&#34; (强调我的)。

解决方案可能是设置你的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)。

答案 1 :(得分:0)

你可以使用缪斯..

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

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