Javascript Js如何添加时间计数器onclick事件_Javascript_Php

Javascript Js如何添加时间计数器onclick事件

javascript php

Javascript Js如何添加时间计数器onclick事件,javascript,php,Javascript,Php,我正在使用html5的自定义视频播放器。我已经得到了自定义字段中包含的视频长度，因此很容易在播放器屏幕上标记持续时间我现在只需要在00:00:00（代表秒、分和小时）上盖章，当我在视频播放器中按play时，它将开始累进计数我想我应该把命令放在这行代码中： playButton.addEventListener("click", function(){ if(video.paused==true){ video.play(); } } …然后创建另一

我正在使用html5的自定义视频播放器。我已经得到了自定义字段中包含的视频长度，因此很容易在播放器屏幕上标记持续时间

我现在只需要在00:00:00（代表秒、分和小时）上盖章，当我在视频播放器中按play时，它将开始累进计数

我想我应该把命令放在这行代码中：

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

…然后创建另一个脚本，使00:00:00受addEventListener的影响，但我没有足够的知识来正确创建它。你能帮我做吗？


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

测试
时间00:00:00
暂停
var btn=document.getElementById（“btn”）；
var btnFlag=假；
变量计时器=1；//这是全局变量
//标志在此表示播放，播放1表示暂停，播放0表示暂停
功能启动计时器（持续时间、显示）{
var mytimer=setInterval（函数（）{
如果（++计时器==持续时间）{
计时器--；
清除间隔（mytimer）
}
$（“#btn”）.off（'click'）.on（'click'，函数（e）{
//btn.addEventListener（“点击”，函数（e）{
console.log（“单击”）
如果（！btnFlag）{
console.log（“此处”）
btnFlag=true
清除间隔（mytimer）
$（“#btn”）.text（'Play'）
}
否则{
控制台日志（“通过”）
btnFlag=false
起始计时器（持续时间、显示）
$（“#btn”）.text（‘暂停’）
}
})
小时=parseInt（计时器/3600，10）
分钟=parseInt（（计时器%3600）/60，10）
秒=parseInt（计时器%60,10）；
小时=小时<10？“0”+小时：小时；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
display.textContent=小时+“：”+分钟+“：”+秒；
}, 1000);
}
window.onload=函数（）{
var TIMENSECOND=100，
display=document.querySelector（“#time”）；
startTimer（时间顺序，显示）；
};

试试看

我在下面发布答案，只需根据您的方法更改window.onload方法，并调用startTimer方法和var timer put作为全局变量。非常感谢，但是，我现在如何在html页面中调用链接到此脚本的00:00:00号码？时间00:00！它不起作用，很遗憾：（视频开始播放，但数字一直保持在00:00:00。我编辑了代码。试试看。我希望你能得到解决方案@notyourkind of people