アプリ版：「スタンプのみでお礼する」機能のリリースについて

タイマーをデジタル時計風にするには

解決済

  • 質問者：lucky520aki
  • 質問日時：
  • 回答数：8件

※数日前にも「教えて！goo」の同じカテゴリーで質問した者です。
※結局自分が書いたコードを使ってるんですが...

<html>
<head>

<title>test</title>
<script type="text/javascript">
<!--
function doCountDown() {
setInterval('countDown()', 500);
}

function countDown() {
var now = new Date();
var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
var diff = Math.floor((tomorrow.getTime() - now.getTime()) / 1000) + 1;
var hour = Math.floor(diff / 3600);
diff %= 3600;
var min = Math.floor(diff / 60);
var sec = diff % 60;
document.getElementById('cd').innerHTML= "今日の終わりまであと" + hour + "時間" + min + "分" + sec + "秒";
}

//-->
</script>
</head>
<body onload="javacript:doCountDown();">
<div id='cd'></div>
</body>
</htm>

※カウントダウンタイマーをデジタル時計風にするには、どうすればいいのでしょうか？
（つい最近、「デジタル時計」をアメリカのサイトのサンプルを模倣しながら作ったことならあります。）

デジタル数字のイメージ「０～９」と「：」はもう準備来ました。
”０”をdg0.gif、”１”をdg1.gif～～～～～”９”をdg9.gifとし、”：”をdga.gifとします。

これらのイメージを入れつつ、上のコードに沿って動かしたいです。
ちなみに、自分が作ったデジタル時計は以下のやつです。

「タイマーをデジタル時計風にするには」の質問画像
通報する

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

質問の本文を隠す

A 回答 (8件)

No.8ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

No1 と　No3 のちがいは、No7 のこーどでいうと、


　　if (!n) n = d;
があるかないかです。

new Date は、Date オブジェクトをかえしますが、
+new Datte とすると、(new Date).getTime () とおなじいみになります。

それを 1000 でわり、びょうにへんかんします。
じさの９じかんをちょうせいし、60*60*24 びょうであまりをもとめたのが n です。

これを setInterval で、でくりめんとしています

n == 0、 つまりひづけがかわったとき」、 n == -1 になると、かんすう f は、ただしいひょうじをしなくなります。

No3 のこーどは、ひづけがかわったときに、n = 86400 になるため、ひづけがかわるたびに、１びょうづつおくれていきます。



じぶんでこーどをかいておいていうのもへんですが、これはさんこうにしないほうがうよいとおもいます。
iPhone なら、canvas もつかえることだし、そちらをつかうときれいかも？
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： babu_baboo
  • 回答日時：

> ショートコーディング？


> 別名：「コードゴルフ」ですか？ｗｗ
> なんか、そういう遊びがあると本で読んだことがあります。

あそびだって？ち・が・う・ね。ときとしてげいじゅつだね。^^;


そして、ほんとうにすまない。またていせい。
あっしゅくするまえのしゅうせいしたやつ。

すくりぷとは、</body> のちょくぜんにおけば、onload をつかわなくてよいよ。

(function (gete, pad, setn) {
　var d = 86400;
　var e = ['a','b','c','d','e','f'].map (gete);
　var n = d - ((+ new Date / 1000) + 32400) % d |0;
　var f = function () {
　　if (!n) n = d;
　　(pad (--n/3600) + pad (n/60%60) + pad (n%60)).split('').forEach (setn, e);
　};　

　setInterval (f, 1000);
})(
　 function (s) { return document.getElementById (s); },
　 function (n) { return (n < 10 ? '0': '') + (n |0); },
　 function (s, i) { this[i].alt = 'dg' + s + '.gif'; }
　);

この回答への補足

最後に一つだげ質問したいんですけど、＃１のコードはなぜダメなんですか？

「まいなすちになるとへんだった。」というのは、一体どういうこと何でしょうか？

※返事待ってます。
※是非、宜しくお願いします。

補足日時：2011/11/07 00:37
通報する
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： taloo
  • 回答日時：

>

http://oshiete.goo.ne.jp/qa/7109072.html
>「javascriptについて」の質問者からの補足に、
なるほど、クレクレ君でしたか。
そういうことでしたら失礼しました。

※ネタニマジレスカコワルイ＞自分

>> 大学ではまだCとC#しかまだ学んでおらず、
>と、あります。
>
>「まだ」という文字から、在学していて「課題」であると判断しました。
なるほど、、、
私の見方では、『CとC#しかまだ学んでおらず』ですからそれ以外の言語は学校以外、つまり自分のサイトで使うための物ではないかと。。。

こちらとしてはこんな書き方があるのかと、興味深い所ではあるんですが、
私としては、こういうコードでも（自分が書いた物なら）コピーされるのは嫌ですけどね。
（主観なので、他の回答者がそれでも良いというのなら、私はかまいません。）
学校の課題なら、ともすれば減点ですから。（先生が気づけば、ですけどね。）


コードが古くさいと行っても、最初の勉強ってそんな物じゃないでしょうか？
サーバーの時間を取得と行っても、いきなりAjaxやサーバープログラム（少なくともJavaScript以外の言語か、第三者のAPIが絡む）から入るのは無理があると思います。
DOMはわからないけどWebSocketならわかる！という人は、じゃあ、
http://www2.nict.go.jp/w/w114/tsp/JST/JST5.html
http://www2.nict.go.jp/w/w114/tsp/PubNtp/clients … (WebSocketではなくJSONPです）
このサービスで時刻を取得して、わかりもしないDOMで表示できるかというと、そういうわけでもないと思います。
JavaScriptの基本部分は古い物ですし、HelloWorldはほとんど変わらないと思います。

この回答への補足

一応、「課題」ではないです。
僕は基本、「できそうなこと」を自分でこなして、「できそうにないこと」⇐（一人で）はここで質問するんですよ。
ある意味「クレクレ君」です。
提示してもらった「サンプルコード」をペースに自分でいじって見たいと言うか、どれだけなんです。
コピペはしないですけど...
※「いじる」と言っても１、２割程度しか書き換えることができないので、もしかしたら熟練のプログラマさんたちには「コピペ」と見なされるのかも知れませんがｗｗｗ

補足日時：2011/11/06 00:59
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： babu_baboo
  • 回答日時：

taloo さん、



No1&3です。いつも回答を楽しんで読んでおります。


> 回答者の利己的な考え
これには、日頃から平仮名で回答しているので、反論のしようもありません。

http://oshiete.goo.ne.jp/qa/7109072.html
「javascriptについて」の質問者からの補足に、
> 大学ではまだCとC#しかまだ学んでおらず、
と、あります。

「まだ」という文字から、在学していて「課題」であると判断しました。
例題から逸脱した回答に難色しめしているようなので、その辺も考慮する対象となりました。
（なぜだか、コードが古く感じます。サーバーの時間取得もスルー。過去の経験から言うとまさに「課題」）

http://closure-compiler.appspot.com/home
これを使って圧縮しましたが、心ときめいたのは、先人の人達が書いた遊び心のショートコーディングです。質問者もときめいてくれれば良いのですが。

この回答への補足

そうですね。僕はまだ大学在学中なんですが、「課題」ではないですよ。
ただ、iPhoneの「デジタル時計」アプリを見て、「個人でもこういうの作れるのかな？」と思っただけです。

ショートコーディング？
別名：「コードゴルフ」ですか？ｗｗ
なんか、そういう遊びがあると本で読んだことがあります。

補足日時：2011/11/06 00:40
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： taloo
  • 回答日時：

以前の質問がどんなで、解答がどんなのかは知りませんが、


>ANo.1
>ANo.2
他人のコードをコピーペーストで使う事がすばらしいとは思えません。
コピーペーストで使えというのは質問・回答ではなく、ただの制作代行だと思うんですけどね。
それに、制作代行はクレクレ君を増やすだけだと思います。
（「こういうコードを書いてください」質問文に書くと書いてくれないが、書かなければ作ってもらえる。）
また、回答を使われなければ非難するのは、回答者の利己的な考え、エゴだと思います。


他人が書いたコードほど読みづらい物はありません。
つまり、回答者にとって質問者のコードほど読みづらい物はないでしょうが、
同様に、質問者に取って回答者のコードほど読みづらい物はありません。

どちらが技術的に優れているかを考えれば、回答者が質問者に歩み寄るのが当然ではないでしょうか。



回答する気がないならかまわないと思いますけどね。
私も、課題の様な質問にトリッキーなコードで回答する事はありますが、学校で習ったであろう範囲を逸脱させ、もしコピーペーストで提出したら講師にバレる可能性を高くするためです。
それで理解できるなら、質問するまでもなく自力で解答できるでしょう。

-----------------------------
>document.getElementById('cd').innerHTML= "今日の終わりまであと" + hour + "時間" + min + "分" + sec + "秒";

この部分を、画像を表示するような、文字通り「HTML」になるようにしてみてください。
あえて書く必要はないと思いますが、画像を表示するHTMLタグは <img> です。


最初に<img>を書いておいて、srcだけを変えるなどの方法もありますが、
それは追々やっていく事でしょうし、いきなり応用から始めるのは不可能だと思います。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： babu_baboo
  • 回答日時：

１です。

ていせいです。まいなすちになるとへんだった。

(function(a,b,d){var e="a,b,c,d,e,f".split(",").map(a),c=86400-(+new Date/1E3+32400)%86400|0;setInterval(function(){(b(--c/3600)+b(c/60%60)+b(c%60)).split("").forEach(d,e);c<1&&(c=86400)},1E3)})(function(a){return document.getElementById(a)},function(a){return(a<10?"0":"")+(a|0)},function(a,b){this[b].alt="dg"+a+".gif"});

2様がいうように、ひとけたづつぶんかいしてますが、 innerHTML をつかうのは、
setInterval に、もじれつをわたすぐらい、いけてないとおもう。

この回答への補足

何かわかりませんんが、コレ表示されないです...

補足日時：2011/11/06 01:01
通報する
    • good
    • 0
    • 件
通報する

No.2

＞結局自分が書いたコードを使ってるんですが...


うわー(笑)

＞document.getElementById('cd').innerHTML= "今日の終わりまであと" + hour + "時間" + min + "分" + sec + "秒";
ここのhour、min、secを一桁ずつ分割してimgタグで表示。

この回答への補足

やってみたんですけど、動きません。

補足日時：2011/11/06 01:02
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： babu_baboo
  • 回答日時：

> 結局自分が書いたコードを使ってるん


らくたんするひともいるかもしれないのだから・・・



<!DOCTYPE html>
<title></title>
<body>
<div>
<img src="dg0.gif" alt="h" id="a">
<img src="dg0.gif" alt="h" id="b">
<img src="dga.gif" alt="">
<img src="dg0.gif" alt="m" id="c">
<img src="dg0.gif" alt="m" id="d">
<img src="dga.gif" alt="">
<img src="dg0.gif" alt="d" id="e">
<img src="dg0.gif" alt="d" id="f">
</div>

<script>
//ひつようないなら、いかの２ぎょうをこめんとあうとしてね
if(!Array.prototype.map)Array.prototype.map=function(b,e){var c=this.length;if(typeof b!="function")throw new TypeError;for(var d=Array(c),a=0;a<c;a++)a in this&&(d[a]=b.call(e,this[a],a,this));return d};
if(!Array.prototype.forEach)Array.prototype.forEach=function(b,c){var d=this.length;if(typeof b!="function")throw new TypeError;for(var a=0;a<d;a++)a in this&&b.call(c,this[a],a,this)};

//ほんたい
(function(a,b,d){var e="a,b,c,d,e,f".split(",").map(a),c=86400-(+new Date/1E3+32400)%86400|0;setInterval(function(){(b(--c/3600)+b(c/60%60)+b(c%60)).split("").forEach(d,e)},1E3)})(function(a){return document.getElementById(a)},function(a){return(a<10?"0":"")+(a|0)},function(a,b){this[b].src="dg"+a+".gif"});


</script>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報