Untitled

<html>

<head>
<meta charset=”utf-8? />
<meta name=”format-detection” content=”telephone=no” />
<meta name=”msapplication-tap-highlight” content=”no” />
<meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width” />
<meta http-equiv=”Content-Security-Policy” content=”default-src * ‘unsafe-inline’; style-src ‘self’ ‘unsafe-inline’; media-src *” />
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<title>Interactive Page</title>

</head>
<style>
    body{
        font-size: 200%;
    }
    img {
        max-width:100%;
        height:auto;
    }
    .ui-btn{
        font-size: 200%;
    }

</style>

<body>
    <center>
        <h3>Time in seconds: <text id="seconds">0</text></h3>
        <button id="startBtn">Start timer!</button>
    </center>
</body>

<script>
    var timerStarted = false;
    var seconds = 0;
    var timer;

    function changeTime(){
        seconds += 1;
        $("#seconds").html(seconds);
    }

    $("#startBtn").click(
        function(){
            if(!timerStarted){
                timerStarted = true;
                $("#startBtn").html("End timer!");
                timer = setInterval(changeTime, 1000);
            }else{
                timerStarted = false;
                $("#startBtn").html("Start timer!");
                clearInterval(timer);
            }

        }
    );


</script>

</html>