堆栈内存溢出
  简体   繁体   English

JavaScript时钟可在Chrome上使用，但不适用于Firefox或IE

[英]JavaScript clock works on Chrome but doesn't work with Firefox or IE

 原文  2014-12-15 10:26:18  5   2    javascript/ php/ html/ google-chrome/ clock

问题描述

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. 它们可以在Chrome中完美运行，但在Firefox和IE上却不能。 I've made a new, clean PHP file and attached the JS to check if the problem is from the Javascript file. 我已经制作了一个新的干净的PHP文件，并附加了JS以检查问题是否出在Javascript文件中。 It doesn't appear to be. 似乎不是。

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. 我不知道这是怎么回事...我希望时钟像在Chrome上一样正常显示在IE和Firefox上。 Can you guys help me out, please? 你们能帮我吗？

I'm using XAMPP to simulate a PHP server. 我正在使用XAMPP来模拟PHP服务器。 Don't know if that will be helpful. 不知道这是否会有所帮助。

Thank you in advance 先感谢您

2 个解决方案

解决方案1
 1  2014-12-18 21:15:01

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而不是No wrap - in <head>中No wrap - in <head> ，所以您的window.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调用，其中由于您的注释“我进入FF，并且删除了 body onload函数”（强调我），因此对window.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 . 另外， 在您的小提琴中，您没有id为clockbox2的元素 。 Instead, it seems to be called relogio2 (based on the markup) but your JavaScript does not reflect this name change. 相反，它似乎称为relogio2 （基于标记），但是您的JavaScript不能反映此名称更改。 As such, clockbox2 cannot be set. 因此，无法设置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
 0  2014-12-15 10:29:34

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 该Javascript在IE中不起作用，但在Chrome，Firefox和Opera中起作用 - This Javascript doesn't work in IE but works in Chrome, Firefox and Opera Javascript不适用于Chrome和Firefox，但适用于IE - Javascript doesn't work on Chrome and Firefox, but works on IE JavaScript代码在chrome上有效，在IE和Firefox上无效 - JavaScript code works on chrome, doesn't work on IE and firefox Javascript 自动完成功能适用于 IE 和 Chrome，不适用于 Firefox - Javascript autocomplete works in IE and Chrome, doesn't work in Firefox Javascript仅在IE Quirks，7和Chrome和Firefox中有效。 在IE 8或9标准中不起作用 - Javascript only works in IE Quirks, 7 and Chrome and Firefox. Doesn't work in IE 8 or 9 Standards .unbind（&#39;submit&#39;）。submit（）在Chrome / IE中有效，但在Firefox中无效 - .unbind('submit').submit() works in Chrome/IE but doesn't work in Firefox JS正则表达式代码不适用于Firefox，但适用于Chrome和IE - JS regex code doesn't work with firefox, but works on chrome and IE jQuery模糊在Firefox和Chrome中不起作用，但在IE9中起作用 - Jquery blur doesn't work in Firefox and Chrome but works in IE9 EmberData unloadAll在IE8上不起作用。 适用于Chrome / FireFox - EmberData unloadAll doesn't work on IE8. Works on Chrome/FireFox Jquery / Javascript和Css条件在firefox和IE上不起作用。 它适用于Chrome - Jquery/Javascript and Css condition doesn't work on firefox and IE. It works on Chrome
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM