画面がオンになっているときのみのタイマー処理の方法

前提・実現したいこと

とあるタイマーアプリを作っている中学生のものですが、下記のソースコードのタイマーでは別のアプリを開いた後でもバックグラウンドでカウントダウンが続けられているのですが、別のアプリを開いたらカウントダウンが止まり、また戻ってきたら再開するようにしたいのです。どうすればよいでしょうか。ついでに、スリープ及び電源オフ時には計測を続けたいです。一方的な愚問ですみません。誰か教えてください。

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11      var timer1; //タイマーを格納する変数（タイマーID）の宣言
12
13
14//カウントダウン関数を1000ミリ秒毎に呼び出す関数
15function cntStart()
16{
17  document.timer.elements[2].disabled=true;
18  timer1=setInterval("countDown()",1000);
19}
20
21//タイマー停止関数
22function cntStop()
23{
24  document.timer.elements[2].disabled=false;
25  clearInterval(timer1);
26}
27
28//カウントダウン関数
29function countDown()
30{
31  var min=document.timer.elements[0].value;
32  var sec=document.timer.elements[1].value;
33  
34  if( (min=="") && (sec=="") )
35  {
36    alert("時刻を設定してください！");
37    reSet();
38  }
39  else
40  {
41    if (min=="") min=0;
42    min=parseInt(min);
43    
44    if (sec=="") sec=0;
45    sec=parseInt(sec);
46    
47    tmWrite(min*60+sec-1);
48  }
49}
50
51//残り時間を書き出す関数
52function tmWrite(int)
53{
54  int=parseInt(int);
55  
56  if (int<=0)
57  {
58    reSet();
59    alert("時間です！");
60  }
61  else
62  {
63    //残り分数はintを60で割って切り捨てる
64    document.timer.elements[0].value=Math.floor(int/60);
65    //残り秒数はintを60で割った余り
66    document.timer.elements[1].value=int % 60;
67  }
68}
69
70//フォームを初期状態に戻す（リセット）関数
71function reSet()
72{
73  document.timer.elements[0].value="0";
74  document.timer.elements[1].value="0";
75  document.timer.elements[2].disabled=false;
76  clearInterval(timer1);
77}  
78  
79    </script>
80</head>
81<body>
82 <form name="timer">
83	<input type="text" value="">分<br>
84	<input type="text" value="">秒<br>
85 <input type="button" value="スタート" onclick="cntStart()">
86 <input type="button" value="ストップ" onclick="cntStop()">
87 </form>
88</body>
89</html>
90