JavaScript Timer Example

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Use of JavaScript</title>
    <script>
        var ctr=0;//initializing ctr
        var timer1=null;
       function msg(str1)
        {
           // alert("hello" + str1);
           head1.innerHTML="Hello "+ str1;
        }
        function increment()
        {
            //alert("hello");
            ctr=ctr+1;
            head1.innerHTML=ctr;
            timer1=setTimeout(increment,1000);
        }
        function stopTimer()
        {
            clearTimeout(timer1);
        }
    </script>
    <style>
        #btnsum:hover
        {
            background-color:black;
            border-radius: 5px;
            box-shadow: 5px 10px 10px black;
        }
    </style>
</head>
<body>
    <div>
        <h1 id="head1">use of Javascript</h1>
        <div id="btnsum" style="border-radius: 5px; padding-top:5px; background-color:red;width: 80px; height: 30px; text-align: center;color:white;" onclick="msg('compuhelp')">Sum  </div>
<br>
        <div id="btnsum" style="border-radius: 5px; padding-top:5px; background-color:red;width: 80px; height: 30px; text-align: center;color:white;" onmouseout="increment()" onmouseenter="stopTimer()">Sum  </div>
    <br>
        <div id="btnsum" style="border-radius: 5px; padding-top:5px; background-color:red;width: 80px; height: 30px; text-align: center;color:white;">Sum  </div>
        <br>
        <form>
            <input type="button" value="Message" onclick="msg()" />
        </form>
    </div>
</body>
</html>

Comments