How to check if time passed (timer)-CodePudding

I have code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get the Value of Text Input Field in JavaScript</title>
</head>
<body>
    <input type="number" placeholder="Type something..." id="myInput">
    <button type="button" onclick="getInputValue();">Get Value</button>
    
    <script>
        function getInputValue(){
            // Selecting the input element and get its value 
           // var inputVal = document.getElementById("myInput").value;
          var d = new Date();
          var n = d.getTime();
          var number = (document.getElementById("myInput").value);
          number=parseInt(number);
          var inputVal= number n;
            
            alert(inputVal);
        }
       
        
        
    </script>
</body>
</html>

In the code I'm checking current time in milliseconds and in the form I write time in ms and sum current time with time in form and for example I want to add to current time 6000 ms and before this 6000 ms pass I want to pass for example to website information "ON" and after that "OFF". Should i use here loop to check if this time passed or I can do it other way ?

CodePudding user response：

using requestAnimationFrame API to make a recursion

codepen demo timer

CodePudding user response：

Let me know if something is not clear (I just really do not know what might be complicated here)

Except for val, this is instead of parseInt(val)

Except2 for | 0, this is instead of toFixed()

$('#info').hide();
const getInputValue = ()=>{
    const val = $('#myInput').val();
    $('#info').fadeIn();
    console.log(`info here for ~${( val / 1000) | 0} sec`);
    setTimeout(()=>{
        $('#info').fadeOut();
    },  val);
};

*{padding:10px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" value="2000" placeholder="Type something..." id="myInput" />
<button type="button" onclick="getInputValue();">Show Info</button>
<div id="info">Website information "ON"</div>

JQuery is not needed here