我使用Winjs和html编程的1个计时器，但是当我启动我的应用程序并切换到较旧的计时器时我有问题停止如何在背景上打开它以保持运行，即使我切换？谢谢你的帮助
我的问题是，当我启动我的应用程序并切换到另一个时，计时器暂停并在10秒后停止，基本上我希望它继续在后台运行你能帮助我吗
我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Remember your Break</title>
<!-- WinJS references -->
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<script src="/pages/home/home.js"></script>
<!-- CSS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<!--<button data-win-control="WinJS.UI.BackButton"></button>-->
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Remember your Break</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div data-win-control="WinJS.UI.ViewBox" style="top: -19.99px;">
<div class="fixedlayout">
<div class="center" id="divcenter">
<div class="center">
<p id="radioDiv">
<span> Take a Break After </span>
<input type="radio" id="r1" name="rate" value="15">15
<input type="radio" id="r2" name="rate" value="30">30
<input type="radio" id="r3" name="rate" value="60">60
<input type="radio" id="r4" name="rate" value="90">90
<input type="radio" id="r5" name="rate" value="120">120
<span class="Minutes">Minutes</span>
<button id="startButton" onclick="start()" class="start">Start</button>
<button id="stopButton" onclick="stop()" class="stop">Stop</button>
</p>
</div>
<canvas id="canvas" class="center" height="600" width="600"></canvas>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
和我的js代码
//variables
var minutes = 0;
var seconds = 0;
var running = false;
// function alert
function alert(content, title) {
var messageDialog = new Windows.UI.Popups.MessageDialog(content, title);
messageDialog.showAsync();
}
// function activation radio buttons
function diplaytrue() {
document.getElementById('radioDiv').disabled = false;
}
//function unactivation radio buttons
function diplayfalse() {
document.getElementById('radioDiv').disabled = true;
}
//function retun value of selected radion button
function inputtype() {
seconds = 60;
var rates = document.getElementsByName('rate');
for (var i = 0; i < rates.length; i++) {
while(rates[i].checked==true) {
minutes = rates[i].value;
return (minutes, seconds);
}
}
return alert("", "you should choose a period");
}
//function to start alarm
function start() {
if (inputtype()) {
showTime();
running = true;
document.getElementById("startButton").style.display = "none";
document.getElementById("stopButton").style.display = "inline";
//virified if minute is begger than 0
if (minutes > 0) {
setTimeout(update, 1000);
diplayfalse();
}
else clearTimeout(update);
}
}
// function to stop alarm
function stop() {
diplaytrue();
clearTimeout(update);
running = false;
document.getElementById("startButton").style.display = "inline";
document.getElementById("startButton").innerText = "Restart";
document.getElementById("stopButton").style.display = "none";
}
// function update alarm
function update() {
if (!running) return;
seconds--;
if (seconds === 0) {
if (minutes > 0) {
minutes--;
if (minutes > 0) {
seconds = 60;
}
}
}
showTime(minutes);
if (running) {
if (minutes > 0 || seconds > 0) {
setTimeout(update, 1000);
}
else {
showToast();
diplaytrue();
running = false;
document.getElementById("startButton").style.display = "inline";
document.getElementById("stopButton").style.display = "none";
}
}
}
// function show animation of alarm
function showTime() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 200;
var startAngle = 0 * Math.PI;
var endAngle = ((minutes) / 30) * Math.PI;
var counterClockwise = false;
context.save();
context.clearRect(0, 0, 600, 600);
context.fillStyle = "#ffffff";
context.font = "200px Segoe UI";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(minutes.toString(), x, y - 15);
context.textAlign = "center";
context.font = 'italic 40pt Calibri';
context.textBaseline = "hanging";
context.fillText(seconds.toString(), x , y +80);
context.translate(x, y);
context.rotate(-Math.PI / 2);
context.translate(-x, -y);
if (minutes > 0 || seconds > 0) {
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 50;
context.strokeStyle = "orange";
context.stroke();
}
else {
context.beginPath();
context.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI, counterClockwise);
context.lineWidth = 50;
context.strokeStyle = "green";
context.stroke();
}
radius = 150;
startAngle = 0 * Math.PI;
endAngle = ((seconds) / 30) * Math.PI;
if (minutes === 0 && seconds === 0) {
context.beginPath();
context.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI, counterClockwise);
context.lineWidth = 25;
context.strokeStyle = "green";
context.stroke();
}
else {
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 25;
context.strokeStyle = "white";
context.stroke();
}
context.restore();
}
// function show Toast Notification after alarm is done
function showToast() {
var notifications = Windows.UI.Notifications;
var modele = notifications.ToastTemplateType.toastImageAndText01;
var sourceXml = notifications.ToastNotificationManager.getTemplateContent(modele);
var textes = sourceXml.getElementsByTagName("text");
textes[0].appendChild(sourceXml.createTextNode("It is Break Time."));
var images = sourceXml.getElementsByTagName("image");
images[0].setAttribute("src", "ms-appx:///images/logo.scale-100.png");
var toastXML = sourceXml.selectSingleNode("/toast");
var audio = sourceXml.createElement("audio");
audio.setAttribute("src", "ms-winsoundevent:Notification.Looping.Alarm2");
toastXML.appendChild(audio);
toastXML.setAttribute("launch", '{"type":"toast","parametre1":"blablabla","parametre2":"erc"}');
var notification = new notifications.ToastNotification(sourceXml);
notifications.ToastNotificationManager.createToastNotifier().show(notification);
};
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
}
});
})();