Make a clock disappear after a specified amount of time

JavaScript
1

Hi everyone!

I’m a new user so please bear with any mistakes I might make :slight_smile:

As indicated by the title I’d like to code a clock that starts with the loading of the page and disappears after - lets say 3 seconds.

I’ve got the coding of the clock down, but I’m failing at the disappearing part … can anybody point me to the right direction?
I tried it with the visibility property, but I think I made a mistake somewhere?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Clock</title>
    <style>
        body {
            position: fixed;
            top: 0;
            left: 0;
            font-size: 20px;
	        color: white;
	        background-color: black;
            margin-left: 0px;
            margin-top: 0px;
        }
        
        #adContainer {
            width: 1080px;
            height: 1920px;
            overflow: visible;
            position: fixed;
            top: 0;
            left: 0;
            transform-origin: 0px 1080px;
            
        }

        #con {
            position: fixed;
            width: 1080px;
            height: 1920px;
            top: 0;
            left: 0;
            z-index: 999;
        }
		

	    .clockDigital{
            position: absolute;
	        width: 1080px;
	        height: 580px;
	        top: 981px;
	        left: 100px;
            font-size: 200px;
	        z-index: 2;
	   }        
        

	@font-face{
		font-family: segment;
		src: url(7segment.ttf);
	}
    </style>
</head>

<body>
    <div id="adContainer">
		<div id="con"></div>
        <div id="vid">
			<video id="vidBg" width="1080" height="1920"></video>
        </div>
	<div id="digital" class="clockDigital">			
   	</div>
    </div>
</body>
<script>
	var date ;
	var h;
	var m;
	var s;
	var time;
	
	function _initClock() {
		date = new Date();
		h = date.getHours();
		m = date.getMinutes();

		h = (h < 10) ? "0" + h : h;
		m = (m < 10) ? "0" + m : m;
					
		time = h + ":" + m;
		digital.innerText = time;
		digital.textContent = time;
		setTimeout(_initClock, 1000);	
	}
	
    function _startVideo() {
		vidBg.setAttribute('src', 'images/ANIMATION.mp4');
		vidBg.setAttribute('loop', '');
		vidBg.play();    
	}
    
    function _change() {
        time.style.visibility = "hidden";
    }
    
    function _startHiding() {
        if (_all_loaded) {
            setInterval("_change();", 2000);
                    }
    }    

    function BroadSignPlay() {
        _startVideo();
        _startHiding();
    }

	_initClock();
	
    if ( typeof(BroadSignObject) == "undefined" ) {
	    _show("Play ohne BroadSignPlay");
		window.setTimeout("_startVideo();", 1000);
    }
</script>

</html>

Thank you for your help!

Yomi