当前位置： 文江博客话题详情

2个javascript函数冲突？

发布于 2024-11-01 04:18:07 字数 3001 浏览 5 评论 0原文

我正在尝试在我的网站中实现 Javascript/PHP/AJAX 时钟，以便我可以拥有一个可以在不同时区运行的简单时钟（教程位于此处 http://networking.mydesigntool.com/viewtopic.php?tid=373&id=31）

这本身工作正常，但我已经页面上运行一个 javascript 秒表，两者似乎发生冲突，并且秒表工作时时钟不会显示。

这是时钟的脚本：

<script type="text/javascript">
function loadTime ()
{
http_request = false;
if(window.XMLHttpRequest)
{
    // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if(http_request.overrideMimeType)
    {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
        http_request.overrideMimeType('text/html');
    }
}
else if(window.ActiveXObject)
{ // IE
    try
    {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
        }
    }
    }

    var parameters = "time=";
    http_request.onreadystatechange = alertContents;
    http_request.open('POST', 'time.php', true);
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http_request.setRequestHeader("Content-length", parameters.length);
    http_request.setRequestHeader("Connection", "close");
    http_request.send(parameters);
}


function alertContents()
{
    if (http_request.readyState == 4)
    {
        if (http_request.status == 200)
        {
            result = http_request.responseText;
            document.getElementById('clock').innerHTML = result;
        }
    }
}

</script>
<body onload="setInterval('loadTime()', 200);">

这是秒表的代码：

<script type="text/javascript">
    window.onload = function()
    {
        stopwatch('Start');
    }

    var sec = 0;
    var min = 0;
    var hour = 0;
    function stopwatch(text) {
        sec++;
        if (sec == 60) {
            sec = 0;
            min = min + 1;
        } else {
            min = min;
        }
        if (min == 60) {
            min = 0; 
            hour += 1;
        }

        if (sec<=9) { sec = "0" + sec; }
        document.clock.stwa.value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;

        if (text == "Start") { document.clock.theButton.value = "Stop "; }
        if (text == "Stop ") { document.clock.theButton.value = "Start"; }

        if (document.clock.theButton.value == "Start") {
            window.clearTimeout(SD);
            return true;
        }
        SD=window.setTimeout("stopwatch();", 1000);
    }

    function resetIt() {
        sec = -1;
        min = 0;
        hour = 0;
        if (document.clock.theButton.value == "Stop ") {
            document.clock.theButton.value = "Start";
        }
        window.clearTimeout(SD);
    }
</script>

有人可以帮我让它们并行工作吗？

感谢您的帮助

原文

I am trying to implement a Javascript/PHP/AJAX clock into my website so that I can have a simple clock which can operate in different timezones (tutorial is here http://networking.mydesigntool.com/viewtopic.php?tid=373&id=31)

This itself works fine, but I already have a javascript stopwatch running on the page, and the 2 seem to clash and the clock won't display while the stopwatch is working.

This is the script for the clock:

<script type="text/javascript">
function loadTime ()
{
http_request = false;
if(window.XMLHttpRequest)
{
    // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if(http_request.overrideMimeType)
    {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
        http_request.overrideMimeType('text/html');
    }
}
else if(window.ActiveXObject)
{ // IE
    try
    {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
        }
    }
    }

    var parameters = "time=";
    http_request.onreadystatechange = alertContents;
    http_request.open('POST', 'time.php', true);
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http_request.setRequestHeader("Content-length", parameters.length);
    http_request.setRequestHeader("Connection", "close");
    http_request.send(parameters);
}


function alertContents()
{
    if (http_request.readyState == 4)
    {
        if (http_request.status == 200)
        {
            result = http_request.responseText;
            document.getElementById('clock').innerHTML = result;
        }
    }
}

</script>
<body onload="setInterval('loadTime()', 200);">

and this is the code for the stopwatch:

<script type="text/javascript">
    window.onload = function()
    {
        stopwatch('Start');
    }

    var sec = 0;
    var min = 0;
    var hour = 0;
    function stopwatch(text) {
        sec++;
        if (sec == 60) {
            sec = 0;
            min = min + 1;
        } else {
            min = min;
        }
        if (min == 60) {
            min = 0; 
            hour += 1;
        }

        if (sec<=9) { sec = "0" + sec; }
        document.clock.stwa.value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;

        if (text == "Start") { document.clock.theButton.value = "Stop "; }
        if (text == "Stop ") { document.clock.theButton.value = "Start"; }

        if (document.clock.theButton.value == "Start") {
            window.clearTimeout(SD);
            return true;
        }
        SD=window.setTimeout("stopwatch();", 1000);
    }

    function resetIt() {
        sec = -1;
        min = 0;
        hour = 0;
        if (document.clock.theButton.value == "Stop ") {
            document.clock.theButton.value = "Start";
        }
        window.clearTimeout(SD);
    }
</script>

Could someone help me get them to work side-by-side please?

Thanks for any help

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

拧巴小姐 2024-11-08 04:18:07

其一，您在 HTML 中声明了一个 onload 事件处理程序：

<body onload="setInterval('loadTime()', 200);">

该处理程序因此在脚本中被覆盖：

window.onload = function()
{
    stopwatch('Start');
}

这意味着原始的 onload 调用永远不会执行。

您应该尝试使用 addEventListener 这样您就可以添加多个同一事件的事件处理程序。

还有几点：

  • 不要将字符串传递给 setInterval 和 setTimeout，只需传递函数本身。更高效、更不易出错：setInterval(loadTime, 200);
  • 不用编写所有 JS 代码来与不同的浏览器配合使用，而是使用 jQuery、mootools 或无数其他框架之一。它们使在所有浏览器上正确运行变得更加容易。

For one, your’re declaring an onload event handler in your HTML:

<body onload="setInterval('loadTime()', 200);">

which is consequently overwritten in script:

window.onload = function()
{
    stopwatch('Start');
}

This means the original onload call is never executed.

You should try using addEventListener so you can add multiple event handlers to the same event.

A couple more points:

  • Don’t pass a string to setInterval and setTimeout, just pass the function itself. More efficient and less error-prone: setInterval(loadTime, 200);
  • Instead of writing all that JS code to work with different browsers, use jQuery, mootools, or one of the gazillion other frameworks. They make it a lot easier to get it right on all browsers.
回复 原文
悍妇囚夫 2024-11-08 04:18:07

试试这个：
请注意微妙的“+=”而不是“=”！

window.onload += function()
{
    stopwatch('Start');
}

Try this:
See the subtle '+=' instead of '=' !

window.onload += function()
{
    stopwatch('Start');
}
回复 原文
~没有更多了~

关于作者

孤单情人

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文