SRI-DYZBC2
/
Vehicle-cpp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <div>
            <button id="start">开始录制</button>
            <button id="stop">停止录制</button>
        </div>

        <div class="container">
            <div class="stop-watch">
                <div id="timeDisplay" style="font-size:100px">00:00:00:00</div>
                <div class="buttons">
                    <button id="startBtn" class="time-btn">Start</button>
                    <button id="resetBtn" class="time-btn">Reset</button> 
                </div>
           </div>
        </div>

        
        <div>
            <video autoplay controls id="stream" width="1900" height="852" object-fit="fill"></video>
        </div>

        <script>
            
	     let constraints = {
	     	audio: false,
	     	video: true
	     };

            let startBtn = document.getElementById('start');
            let stopBtn = document.getElementById('stop');
            let video = document.getElementById('stream');

            startBtn.onclick = function(){
                navigator.getUserMedia(constraints, function(stream){
                    video.srcObject = stream;
                }, function(err){
                    console.log(err);
                })
            }

            stopBtn.onclick = function(){
                video.pause();
            }
        </script>


        <script>
            const timeDisplay = document.querySelector("#timeDisplay");

const startTimeBtn = document.querySelector("#startBtn");
const pauseBtn = document.querySelector("#pauseBtn");
const resetBtn = document.querySelector("#resetBtn");

let startTime = 0;
let elapsedTime = 0;

let paused = true;
let intervalId;

let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;

startTimeBtn.addEventListener("click", () => {
    if(paused){
        paused = false;
        startTime = Date.now() - elapsedTime;
        intervalId = setInterval(updateTime, 75);
    }
})

resetBtn.addEventListener("click", () => {
    paused = true;
    startTime = 0;
    elapsedTime = 0;
    clearInterval(intervalId);
    hours = 0;
    minutes = 0;
    seconds = 0;
    miliseconds = 0;
    timeDisplay.textContent = "00:00:00:00";
})

function updateTime(){
    elapsedTime = Date.now() - startTime;

    miliseconds = Math.floor(elapsedTime % 1000);
    seconds = Math.floor(elapsedTime / 1000 % 60);
    minutes = Math.floor(elapsedTime / 1000 / 60 % 60);
    hours = Math.floor(elapsedTime / 1000 / 60 / 60 % 60);

    miliseconds = formatMili(miliseconds);
    seconds = formatTime(seconds);
    minutes = formatTime(minutes);
    hours = formatTime(hours);

    timeDisplay.textContent = `${hours}:${minutes}:${seconds}:${miliseconds}`;

    function formatTime(unit){
        return (("0") + unit).length > 2 ? unit : "0" + unit;
    }

    function formatMili(unit){
        unit = String(unit);
        if(unit.length == 3){
            return unit.slice(0, 2);
        }
        else if(unit.length == 2){
            return unit;
        }
        else if(unit.length == 1){
            return "0" + unit;
        }
    }
}
        </script>

    </body>
</html>