实现dom中video对象的时间戳控件

功能：自定义视频播放器中的时间戳控件。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间戳</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 400px;
            height: 400px;
            border: 1px dashed #000;
            padding-left: 110px;
            box-sizing: border-box;
            margin: 100px auto;
        }

        button{
            width: 80px;
            height: 50px;
            margin-left: 10px;
            margin-top: 80px;
        }
        span{
            display: inline-block;
            font-size: 50px;
            margin-left: 30px;
            margin-top: 80px;
        }
    </style>

    <script>
       window.onload = function () {

          let start = document.getElementById("start");
          let end = document.getElementById("end");
          let timestamp = document.getElementById("text");
          let timer = null;
          // 用于控制时间戳的时间
          let seconds = 0;
          let minutes = 0;
          start.onclick = function () {
             // 禁用开始按钮，启用结束按钮
             start.disabled = true;
             end.disabled = false;
             timer = setInterval(function () {
                minutes = seconds / 60;
                // 当分钟数为一位数时
                if (minutes < 10) {
                   // 当秒数也为一位数时
                   if (seconds%60 < 10)
                      timestamp.innerHTML = `0${Math.floor(minutes).toString()}:0${(seconds%60).toString()}`;
                   // 当秒数为两位数时
                   else if (seconds%60 >= 10)
                      timestamp.innerHTML = `0${Math.floor(minutes).toString()}:${(seconds%60).toString()}`;

                }
                else if (minutes >= 10) {
                   // 当秒数也为两位数时
                   if (seconds%60 < 10)
                      timestamp.innerHTML = `${Math.floor(minutes).toString()}:0${(seconds%60).toString()}`;
                   // 当秒数为两位数时
                   else if (seconds%60 >= 10)
                      timestamp.innerHTML = `${Math.floor(minutes).toString()}:${(seconds%60).toString()}`;
                }
                seconds++;
             },1000);

          };
          end.onclick = function () {
             // 禁用结束按钮，启用开始按钮
             end.disabled = true;
             start.disabled = false;
             clearInterval(timer);
          }
       };
    </script>
</head>
<body>
<div>
    <button id="start">开始</button>
    <button id="end">结束</button>
    <br>
    <span id="text">00:00</span>
</div>



</body>
</html>
posted @ 2020-04-26 22:25  陈太浪  阅读(357)  评论(0)  编辑  收藏  举报