实现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>
相关推荐
九天银河技术 2020-11-11
行万里 2020-10-26
此处省略三千字 2020-10-22
nongfusanquan0 2020-09-23
夜影风个人空间 2020-09-22
adsadadaddadasda 2020-09-08
85251846 2020-09-14
jbossrobbie 2020-08-16
幸福ITman汪文威 2020-08-15
MySQL源氏boy 2020-08-15
MySQLqueen 2020-08-15
solarspot 2020-07-28
Greatemperor 2020-07-19
冷月醉雪 2020-07-05
manongxiaomei 2020-07-05
javamagicsun 2020-07-04
june0 2020-07-04
yogoma 2020-06-25