javascriptによるカウントダウンタイマー制作

解決済

質問者：smart_2010
質問日時：2010/04/18 10:59
回答数：2件

只今、javascriptでカウントダウンタイマーを制作しています。
ボタンをクリックすると動いているカウントダウンタイマーに１０秒追加するようにしたいのですが、いろいろためしてみたのですがうまくいきません。散々悩んでいるうちに２日もたってしまいました。
御存じの方、いらっしゃいましたらどうか教えていただけませんでしょうか？

<script type="text/javascript">
<!--
if (window.attachEvent){
window.attachEvent('onload', showday);

}else {
window.addEventListener('load', showday , false);
}

function settime1(){
var year =2011; //年
var mon =4; //月
var day =2; //日
var time =20; //時
var min = 20; //分
var sec = 15; //秒

var xday = new Date(year,mon-1,day,time,min,sec); //基準になる年月日

return xday;
}

function showday() {
var nowday = new Date();
var xday = new settime1();

var passtime= xday.getTime()-nowday.getTime(); //今から基準になる日までの経過時間　1/1000秒単位

var cnt_day = Math.floor(passtime/(1000*60*60*24)); // カウントダウン表示 (日にち) の取得
passtime = passtime -(cnt_day*(1000*60*60*24)); // 経過秒から(日にち)を引く

var cnt_hour = Math.floor(passtime/(1000*60*60));// カウントダウン表示 (時) の取得
passtime = passtime -(cnt_hour*(1000*60*60)); // 経過秒から(時)を引く

var cnt_min = Math.floor(passtime/(1000*60)); // カウントダウン表示 (分) 取得
passtime = passtime -(cnt_min*(1000*60));// 経過秒から(分)を引く

cnt_sec = Math.floor(passtime/1000);// カウントダウン表示 (秒) 取得

passtime = passtime -(cnt_sec*(1000)); // 経過秒から(秒)を引く
var cnt_millisec = Math.floor(passtime/10); // カウントダウン表示 (100/1秒) 取得

// 分、秒、ミリ秒を２桁で表示する。
if(cnt_min<10){cnt_min = '0' + cnt_min;}
if(cnt_sec<10){cnt_sec = '0' + cnt_sec;}
if(cnt_millisec<10){cnt_millisec = '0' + cnt_millisec;}

if((xday - nowday) > 0){
document.tbox.dspday.value = cnt_hour+":"+cnt_min+":"+cnt_sec;

}else {
document.tbox.dspday.value = "終了"
}
timerID = setTimeout('showday()', 1000);

}
</script>
</head>
<body>
<form name="tbox" action="#">
<input name="dspday" id="dspday" type="text" style="position:absolute; top:475px;left:55px; font-size : 25px; z-index:3; color:navy; background:transparent; border-width : 0px ;border-style : solid;font-weight :bold ;" size="45" />
<input name="dspdaybtn" type="button" onClick="" value="１０秒追加" style="position:absolute; top:510px; left:70px; z-index:4;"/>
</form>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： babu_baboo
回答日時：2010/04/19 21:09

#1です。

＞とても参考になりました。
とありましたが、あれは、とてもさんこうにならないとおもうので、さいど。
ぜんかくくうはくは、はんかくにでも。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>CountDown</title>

<body>
<form action="#">
<p>
<input type="text" value="" id="fuga">
<input type="button" value="+10m" onclick="extensionTime(10)">
</p>
</form>

<script type="text/Javascript">
</script>

- 0
- 件

通報する

この回答へのお礼

見ず知らずの私などの為に御丁寧にありがとうございます。
心から感謝しております。

通報する

お礼日時：2010/04/20 21:37

No.1

回答者： babu_baboo
回答日時：2010/04/19 01:15

みじかくてよいのなら。

//こういうかいとうが、はんかんかうんだろうなぁ～

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>

<body>
<form action="#">
<p>
<input type="text" value="" id="fuga">
<input type="button" value="+10m" onclick="addM(10)">
</p>
</form>

<script type="text/Javascript">
var a;
function hoge(e,y,m,d,j,f,b,ms){
a=(new Date(y,m-1,d,j||0,f||0,b||0,ms||0))-0;
(function c(){
var b=(a-(new Date))/1000|0;
if(b>0){
e.value = fuga(b,4).replace(/(\d+)(\d{2})(\d{2})(\d{2})$/,'$1日$2時$3分$4秒');
setTimeout(c,1000);
}else e.value = 'end';
})();
}
function fuga(n,t){
if(!t)return '';var w=[0,10000,24,60,60][t--],r=n/w|0,s=n%w;
return fuga(r,t)+(s<10?'0'+s:s);
}
function addM(m){a+=m*60000}

hoge( document.getElementById('fuga'), 2010, 4, 20, 0, 0, 0, 0);
</script>