如何在Javascript global中创建一个函数到我的html

时间:2017-04-24 14:13:52

标签: javascript jquery html5

首先,我感谢给出的任何指示......让我先说一下,我正在学习Javascript和HTML。

我的问题是我试图调用我的函数来更新音频时间,如下所示:

<audio id="track" preload="auto" type="audio/mpeg" ontimeupdate="displayTime(this)">
            <source src="mp3/mysong.mp3" type="audio/mpeg">
            Unsupported audio format!
        </audio>

我的功能在Javascript IFFE功能中:

$(document).ready(function () {
 ... /*Global Variables*/

 ...

 function displayTime(event) {

            sec = Math.floor(event.duration);
            min = Math.floor(sec / 60);
            min = min >= 10 ? min : '0' + min;
            sec = Math.floor(sec % 60);
            sec = sec >= 10 ? sec : '0' + sec;


            ct_sec = Math.floor(event.currentTime);
            ct_min = Math.floor(ct_sec / 60);
            ct_min = ct_min >= 10 ? ct_min : '0' + ct_min;
            ct_sec = Math.floor(ct_sec % 60);
            ct_sec = ct_sec >= 10 ? ct_sec : '0' + ct_sec;


            document.getElementById('ticker').innerHTML = ct_min + ":" + ct_sec + "-" + min + ":" + sec;

        }



});

任何人都可以建议我为什么得到错误函数displayTime(this)没有定义?我也尝试使用window.myFunction来尝试使它全局化到dom ......无济于事。

3 个答案:

答案 0 :(得分:5)

因为它在函数范围之外不可见。

声明后,将函数的引用分配给全局对象

window.displayTime = displayTime;

答案 1 :(得分:1)

document.ready处理程序中的任何内容都将放在该函数的范围内。因此,如果您希望函数在范围内声明为全局,则需要在全局范围内声明它,然后您可以将其与window.前缀一起使用。

$(document).ready(function () {
 ... /*Global Variables*/
window.displayTime = function (event) { ... }
});

用法:

<button onclick="window.displayTime()">test</button>

答案 2 :(得分:0)

除了使函数成为全局函数之外,您还可以通过JavaScript附加事件监听器,如下所示:

$('#track').on('timeupdate', displayTime);