我不熟悉长期投票，也不太了解它的方法。我已经在javascript中有一个计时器功能，它由一页上的按钮控制[代码如下]。我想在多个页面上同时运行相同的计时器（可以在不同的计算机和浏览器上）。除了它将仅使用此页面中的按钮（timerMode.php）进行控制。我怎么能用长池来做这件事？ 注意：我使用phpMyAdmin SQL数据库。每个计时器都使用相同的svg
timerMode.php：
var timerMode = function() {
var timergc;
var runningsc = false;
var runninggc = false;
var endedsc = false;
var edndedgc = false;
var startTimer = function(seconds, container, oncomplete, type) {
var startTime, timer, obj, ms = seconds * 1000;
var paused = false;
var display = document.getElementById(container);
obj = {};
obj.resume = function() {
paused = false;
startTime = new Date().getTime();
timer = setInterval(obj.step, 100);
};
obj.pause = function() {
if (!paused) {
paused = true;
ms = obj.step();
clearInterval(timer);
}
};
obj.reset = function(res) {
ms = res * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
switch (type) {
case "game":
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
break;
case "shot":
if (s <= 4) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
break;
}
};
obj.modify = function(diff) {
if (diff == 1) {
if (ms < seconds * 1000) {
ms += diff * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
if (type == "shot") {
if (s <= 4) {
var mili = String(ms % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
} else {
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
}
}
} else {
if (Math.floor(ms / 1000) % 60 > 0) {
ms += diff * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
if (type == "shot") {
if (s <= 4) {
var mili = String(ms % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
} else {
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
}
}
}
};
obj.step = function() {
var now = Math.max(0, ms - (new Date().getTime() - startTime)),
m = Math.floor(now / 60000),
s = Math.floor(now / 1000) % 60;
switch (type) {
case "game":
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
break;
case "shot":
if (s <= 4) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
break;
}
if (now == 0) {
clearInterval(timer);
if (type == "shot") {
runningsc = false;
runninggc = false;
endedsc = true;
}
if (oncomplete) oncomplete();
}
return now;
};
obj.resume();
return obj;
};
$(document).on("click", "#start", function() {
timergc = startTimer(600, "game_clock", function() {}, "game");
timersc = startTimer(24, "shot_clock", function() {}, "shot");
runningsc = true;
runninggc = true;
$(".gcbtn_main").text("Pause");
$(".gcbtn_main").attr("id", "pausegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#pausegc", function() {
timergc.pause();
timersc.pause();
runningsc = false;
runninggc = false;
$(".gcbtn_main").text("Resume");
$(".gcbtn_main").attr("id", "resumegc");
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
});
$(document).on("click", "#resumegc", function() {
timergc.resume();
runninggc = true;
if (!runningsc) {
timersc.resume();
runningsc = true;
}
$(".gcbtn_main").text("Pause");
$(".gcbtn_main").attr("id", "pausegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#resetgc", function() {
timergc.pause();
timergc.reset(600);
timersc.pause();
timersc.reset(24);
$(".gcbtn_main").text("Start");
$(".gcbtn_main").attr("id", "resumegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#upgc", function() {
console.log(runninggc);
timergc.pause();
timergc.modify(1);
if (runninggc) {
timergc.resume();
}
});
$(document).on("click", "#downgc", function() {
timergc.pause();
timergc.modify(-1);
if (runninggc) {
timergc.resume();
}
});
$(document).on("click", "#pausesc", function() {
timersc.pause();
runningsc = false;
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
});
$(document).on("click", "#resumesc", function() {
timersc.resume();
runningsc = true;
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#reset14", function() {
timersc.pause();
timersc.reset(14);
if (runningsc) {
timersc.resume();
}
if (endedsc) {
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
}
});
$(document).on("click", "#reset24", function() {
timersc.pause();
timersc.reset(24);
if (runningsc) {
timersc.resume();
}
if (endedsc) {
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
}
});
$(document).on("click", "#upsc", function() {
timersc.pause();
timersc.modify(1);
endedsc = false;
if (runningsc) {
timersc.resume();
}
});
$(document).on("click", "#downsc", function() {
timersc.pause();
timersc.modify(-1);
endedsc = false;
if (runningsc) {
timersc.resume();
}
});
$(document).on("click", "#upqrt", function() {
console.log("Works");
var quarter = $("#quarter").text();
console.log(quarter);
if (quarter == 4) {
$("#quarter").text("E");
}
if (quarter < 4) {
console.log(quarter);
quarter++;
$("#quarter").text(quarter);
}
});
$(document).on("click", "#downqrt", function() {
var quarter = $("#quarter").text();
if (quarter == "E") {
$("#quarter").text(4);
}
if (quarter > 1) {
quarter--
$("#quarter").text(quarter);
}
});
};
$(document).ready(function() {
timerMode();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="page-block">
<div class="row">
<div class="col-xs-6">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 432.7 198" style="enable-background:new 0 0 432.7 198;background:white;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
stroke: #000000;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
}
.st2 {
font-family: 'Helvetica';
}
.st3 {
font-size: 58px;
}
.st4 {
fill: none;
stroke: #000000;
stroke-miterlimit: 10;
}
.st5 {
font-size: 42px;
}
.st6 {
font-size: 18px;
}
.st7 {
font-size: 46px;
}
.st8 {
font-size: 50.9768px;
}
.st9 {
stroke: #000000;
stroke-miterlimit: 10;
}
.st10 {
font-size: 23px;
}
.st11 {
fill: none;
stroke: #000000;
}
</style>
<path id="XMLID_12_" class="st0" d="M125.9,114.8H44.1c-2.3,0-4.2-1.9-4.2-4.2V73.4c0-2.3,1.9-4.2,4.2-4.2h81.8c2.3,0,4.2,1.9,4.2,4.2v37.2C130.1,112.9,128.2,114.8,125.9,114.8z" />
<rect id="XMLID_9_" x="39.9" y="69.2" class="st1" width="90.2" height="45.6" />
<text id="XMLID_10_" transform="matrix(1 0 0 1 99.3335 111.792)" class="st2 st3">0</text>
<path id="XMLID_16_" class="st0" d="M387.9,114.8h-81.8c-2.3,0-4.2-1.9-4.2-4.2V73.4c0-2.3,1.9-4.2,4.2-4.2h81.8
c2.3,0,4.2,1.9,4.2,4.2v37.2C392.1,112.9,390.2,114.8,387.9,114.8z" />
<rect id="home_rect" x="7.1" y="6.8" class="st1" width="129.8" height="36.3"></rect>
<text id="home_name" transform="matrix(1 0 0 1 7.0877 38.7791)" class="st2 st5">HOME</text>
<rect id="XMLID_20_" x="42" y="159.5" class="st1" width="60.9" height="16.5" />
<text id="XMLID_19_" transform="matrix(1 0 0 1 42.0301 173.6536)" class="st2 st6">FOULS:</text>
<rect id="XMLID_22_" x="112.5" y="160.5" class="st1" width="10.7" height="16" />
<text id="XMLID_21_" transform="matrix(1 0 0 1 112.4562 174.6557)" class="st2 st6">0</text>
<rect id="XMLID_33_" x="186.7" y="145.9" class="st1" width="59.4" height="36.6" />
<text id="shot_clock" transform="matrix(1 0 0 1 191.8234 179.9915)" class="st2 st7">24</text>
<rect id="away_rect" x="295.1" y="6.8" class="st1" width="129.8" height="36.3" />
<text id="away_name" transform="matrix(1 0 0 1 295.0877 38.7791)" class="st2 st5">AWAY</text>
<rect id="XMLID_5_" x="153.2" y="6.8" class="st1" width="125.6" height="36.3" />
<text id="game_clock" transform="matrix(0.8828 0 0 1 165.1738 43.0225)" class="st2 st8">10:00</text>
<rect id="XMLID_15_" x="301.9" y="69.2" class="st1" width="90.2" height="45.6" />
<text id="XMLID_14_" transform="matrix(1 0 0 1 301.8873 111.792)" class="st2 st3">0</text>
<g id="XMLID_11_">
<text id="quarter" transform="matrix(1 0 0 1 209.3371 99.3377)" class="st9 st2 st10">1</text>
</g>
<path id="XMLID_13_" class="st11" d="M221,103.6h-10.4c-2.3,0-4.2-1.9-4.2-4.2V83.2c0-2.3,1.9-4.2,4.2-4.2H221
c2.3,0,4.2,1.9,4.2,4.2v16.2C225.2,101.7,223.3,103.6,221,103.6z" />
<path id="XMLID_18_" class="st11" d="M123,180.7h-10.4c-2.3,0-4.2-1.9-4.2-4.2v-16.2c0-2.3,1.9-4.2,4.2-4.2H123
c2.3,0,4.2,1.9,4.2,4.2v16.2C127.2,178.9,125.3,180.7,123,180.7z" />
<path id="XMLID_31_" class="st11" d="M245.2,186.3h-57.3c-2.3,0-4.2-1.9-4.2-4.2v-36.7c0-2.3,1.9-4.2,4.2-4.2h57.3
c2.3,0,4.2,1.9,4.2,4.2v36.7C249.4,184.4,247.5,186.3,245.2,186.3z" />
<rect id="XMLID_30_" x="300.7" y="158.7" class="st1" width="60.9" height="16.5" />
<text id="XMLID_29_" transform="matrix(1 0 0 1 300.6767 172.9018)" class="st2 st6">FOULS:</text>
<rect id="XMLID_28_" x="371.1" y="159.7" class="st1" width="10.7" height="16" />
<text id="XMLID_26_" transform="matrix(1 0 0 1 371.1028 173.9038)" class="st2 st6">0</text>
<path id="XMLID_23_" class="st11" d="M381.7,180h-10.4c-2.3,0-4.2-1.9-4.2-4.2v-16.2c0-2.3,1.9-4.2,4.2-4.2h10.4
c2.3,0,4.2,1.9,4.2,4.2v16.2C385.9,178.1,384,180,381.7,180z" />
<circle id="XMLID_17_" cx="155" cy="91.3" r="2.5" />
<circle id="XMLID_35_" cx="165" cy="91.3" r="2.5" />
<circle id="XMLID_36_" cx="175" cy="91.3" r="2.5" />
<circle id="XMLID_39_" cx="257" cy="91.3" r="2.5" />
<circle id="XMLID_38_" cx="267" cy="91.3" r="2.5" />
<circle id="XMLID_37_" cx="277" cy="91.3" r="2.5" />
</svg>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Game Clock</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<button id="start" type="button" class="btn btn-default btn-lg gcbtn_main">Start</button>
<button id="resetgc" type="button" class="btn btn-default btn-lg">Reset</button>
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upgc" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downgc" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">:24</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<button id="pausesc" type="button" class="btn btn-default btn-lg scbtn_main">Pause</button>
<div class="btn-group" style="margin-left:5px;">
<button id="reset14" type="button" class="btn btn-default btn-lg">:14</button>
<button id="reset24" type="button" class="btn btn-default btn-lg">:24</button>
</div>
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upsc" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downsc" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Quarter</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upqrt" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downqrt" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>