JavaScript 秒表保存在 cookie 中
JavaScript stopwatch saving in cookies
我是JavaScript的初学者，我在一个网站上工作，但我被卡在了我正在制作的秒表上。
我需要类似的东西，我在计时器中.php我有一个秒表; 当我们按开始时，它从 00：00：00 开始计数，如果我移动到第 exemple1 页.php 我不希望秒表停止计数，我希望秒表只是继续计数，当我回到计时器时.php秒表只是继续向前计数，直到我按下停止按钮，当我按下它只是停止在该值时， 例如 00：20：00。
在这里，我被困住了。当我移动到另一页时，因为秒表刚刚停止，我不希望我想要秒表只是继续计数，当我再次移动到计时器时.php我看到秒表计数并且没有在 00：00：00 停止。
这是我的代码：
演示 - Jsfiddle
定时器.php
<script language=javascript>
if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1")) ){
var h=0;
var m=0;
var s=0;
} else {
var h1,s1,m1;
}
function to_start(){
switch(document.getElementById('btn').value)
{
case 'Pause':
window.clearInterval(tm);
document.getElementById('2btn').value=str;
document.getElementById('btn').value='Start';
break;
case 'Start':
tm=window.setInterval('disp()',1000);
document.getElementById('btn').value='Pause';
break;
} }
function disp(){
if(s<10) {
s1='0' + s;
} else {
s1=s;
}
if(m<10) {
m1='0' + m;
} else {
m1=m;
}
if(h<10){
h1='0' + h;
} else {
h1=h;
}
// Display the output //
str= h1 + ':' + m1 +':' + s1 ;
document.getElementById('n1').innerHTML=str;
if(s<59){
s=s+1;
}else{
s=0;
m=m+1;
if(m==60){
m=0;
h=h+1;
}
}
localStorage.ongoingh1 = h;
localStorage.ongoingm1 = m;
localStorage.ongoings1 = s;
}
</script>
<input type="button" name="btn" id='btn' value="Start" onclick="to_start()";>
<br><br>
<div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px;
width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div>
<br>
<br>
<br>
<input type="text" name="2btn" id='2btn' value="" />
<br>
<br>
<br>
示例1.php
<script language=javascript>
var s1,m1,h1;
h=localStorage.ongoingh1;
m=localStorage.ongoingm1;
s=localStorage.ongoings1;
function to_start(){
switch(document.getElementById('btn').value)
{
case 'Pause':
window.clearInterval(tm);
document.getElementById('2btn').value=str;
document.getElementById('btn').value='Start';
break;
case 'Start':
tm=window.setInterval('disp()',1000);
document.getElementById('btn').value='Pause';
break;
}
}
function disp(){
if(s<10) {
s1="0" + s;
} else {
s1=s;
}
if(m<10) {
m1="0" + m;
} else {
m1=m;
}
if(h<10){
h1="0" + h;
} else {
h1=h;
}
// Display the output //
str= h1 + ':' + m1 +':' + s1 ;
document.getElementById('n1').innerHTML=str;
if(s<59){
s++;
}else{
s=0;
m++;
if(m==60){
m=0;
h++;
}
}
}
</script>
如果你不需要旧的浏览器支持，你可以使用HTML5的localstorage功能。存储您的值并在每次加载新页面时加载它。
计时器.php
<script language=javascript>
function settimer(){
if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1")) ){
h=localStorage.ongoingh1;
m=localStorage.ongoingm1;
s=localStorage.ongoings1;
tm=window.setInterval('disp()',1000);
document.getElementById('btn').value='Pause';
} else {
var h1,s1,m1;
}
str= h + ':' + m +':' + s ;
document.getElementById('n1').innerHTML=str;
document.getElementById('btn').value='Pause';
}
function to_start(){
switch(document.getElementById('btn').value)
{
case 'Pause':
window.clearInterval(tm);
document.getElementById('2btn').value=str;
document.getElementById('btn').value='Start';
break;
case 'Start':
tm=window.setInterval('disp()',1000);
document.getElementById('btn').value='Pause';
break;
} }
function disp(){
if(s<10) {
s1='0' + s;
} else {
s1=s;
}
if(m<10) {
m1='0' + m;
} else {
m1=m;
}
if(h<10){
h1='0' + h;
} else {
h1=h;
}
// Display the output //
str= h1 + ':' + m1 +':' + s1 ;
document.getElementById('n1').innerHTML=str;
localStorage.ongoingh1 = h;
localStorage.ongoingm1 = m;
localStorage.ongoings1 = s;
if(s<59){
s++;
}else{
s=0;
m++;
if(m==60){
m=0;
h++;
}
}
}
</script>
<body onload="settimer()">
<input type="button" name="btn" id='btn' value="Start" onclick="to_start()";>
<br><br>
<div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px;
width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div>
<br>
<br>
<br>
<input type="text" name="2btn" id='2btn' value="" />
<br>
<br>
<br>
</body>
例1.php
<script language=javascript>
function settimer(){
if ((localStorage.getItem("ongoingh1")) || (localStorage.getItem("ongoingm1")) || (localStorage.getItem("ongoings1")) ){
h=localStorage.ongoingh1;
m=localStorage.ongoingm1;
s=localStorage.ongoings1;
tm=window.setInterval('disp()',1000);
document.getElementById('btn').value='Pause';
} else {
var h1,s1,m1;
}
str= h + ':' + m +':' + s ;
document.getElementById('n1').innerHTML=str;
document.getElementById('btn').value='Pause';
}
function to_start(){
switch(document.getElementById('btn').value)
{
case 'Pause':
window.clearInterval(tm);
document.getElementById('2btn').value=str;
document.getElementById('btn').value='Start';
break;
case 'Start':
tm=window.setInterval('disp()',1000);
document.getElementById('btn').value='Pause';
break;
}
}
function disp(){
if(s<10) {
s1="0" + s;
} else {
s1=s;
}
if(m<10) {
m1="0" + m;
} else {
m1=m;
}
if(h<10){
h1="0" + h;
} else {
h1=h;
}
// Display the output //
str= h1 + ':' + m1 +':' + s1 ;
document.getElementById('n1').innerHTML=str;
localStorage.ongoingh1 = h;
localStorage.ongoingm1 = m;
localStorage.ongoings1 = s;
if(s<59){
s++;
}else{
s=0;
m++;
if(m==60){
m=0;
h++;
}
}
}
</script>
<body onload="settimer()">
<input type="button" name="btn" id='btn' value="Start" onclick="to_start()";>
<br><br>
<div id="n1" class='n1' style="z-index: 2; position: relative; right: 0px; top: 10px;
width: 100px; padding: 10px; color: black; font-size:20px; border: #0000cc 2px dashed; ">00:00:00</div>
<br>
<br>
<br>
<input type="text" name="2btn" id='2btn' value="" />
<br>
<br>
<br></body>
相关文章：
- CORS-服务器端cookie没有保存在chrome浏览器上
- 将用户对样式表的选择保存在cookie中
- Blackberry Webworks:Cookie 未保存在 OS 5 上
- 将数据URI保存在cookie中，以便稍后检索
- Cookie未保存在sencha touch 2应用程序中
- 如果存在Cookie，则JavaScript重定向
- 如果存在cookie，则自动执行Javascript
- Passport本地策略未将用户保存在cookie或会话中
- Node.js Express应用程序:如果存在cookie，则从服务器端向元素添加CSS类
- Chrome扩展api;t检查cookie是否存在
- 如果不存在，请在Angular中设置cookie
- 如果 cookie 存在，则显示倒计时 5 分钟
- 添加只要浏览器打开就持续存在的 cookie
- 根据 Cookie 的存在突出显示按钮
- JavaScript 秒表保存在 cookie 中
- JavaScript 如果 cookie 存在，则执行
- 只有当cookie存在时才添加addClass，否则隐藏
- 如果cookie存在，则不要运行JavaScript代码
- $.cookie()存在，但未被确认
- Jquery cookie 存在多个按钮集的问题
