Js如何添加時間計數器onclick事件

Question

我正在使用帶有 html5 的自定義視頻播放器。 我已經獲得了包含在自定義字段中的視頻長度，因此我很容易在播放器屏幕上標記持續時間。

我現在只需要標記一個 00:00:00（代表秒、分鍾和小時），只要我在視頻播放器中按下播放，它就會開始累進計數。

我想我應該把命令放在這行代碼中：

playButton.addEventListener("click", function(){
     if(video.paused==true){
           video.play();
     }
}

...然后創建另一個腳本，使 00:00:00 受到 addEventListener 的影響，但我沒有足夠的知識來正確創建它。 你能幫我做嗎？

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>test</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
<body>
 <div>Time <span id="time">00:00:00</span> </div>
 <div><button id="btn">pause</button></div>


 <script>

     var btn = document.getElementById("btn");
     var btnFlag = false;
     var timer = 1; // this is global variale 
 // flag means here play and pause 1 for play 0 for pause
    function startTimer(duration, display) {

        var mytimer = setInterval(function () {
        if (++timer == duration ) {
                timer--;
                clearInterval(mytimer)
            }
            $("#btn").off('click').on('click',function(e){
            //btn.addEventListener("click",function(e) {
                console.log("click")
                if(!btnFlag){
                    console.log("here")
                    btnFlag = true
                    clearInterval(mytimer)
                    $("#btn").text('Play')
                }
                else{
                    console.log("pass")
                    btnFlag = false
                    startTimer(duration, display)
                    $("#btn").text('Pause')
                }

            })

            hours  = parseInt(timer /3600, 10)
            minutes = parseInt((timer % 3600) / 60, 10)
            seconds = parseInt(timer % 60, 10);
                    hours = hours < 10 ? "0" + hours : hours;
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = hours + ":"+ minutes + ":" + seconds;


        }, 1000);

    }

    window.onload = function () {
        var timeinsecond = 100,
            display = document.querySelector('#time');
        startTimer(timeinsecond, display);
    };




 </script>
</body>
</html>

嘗試一下

Js如何添加時間計數器onclick事件

問題描述

1 個解決方案

解決方案1
-1 2019-12-24 18:54:37

Js如何添加時間計數器onclick事件

問題描述

1 個解決方案

解決方案1 -1 2019-12-24 18:54:37

解決方案1
-1 2019-12-24 18:54:37