GIFアイコンをいじる

まえまえ記事で、
中段ぐらいにおきまして、
顔のGIFアイコンが横に伸び縮みしております。

ゆか さんからリクエストがございましたので、
ちょっとご説明させて頂きたいと思います。

基本的には
まえまえまえまえまえまえまえまえまえまえまえまえまえまえ
記事の応用なんです。
って、いつの記事かわかりませんが、
「文字の点滅」という記事ですね。

シンプルエディタしか試していませんが、
ソネさんブログはGIFアイコンを記事に挿入後、
GIFのwidthやheightをいじっても、
id属性などを挿入しようとしても、
保存の時点で、一言一句、元のタグに上書き戻されるようで、
思い通りのGIFアイコンの大きさなどには指定できないようですね。

そこで、以前ちょっと触れましたが、
DOMという構造概念を使いまして、
いわゆる、ダイナミックHTMLというものを実現しようとしているわけです。

って、何のことだかさっぱり分かりませんが、
動きを与えたり、打てば響くようなブログなどを
実現できるということですね。

ほかのスクリプトの誤動作を避けるため、
毎回、関数名や変数名を考えるんですが、
だんだん思い浮かびにくくなってきました～

そ～んでっ、GIFのheightもいじれるかなぁっと
思ったんですが、なんだかうまくいきませんでした。
それにline-heightだのheightだの
メンドウになってきてwidthしかいじってません。
っていうか、とどのつまりぃーは悪いことに使うなぁ
え～、逆もとのもくあみ状態になったわけです。(なんかちがうなぁ)

基本的な要素としては、次の3つでしょうか。
もちろん数字とアンダースコア[_]を除いて記号から始まらなければ、
あと予約語以外ですね、どんな名前でもいいんですが、
gificoncountで伸ばすか戻すかのスイッチの記憶、
そして、DOMのgetElementById("～")です。
document.getElementById("～").firstChild.widthで
入れ子構造の最初の要素すなわちimgタグのwidthをいじるという形です。
今回、spanタグでimgタグを挟んで入れ子構造になってますね。
あとはおなじみ?　setTimeoutで時間待ちです。

今回はいつもより早めに且つ長めに回しております～
でなくて伸び縮みさせております～



今回、imgタグのwidthを変化させているということは、
写真等の画像もビヨンビヨンさせることが出来ますよね。
(ってそんな機会あるかなぁ)


ソース

<span id="gificonwaraikao"><img src="https://blog.so-net.ne.jp/_images_e/140.gif" width="15" height="15" alt="[わーい（嬉しい顔）]" border="0" class="sonet-icon" /></span>

<script type="text/javascript"><!-- //↑<img />が変化させたいGIF
var gificoncount=0;
//↑伸び縮みのスイッチ
function gificonflashing(){ //関数の始めです
 var gificontmp=document.getElementById("gificonwaraikao");
//↑DOM、長いので変数に記憶させておく
 if(gificoncount==0){ //スイッチが0ならノーマルサイズ
  gificontmp.firstChild.width="15"; //firstChild、入れ子の最初のタグ　<img />のwidth
  gificoncount=1; //スイッチを1に
 }
 else{ //スイッチが0以外なら
  gificontmp.firstChild.width="460"; //伸ばします！
  gificoncount=0; //スイッチを0に戻す
 }

 setTimeout("gificonflashing()", 300); //0.300秒待って、関数の呼び出し　　繰り返し
//↑関数の内部から自身の関数を呼び出している
} //関数の終わりです
//--></script>

<script type="text/javascript"><!--
gificonflashing(); //最初に関数を呼び出す　ここがないと何も起きない
//--></script>

タグ：gif アイコン width ビヨンビヨン ジフ 画像 imgタグ

埋め込み IE条件付コメ

まえまえ記事で、マリン さんが
どちらかのブロガーさんが埋め込みタグで
ご苦労されていらっしゃると教えて頂いたんですが、
僭越ながら乏しい私の知識で、一般的なことをちょっと…

WMPなどをブログなどに埋め込む時、
embedタグはIEでは認識しないとかよく聞きます。
そしてふつう、入れ子にして記述します。
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
width="～" height="~~">
<param name="filename" value="URL" />
<param … />
…
<embed type="application/x-mplayer2"
src="URL" width="～" height="~~" …>
</embed>
</object>
という感じです。
外側のobjectタグをIEが認識し、
それ以外のブラウザが内側のembedタグを認識するようです。
この例ではWMPのオールドバージョンを埋め込みますが、
新しいバージョンがインストールされていれば、
それが適用されるようです。

ちなみに、フラッシュの埋め込みの場合、
objectタグのActiveX用classidは、
clsid:D27CDB6E-AE6D-11CF-96B8-444553540000
パラメータでname属性値をmovie、
value値にファイルの存在するURLを指定します。
embedタグの方は、type属性が、
application/x-shockwave-flash
になります。

まえ記事のYouTubeの貼り付けも同じ意味です。
例として2番目の大フーガのタグは次のようになってます。
<object width="450" height="280">
<param name="movie"
value="http://www.youtube-nocookie.com/v/egn1z3sVvoY&hl=ja_JP&fs=1&rel=0">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed type="application/x-shockwave-flash"
src="http://www.youtube-nocookie.com/v/egn1z3sVvoY&hl=ja_JP&fs=1&rel=0"
width="450" height="280"
allowfullscreen="true" allowscriptaccess="always">
</embed>
</object>



また、IEで使えるテクニックとして、
条件付コメントが使えるかもしれません。

<!--[if gte IE 5 ]>
IE5以上のみここを認識します。
<![endif]-->
（gteはgreater than or equal、「以上」の意味。）

<!--[if lt IE 7 ]>
IE7未満のみここを認識します。
ただし、条件付コメはIE5からです。
<![endif]-->
（ltはless than、「未満」の意味。）
（推測できると思いますが、gtが「こえる」、lteが「以下」になります。）

<!--[if !IE 6 ]>
IE6以外で機能します。
<![endif]-->
（!は「以外」ですよね。）

上記はIEに対応した使い方で、
以下はIE以外のブラウザに対応した書き方です。
もちろん、条件付コメはIE5からなので、
残念ながらIE4以下にも有効になってしまいます。
でもIE4などを使っている方はほんと少数でしょうけれども

<![if !IE ]>
IE4以下とIE以外のブラウザで使えます。
<![endif]>

タグ：埋め込み オブジェクトタグ エンベッドタグ メディアプレーヤー 条件付コメント

変数1回目?

NoScript等にクロスサイトスクリプトの疑惑判定がされる為、最初の『script』を半角カナにしています。

<ｽｸﾘﾌﾟﾄ type="text/javascript">
<!--//〔パターン1〕
a = 2;//←グローバル変数
//↑aに2を入れる
function ab(){
 a = 1;//←aに1を入れる
 //2関数内が最初に実行される
 document.write("a="+a);
}
//↓1最初に関数abを呼び出す
ab();
//↓単なる改行
document.write("<br />");
//↓3最後にｽｸﾘﾌﾟﾄ内の変数を表示
document.write("a="+a);
//--></script>
<br />

<script type="text/javascript">
<!--//〔パターン2〕
var b = 2;//←グローバル変数

function cd(){
 var b = 1;

 document.write("b="+b);
}

cd();

document.write("<br />");

document.write("b="+b);
//--></script>
<br />

<script type="text/javascript">
<!--//〔パターン3〕
var c = 2;//←グローバル変数

function ef(){
 c = 1;

 document.write("c="+c);
}

ef();

document.write("<br />");

document.write("c="+c);
//--></script>
<br />

<script type="text/javascript">
<!--//〔パターン4〕
d = 2;//←グローバル変数

function gh(){
 var d = 1;

 document.write("d="+d);
}

gh();

document.write("<br />");

document.write("d="+d);
//--></script>
<br />

それぞれ4つは、同じ動作をします。
最初の変数と関数内functionの変数を1回づつ表示します。
言わずもがなですが、大前提として上から順に実行されます。
パターン1で言いますと、
グローバル変数aに2が入れられます。
なぜグローバル変数と言い切れるかですが、
例のおまじない(<script～/script>)の中で
関数外でaという変数を立てましたよと、宣言しているからです。
つぎの関数function、名前がabは
呼び出されるまでは素通りされます。
そして、その下のab();で初めて関数が呼び出されるわけです。
このなかで(いまはどちらか言いませんがとにかく)
aの値を表示しなさいと、document.writeで表しています。
つづき、単なる改行を経て、
最後でこれまたどちらか分かりませんが、
とにかくaの値を表示しなさいとなるわけです。

さて、たとえば、パターン1のみ実行すると、
次のように?には変数の内容が表示されます。
つまり、1か2のいずれかです。
a=?
a=?
このように関数の外と中で変数をそれぞれ呼び出すと
各変数の値はどうなるでしょう?

答えは…
a=1　　b=1　　c=1　　d=1
a=1　　b=2　　c=1　　d=2
のように4つのパターンで違いが出ます。
パターン1とパターン3は関数の中の変数は
中だけのローカル変数のようで、実はグローバル変数と認識されます。
パターン2とパターン4では、
グローバル変数とローカル変数は別の変数として認識されます。
（各、1番目がグローバル変数、2番目がローカル変数）
同じ名前ですが別物と扱われるんですね。

つまり意識しなければならないということですね。
うっかりしてると、思いがけないバグの要因になります。
良く推奨されているのは、
グローバル変数もローカル変数も、
最初に『var』をつけて変数ですよ!と宣言しておく、
〔パターン2〕がいいようです。
かくいう自身、最初はおかしいと思いつつ、
結果が同じだったので、全て動作が同じと書いてました。

グローバル変数はどこからでも見える（参照できる）わけです。
ローカル変数は関数の中でしか見えないわけですね。

タグ：JavaScript ジャバスクリプト グローバル変数 ローカル変数

Improved? UnImproved? STOPWATCH

 

©2009 Nigoro. All rights reserved.

一応…
必要ないとは思いますが…
いらないとは思いますが…
177px幅までのサイドペインに…
ご自由に貼っていただけますが…
そのあたりで微妙にレイアウト崩れが…
出始めるかも知れません…
そのときはスタイルシートをいじってください…

今回はデザイン、機能を重視してますので…
といってもたいしたことはありませんが…
早押しには不向きのようです…
IE6、Firefox、Chrome、Opera、Win版Safariで…
試しましたが、IEだけ反応も表示も遅いですね…



　早押しででました…
　ちなみに、火狐です…



　またまたたまたまでました…
　ちなみに、USBマウスです…
　montblancさんにはおよびません…



ソース

<style type="text/css"><!--
div.nigorosw1{text-align:center;}
div.nigorosw2{display:-moz-inline-box; display:inline-block; /display:inline; /zoom:1;}
#nigoroswtimingresult{line-height:28px; font-size:24px; font-family:Arial,monospace,Terminal,'ＭＳ ゴシック','Osaka－等幅','Osaka-Mono';}
#nigoroswreset{line-height:14px; vertical-align:middle; width:85px; padding:0 0 1px; float:left; text-align:center; font-size:12px; color:#FFF; font-family:Impact,Arial,'ＭＳ Ｐゴシック',Osaka;}
div.swspace{line-height:14px; width:4px; float:left;}
#nigoroswstart{cursor:pointer; line-height:14px; vertical-align:middle; width:85px; padding:0 0 1px; float:left; text-align:center; font-size:12px; color:#FFF; font-family:Impact,Arial,'ＭＳ Ｐゴシック',Osaka;}
#nigorocrsw{text-align:center; padding:3px 0 1px; font-size:8px; font-family:'ＭＳ Ｐゴシック',Osaka;}
--></style><script type="text/javascript"><!--
/* stopwatch by Nigoro. Ver.1.10 */
var swkijun, swgenzai, swhold = new Date(), swstopwatchid;
function swinitialize(){
 displaytimingresult(0, 0, 0, 0);
 document.getElementById("nigoroswstart").innerHTML = "START";
 document.getElementById("nigoroswstart").style.background = "#00F";
 document.getElementById("nigoroswreset").innerHTML = "&nbsp;";
 document.getElementById("nigoroswreset").style.background = "#FFF";
}

function swtiming(){
 var timediff, tmp, diffhour, diffmin, diffsec, diffmillisec;
 timediff = swgenzai.getTime() - swkijun.getTime();
 tmp = timediff / 3600000;
 if(tmp >= 24){
  swkijun = new Date();
  swgenzai = new Date();
  timediff = swgenzai.getTime() - swkijun.getTime();
  tmp = timediff / 3600000;
 }
 diffhour = Math.floor(tmp);
 timediff = timediff - diffhour * 3600000;
 tmp = timediff / 60000;
 diffmin = Math.floor(tmp);
 timediff = timediff - diffmin * 60000;
 tmp = timediff / 1000;
 diffsec = Math.floor(tmp);
 diffmillisec = timediff - diffsec * 1000;
 return {diffhour:diffhour, diffmin:diffmin, diffsec:diffsec, diffmillisec:diffmillisec};
}

function swstarttiming(){
 swkijun = new Date();
 clearTimeout(swstopwatchid);
 document.getElementById("nigoroswstart").innerHTML = "STOP";
 document.getElementById("nigoroswstart").style.background = "#F00";
 document.getElementById("nigoroswreset").innerHTML = "SPLIT";
 document.getElementById("nigoroswreset").style.background = "#0FF";
 document.getElementById("nigoroswreset").style.cursor = "pointer";
 swnucleus();
}

function swstoptiming(){
 document.getElementById("nigoroswstart").onclick
  = function(){
     swkijun.setTime(new Date().getTime() - (swhold.getTime() - swkijun.getTime()));
     document.getElementById("nigoroswstart").innerHTML = "STOP";
     document.getElementById("nigoroswstart").style.background = "#F00";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT";
     document.getElementById("nigoroswreset").style.background = "#0FF";
     swnucleus();
    };
 document.getElementById("nigoroswreset").onclick
  = function(){
     document.getElementById("nigoroswreset").style.cursor = "auto";
     swresettiming();
    };
}

function swsplittiming(){
 document.getElementById("nigoroswstart").onclick
  = function(){
     swhold.setTime(new Date().getTime());
     document.getElementById("nigoroswstart").innerHTML = "SPLIT START";
     document.getElementById("nigoroswstart").style.background = "#0FF";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT RESULT";
     document.getElementById("nigoroswreset").style.background = "#6495ED";
     swsplitresult();
    };
 document.getElementById("nigoroswreset").onclick
  = function(){
     document.getElementById("nigoroswstart").innerHTML = "STOP";
     document.getElementById("nigoroswstart").style.background = "#F00";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT";
     document.getElementById("nigoroswreset").style.background = "#0FF";
     swnucleus();
    };
}

function swsplitresult(){
 document.getElementById("nigoroswstart").onclick
  = function(){
     swkijun.setTime( new Date().getTime()- ( swhold.getTime() - swkijun.getTime() ) );
     document.getElementById("nigoroswstart").innerHTML = "SPLIT STOP";
     document.getElementById("nigoroswstart").style.background = "#F0F";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT CANCEL";
     document.getElementById("nigoroswreset").style.background = "#5F5";
     swsplittiming();
    };
 document.getElementById("nigoroswreset").onclick
  = function(){
     swgenzai.setTime(swhold.getTime());
     var tmp = swtiming();
     displaytimingresult(tmp.diffhour, tmp.diffmin, tmp.diffsec, tmp.diffmillisec);
     document.getElementById("nigoroswstart").innerHTML = "START";
     document.getElementById("nigoroswstart").style.background = "#00F";
     document.getElementById("nigoroswreset").innerHTML = "RESET";
     document.getElementById("nigoroswreset").style.background = "#0F0";
     swstoptiming();
    };
}

function swresettiming(){
 swinitialize();
 document.getElementById("nigoroswstart").onclick = function(){swstarttiming();};
}

function swnucleus(){
/* Copyright(C) 2009 Nigoro. All rights reserved. */
 swgenzai = new Date();
 var tmp = swtiming();
 displaytimingresult(tmp.diffhour, tmp.diffmin, tmp.diffsec, tmp.diffmillisec);
 document.getElementById("nigoroswstart").onclick
  = function(){
     swhold.setTime(swgenzai.getTime());
     clearTimeout(swstopwatchid);
     document.getElementById("nigoroswstart").innerHTML = "START";
     document.getElementById("nigoroswstart").style.background = "#00F";
     document.getElementById("nigoroswreset").innerHTML = "RESET";
     document.getElementById("nigoroswreset").style.background = "#0F0";
     swstoptiming();
    };
 document.getElementById("nigoroswreset").onclick
  = function(){
     clearTimeout(swstopwatchid);
     document.getElementById("nigoroswstart").innerHTML = "SPLIT STOP";
     document.getElementById("nigoroswstart").style.background = "#F0F";
     document.getElementById("nigoroswreset").innerHTML = "SPLIT CANCEL";
     document.getElementById("nigoroswreset").style.background = "#5F5";
     swsplittiming();
    };
 swstopwatchid = setTimeout(function(){swnucleus();}, 1);
}

function displaytimingresult(e, f, g, h){
 var tmp ,e ,f, g, h;
 tmp = "0" + e + "0";
 e = tmp.slice(tmp.length-3, -1);
 tmp = "0" + f + "0";
 f = tmp.slice(tmp.length-3, -1);
 tmp = "0" + g + "0";
 g = tmp.slice(tmp.length-3, -1);
 tmp = "00" + h + "0";
 h = tmp.slice(tmp.length-4, -1);
 document.getElementById("nigoroswtimingresult").innerHTML
  = e + "h" + f + "m" + g + "s" + h;
}
//--></script><div class="nigorosw1"><div class="nigorosw2">
<div id="nigoroswtimingresult"></div><div class="nigorosw1"><div class="nigorosw2">
<div id="nigoroswreset"></div><div class="swspace">&nbsp;</div>
<div id="nigoroswstart" onclick="swstarttiming()"></div>
</div></div><div style="clear:left"></div>
<div id="nigorocrsw">&copy;2009 Nigoro. All rights reserved.</div></div></div>
<script type="text/javascript"><!--
swinitialize();
//--></script>

タグ：ジャバスクリプト Date() ストップウォッチ Dateオブジェクト improvement JavaScript stopwatch 改良

いい?かんじ時計

 

 

 

©2009 Nigoro. All rights reserved.

Macユーザーさん、Linuxユーザーさんにはうまく表示されてるかわかり兼ねます。
Linuxのフォントファミリーを追加してないのでごめんなさい。また、調べておきます。
多少のカスタマイズが出来るように、変更しました。
ソースの色付きの部分を変更するとかぎ括弧以外の括弧などにできます。
（年月日時分秒の上のdecorの所です。）
もちろん、皆さんがされているように漢数字などの部分を全角1文字で置き換えると、
ある程度カスタマイズできます。

まえまえ記事からの
Dateオブジェクトに関する記事
から引っぱりつづきで

カスタムペインに貼り付けられる、
ジャバスクリプトの
漢数字の時計を作ってみました。

おそらくペインの幅が180ピクセル位の
狭いテンプレのブログでも
貼る事ができると思います。

よろしければ、貼ってみてください。

以下にソースを示しますので、
そのままコピー＆ペーストで
貼れると思います。


ところで、javascript内で注釈を入れたいときは、
『//』以降その行のみコメントアウトできます。
『/*』『*/』ではさむとその間をコメントアウトできます。

CSSスタイルシートでは、
『/*』『*/』でコメントアウトできます。

HTML内では、
『<!--』『-->』でコメントアウトできます。

混乱しますよね


皆様のお陰で、ブログ名のようなペースではありますし、
記事の少なさにもかかわらず、
千nice！を達成することが出来ました。
皆さんのような才能がございませんので、
絵的な何かなどをプレゼント！
のようなこともできませんが、
コメントおよびnice！ありがとうございました。
これからもどうぞよろしくおねがいしま～すm(_ _)m


ソース

<style type="text/css"><!--
div.kanjikan1{text-align:center; padding:10px 0 0;}
div.kanjikan2{display:-moz-inline-box; display:inline-block; /display:inline; /zoom:1;}
#kanjikan3,#kanjikan4,#kanjikan5{letter-spacing:-1px; height:19px; font-size:14px; font-weight:bold; font-family:'ＭＳ 明朝','平成明朝','ＭＳ ゴシック','Osaka－等幅','Osaka-Mono',monospace;}
div.nigorocrkanclock{text-align:center; padding:8px 0 0; font-size:8px; font-family:'ＭＳ Ｐゴシック',Osaka;}
-->
</style><script type="text/javascript"><!--
/* Chinese characters' number clock by Nigoro. Ver1.04 */
var yorebe = ["日","月","火","水","木","金","土","曜日"],
kannumber = ["零","壹","貳","參","肆","伍","陸","漆","捌","玖"],
yearplace = [0,0,0,0,0,0,0,"","拾","萬","阡","陌","拾",""],
ymdhms = new Array(10),decor = ["「","」"],
yeartosecondunit = ["年","月","日","時","分","秒"];

function kanclock(){
 var gcan, i, tmp1, tmp2, tmp3, tmp4;
 gcan = new Date();
 ymdhms[0] = gcan.getFullYear();
 ymdhms[1] = gcan.getMonth() + 1;
 ymdhms[2] = gcan.getDate();
 ymdhms[3] = gcan.getHours();
 ymdhms[4] = gcan.getMinutes();
 ymdhms[5] = gcan.getSeconds();
 ymdhms[6] = gcan.getDay();

 tmp1 = "";
 for(i=6 ;i>0 ;i--){
  yearplace[i] = ymdhms[0]%10;
  ymdhms[0] = Math.floor(ymdhms[0]/10);
  if(yearplace[i] != 0){
   if(i < 6 && yearplace[i] == 1)
    tmp1 = yearplace[i+7] + tmp1;
   else
    tmp1 = kannumber[yearplace[i]] + yearplace[i+7] + tmp1;
  }
 }
 ymdhms[7] = tmp1 + yeartosecondunit[0];
/* Copyright(C) 2009 にごろ Nigoro. All rights reserved. */
 ymdhms[8] = "";
 ymdhms[9] = "";
 for(i=1 ;i<=5 ;i++){
  tmp1 = "";
  tmp2 = Math.floor(ymdhms[i]/10);
  if(tmp2 != 0){
   if(tmp2 == 1)
    tmp1 += yearplace[12];
   else
    tmp1 += kannumber[tmp2] + yearplace[12];
  }
  else
   tmp1 += tmp1;

  tmp3 = ymdhms[i]%10;
  if(tmp3 != 0)
   tmp1 += kannumber[tmp3];
  else{
   if(i > 2 && tmp2 == 0)
    tmp1 += kannumber[tmp3];
   else
    tmp1 += "";
  }
  tmp4 = "　　" + tmp1 + "　";
  if(i < 3){
   if(i == 1) ymdhms[8] += tmp4.slice(tmp4.length-3, -1) + yeartosecondunit[i];
   else ymdhms[8] += tmp4.slice(tmp4.length-4,- 1) + yeartosecondunit[i];
  }
  else
   ymdhms[9] += tmp4.slice(tmp4.length-4, -1) + yeartosecondunit[i];
 }

 document.getElementById("kanjikan3").innerHTML = ymdhms[7];
 document.getElementById("kanjikan4").innerHTML =
  " " + ymdhms[8] + decor[0] + yorebe[ymdhms[6]] + yorebe[7] + decor[1];
 document.getElementById("kanjikan5").innerHTML = ymdhms[9];
}
//--></script><div class="kanjikan1">
<div class="kanjikan2"><div id="kanjikan3">&nbsp;</div>
<div id="kanjikan4">&nbsp;</div><div id="kanjikan5">&nbsp;</div></div>
<div class="nigorocrkanclock">&copy;2009 Nigoro. All rights reserved.</div>
</div><script type="text/javascript"><!--
setInterval("kanclock()",1000);
//--></script>

タグ：漢数字 時計 ブログ カスタムペイン

Stop Watch!

An Applied Example with Date() Object

 
START STOP RESET

©2009 Nigoro. All rights reserved.

Source Code

<script type="text/javascript"><!--
var kijun, genzai, startbuttonchecker = 0, stopbuttonchecker = 0,
    hold = new Date(), stopwatchid;

function timing(){
 var timedifference, tmp,
     diffhour, diffmin, diffsec, diffmillisec;

 genzai = new Date();

 timedifference = genzai.getTime() - kijun.getTime();
//assigns "timedifference" to the time difference
//between "genzai" and "kijun" by the millisecond.

 tmp = timedifference / (60 * 60 * 1000);
 if(tmp >= 24){
  kijun = new Date();
  genzai = new Date();
  timedifference = genzai.getTime() - kijun.getTime();
  tmp = timedifference / (60 * 60 * 1000);
 }
//resets "kijun" to a new criterion
//when the timing period is beyond 24 hours.

 diffhour = Math.floor(tmp);
//(represents []:Gauss' symbol)
//means the greatest integer
//that is less than or equal to "tmp".

//In this function "tmp" is reused.

 timedifference = timedifference - diffhour * 60 * 60 * 1000;
 tmp = timedifference / (60 * 1000);
 diffmin = Math.floor(tmp);

 timedifference = timedifference - diffmin * 60 * 1000;
 tmp = timedifference / 1000;
 diffsec = Math.floor(tmp);

 diffmillisec = timedifference - diffsec * 1000;

 return {diffhour:diffhour, diffmin:diffmin,
         diffsec:diffsec, diffmillisec:diffmillisec};
}

function starttiming(){
 clearInterval(stopwatchid);
 stopwatchid =
  setInterval(
   function(){
    var tmp = timing();
    displaytimingresult(
     tmp.diffhour, tmp.diffmin,
     tmp.diffsec, tmp.diffmillisec
    );
   }
  , 1);
}

function stoptiming(){
 if(stopbuttonchecker == 0) stopbuttonchecker = 2;

 if(stopbuttonchecker == 1){
  hold.setTime(genzai.getTime());
//sets "hold" by the millisecond
//to the got time by the millisecond of "genzai".

  clearInterval(stopwatchid);
  startbuttonchecker = 3;
  stopbuttonchecker = 2;
 }
}

function resettiming(){
 startbuttonchecker = 0;
 stopbuttonchecker = 0;
 clearInterval(stopwatchid);
 displaytimingresult(0, 0, 0, 0);
}

function nucleus(){
/* Copyright(C) 2009 にごろ Nigoro. All rights reserved. */
 if(startbuttonchecker == 0) startbuttonchecker = 1;

 if(startbuttonchecker == 1){
  kijun = new Date();
  starttiming();
  startbuttonchecker = 2;
  stopbuttonchecker = 1;
 }
 if(startbuttonchecker == 3){
  kijun.setTime( new Date().getTime()
   - ( hold.getTime() - kijun.getTime() ) );
  starttiming();
  startbuttonchecker = 2;
  stopbuttonchecker = 1;
 }
}

function displaytimingresult(e, f, g, h){
 var tmp ,e ,f, g, h;

 tmp = "0" + e + "0";
 e = tmp.slice(tmp.length-3, -1);

 tmp = "0" + f + "0";
 f = tmp.slice(tmp.length-3, -1);

 tmp = "0" + g + "0";
 g = tmp.slice(tmp.length-3, -1);

 tmp = "00" + h + "0";
 h = tmp.slice(tmp.length-4, -1);
//arranges each variable's places.

 document.getElementById("timingresult").innerHTML
  = e + "h" + f + "m" + g + "s" + h;
}
//--></script><center>
<span id="timingresult" style="line-height:120%; font-size:35px; font-family:Verdana, Tahoma">&nbsp;</span><br />
<span style="cursor:pointer; padding:1px 5px; background:#00F; color:#FFF" onclick="nucleus()">START</span>
<span style="cursor:pointer; padding:1px 5px; background:#F00; color:#FFF" onclick="stoptiming()">STOP</span>
<span style="cursor:pointer; padding:1px 5px; background:#0F0; color:#FFF" onclick="resettiming()">RESET</span>
<div style="text-align:center; padding:8px 0 0; font-size:8px; font-family:'ＭＳ　Ｐゴシック',Osaka">&copy;2009 Nigoro. All rights reserved.</div><script type="text/javascript"><!--
displaytimingresult(0, 0, 0, 0);
//--></script>
</center>

Blue colored parts are essential.

タグ：応用 Date() Dateオブジェクト 例 example ストップウォッチ stopwatch JavaScript Applied ジャバスクリプト

日付時間

ん～24日ぶりの　交信　ですね～(んっ?　何か?)

今回は日付と曜日を表示してみましょう。
あんまり役立たないかもしれませんが、
オブジェクト指向というものの
理解のヒントになるかもしれません。(あまりならんなぁ　ごめんちゃい)

自身もあまり理解してませんし、
詳しく解説するには長くなりすぎるでしょうから、
興味のある方は、色々調べてみてください。(んっ?　何か?)

今回は<span>～</span>の所だけがHTMLで、
他は全てJavascriptです。
今回の要点は、
配列、Dateオブジェクト、DOM、タイマー
といったところでしょうか。

以前にご紹介したHTMLを活用しまして、
<ol>オーダードリストを使用していますので、
IE6、Firefox3.5、Opera10、Chrome3.0で確認しましたが、
Firefox愛用者の方はソースをコピペすると、
数字のある行の初めに#が入りますので除いてくださいませ。

行1でyohbi『よーび』という名の配列を宣言し8つ分確保しています。
配列というのは番号の付いた入れ物的なイメージで、
数や文字などを記憶させておくときに変数というものを使いますが、
同じ扱いで番号が付いているので色々利用しやすくなりますね。
varはグローバル変数という意味で、ローカル変数の反対です。
ごめんなさい。勘違いしてました。
古いネスケでは消した部分で間違いないのですが、
IEではvarを付けようが付けまいが、
関数の外で宣言した変数は、グローバル変数で、
その中で宣言した変数はローカル変数になります。
ローカル変数は1つの関数などの中でしか通用しないものでした。
つまり他の関数などから参照しても知らないよっていわれたり、
意図しない値になってしまいます。
ちなみに、yohbi[0]のように入れ物の番号を指定します。
8つ分ですが0～7番と1つずれてる事にご注意ください。

行2でhegcan『ひーじーかん』にDateオブジェクトのデータを代入しておきます。
Dateオブジェクト〔以下Date〕と言っても唐突ですが、関数と思ってください。
Date()とおなじみのカッコが付いてますよね。
じつは関数もオブジェクトなんですけどね。
いきなり書込む(表示する)変数に代入してもいいんですが、
わかり易くする為にhidujikaにいったん各値を代入しておきます。

その行3のhidujika『ひづ(け)じか(ん)』に、
hegcanで得られた各値を足していきます。
足していきますといいましたが、最初のyohbiは文字配列(変数)です。
hegcanはオブジェクトで、
hidujikaは(数値)変数のようですが、"年"などの文字を足していますので、
全体としてローカルの文字列(文字変数)になります。
といいいますかJavascriptがそう変換します。
一見かしこいんですが、本格的な場合、逆に取り扱いにくいんですよね。
Javascriptの変数の扱いは
自身もザックリとしか理解してませんでした。(ごめんちゃい)
変数についてはまたの機会にでもと思います。

Dateの各値はパラメータという呼び名ですが、
プロパティの参照やメソッドの指定の仕方と同じ書き方で、呼び出します。
つまり．〔ドット演算子〕を用いて、パラメータを操作します。
hegcan．～で表すわけですね。
DateにはUTC(世界時)で1971年1月1日00:00:00を基準に
ミリ秒数で-100,000,000日から100,000,000日までの範囲で保持されます。
通常は地方時(日本時)でUTCを意識しなくても大丈夫です。
Dateにはプロパティはありません。
このDateはご自身のパソコンの時計から取得していますので、
どこかの時刻サーバーの値ではないことに注意してください。
つまり、ご自身の時計がずれていると、そのとおりになります。

プロパティやメソッドというのが、
オブジェクト指向言語たる所以を特徴付けていますが、
以前、関数はプログラマーの意図した動作をするように、
単純な命令を束ねたようなものといいました。(いったかなぁ?　ごめんちゃい)
オブジェクト指向な言語になるとザックリとですが、
オブジェクトが関数に対応し、オブジェクトは関数のみでなく、
変数などもひとかたまりに取り扱うことが出来ます。
つまり、目に見えるオブジェクト(物)は形があり、色など性質があります。
すなわち、オブジェクトのプロパティ(性質)です。
同値ではありませんがメンバ(要素)と言ったりもします。
そして、そのプロパティをどうするかを決めるのがメソッドになります。
今回の場合、hegcanオブジェクトには、パラメータがあり、
月のパラメータを取り出すメソッドが、getMonth()です。
これは0～11の値を返しますので＋1としているわけです。
その他のメソッドはもうお分かりですよね。
ほかにミリ秒をとりだすgetMilliseconds()などもあります。

DOMというのはDocument Object Modelの略で
静的なHTMLを書き換えたりすることが出来ます。
(あんまり詳しくは聞かないでね～)
行4でそれをやってるんですが、
その下<span>タグ間には何も書かれていません。
しかし、行4でそこにhidujikaを表示してねっとすると、
実際のブラウザ上には日付などが表示されています。
つまり、元の部分を書き換えたわけです。
DOMって何か大げさな名前ですが、
まあ、やってることは単純ですよね。

最後に行5です。タイマー処理ですよね。
setInterval()で関数を1000ミリ秒ごとに呼び出します。


例


ソース

---

<script type="text/javascript"><!--

1. var yohbi = ["日","月","火","水","木","金","土","曜日"];


function hiduketojikan(){

2.  hegcan = new Date();



3.  hidujika = hegcan.getFullYear() + "年"
      + (hegcan.getMonth() + 1) + "月"
      + hegcan.getDate() + "日("
      + yohbi[hegcan.getDay()] + yohbi[7] +")"
      + hegcan.getHours() + "時"
      + hegcan.getMinutes() + "分"
      + hegcan.getSeconds() + "秒";



4.  document.getElementById("yobegcan").innerHTML = hidujika;
   }
   //--></script>
   
<span id="yobegcan"></span>
<script type="text/javascript"><!--

5. setInterval("hiduketojikan()",1000);
   //--></script>

---

ソース自体は短いのに、けっこう説明が長いなぁ～(くどい?)
アニメーションGIFがないとさみしぃ～なぁ～

タグ：日付 曜日 オブジェクト指向 JavaScript HTML 配列 Dateオブジェクト DOM タイマー オーダードリスト IE Firefox Opera Google Chrome 変数 文字変数 グローバル変数 ローカル変数 パラメータ プロパティ メソッド ドット演算子 時刻サーバー 関数 メンバ ブラウザ

文字の点滅

HTMLはだいたい静的な表現しか出来ないですよね。

なぜ標準になっていないのかと思うタグに、
blinkタグがあります。すなわち文字の点滅ですね。
しかしこれはネットスケープナビゲーター独自のタグで、
他のブラウザでは機能しません(おそらく…)。(←断定しろよ)
ネスケがどれくらい使われてるかわかりませんが、
ほとんど使われていないでしょう。

そこで、クロスブラウザで(おそらく)機能する、(←断定しろよ)
文字の点滅を、動的なことを可能にするJavaScriptで書いてみました。

例
変化しないよここが点滅します変化しないんです

どうでしょう、例において動作してるでしょうか?

見た目は単純ですが、クオリティを上げるのにちょっと苦労しました。
というよりも、初心者なので、オブジェクトやらメソッドやらが
どういう内容や値をもつのか理解するのに苦労しました。
プロから見れば、たいしたことじゃないということでしょうけれどもね。
ほかのサイトの例などを拝見しましたが、
切り替えるためだけに、わざわざ変数を導入したり、
関数を呼び出す、JavaScriptを機能させるのに、
body内にonloadを別途記述しないといけなかったりで、
だいぶ、スリムになっていると思います。(←断定したよ)

ネスケなら
<blink>ここが点滅します</blink>
だけで済むところです。(簡単！)

ソース

---

<script type="text/javascript"><!--
onload = function(){flashing();}
function flashing(){
 nanikanamae = document.getElementById("kokodesu");
 nanikanamae.style.visibility = (nanikanamae.style.visibility == "hidden" || "") ? "visible": "hidden";
 setTimeout("flashing()", 500);
}
//--></script>
変化しないよ<span id="kokodesu">ここが点滅します</span>変化しないんです

---

ご自身のサイトなどで扱う場合は、お分かりだとは思いますが
<script～//--></script>の部分を、<head>～</head>の部分に、
<span id="kokodesu"～</span>などの部分を、
<body>～</body>の部分に記述します。
まあ、ブログのように全部bodyというか、
本文に書いても大丈夫だとは思います。(←断定しろよ)

onloadでブログなどを読み込んだときにflashing()関数を呼び出します。
これも予約語など以外なら、お好きな名前の関数にしてかまいません。
onloadがないと点滅させる関数が読み込まれませんので、動かないのです。
関数の最初で、"kokodesu"というid属性の内容をnanikanamaeに代入しています。
正確には違いますけれど、まあそんな感じです。(どんなかんじ?)
『何か名前』なので、他の名前でもいいんです。

前にも述べたかもしれませんが、
ひとつのHTMLのなかに同じid名は存在してはいけません。
class属性とname属性は複数同名が在ってもかまいません。
ただし、同名を意図するように扱うならかまいませんが、
動作や変化しては困る場合は、他の名前ををつけましょう。

次の行で"kokodesu"のidのあるbody上のテキストの表示の仕方を与えています。
すなわち、記事内で『ここが点滅します』と書かれてある部分ですね。
要するに、書き換えているのではなく、スタイルで
見た目上、見せるか見せないかを切り替えているわけです。
setTimeoutの前までで文字を消しているか、出しているかのどちらかです。

そして、setTimeoutで再びflashing()を呼び出すんですが、
つぎの500が待ち時間を決めています。
単位が[ms]、ミリ秒なので、ここでは、約0.5秒ごとに点滅させています。

もし、点滅する文字を多数配置する場合は、
ちょっとコツがいりますので今回は取り扱いません。
ご要望がございましたら、よろこんで…

JavaScript以外の部分は、ブログをお書きになっているので、
大丈夫だとは思いますが、インラインタグのspan以外にも、
ブロックタグのdivなどでもいけるかなと思います。(←断定しろよ)
でも、classやnameでは機能しません。
必ず、idで識別するようにしてください。


まえ記事で気づいてもらえなかったようですが、
http://orth.blog.so-net.ne.jp/2009-10-08
絵文字gifがマーキータグで動いてますが(IEだけかなぁ)、
カーソルを近づけると捕まえられるというか、止まり、放すと、
再び、動き出すという小技を入れていたんですが…
けして小枝ではありません。
(しかし、まぁ～そのぉ～、なんですぅなぁ～)

タグ：JavaScript 文字の点滅 marquee 小枝 blink

ラジオボタン(HTML)

　ブログでは記事の中で何か選択すると言うことはまずないのですが、
ホームページでは設ける可能性も考えられます。

そこで、HTMLのformタグの中で使えるinputタグのtype属性が
radioのラジオボタンを取り上げてみます。

何でラジオボタンっていうかと言いますと、昔のラジオは選曲するボタンが複数あって、1つのボタンを押すと他のボタンが元に飛び出しリセットされる様子がこれに似ているためのようです。

いつものように、まずケチャップではなくソースです。

ソース①

---

<form name="fohmu">
選択<input type="radio" name="botan" value="1">１番
<input type="radio" name="botan" value="2">２番
<input type="radio" name="botan" value="3" checked>３番
</form>

---

例

選択１番 ２番 ３番

ボタンを押してみてください。
すぐ下のテキスト欄に結果が表示されると思います。

ソース①はミニマムな基本例なので、例のようなラジオボタンを押すごとに何か動作をするわけではありません。
しかしラジオボタンを押すことでデータとしてはセットされているはずです。

ちょっと説明を加えますと、
inputタグはformタグの中で使うということにしてください。
formタグの名前が"fohmu"です。
他にもformタグが存在する時の為に区別するために名づけておきます。

inputタグのtype属性を"radio"にするとボタンが使えます。
ここではボタンが3つありますので
これらをまとめてbotanと言う名前でまとめておきます。
ちょっとinputタグのデータの型がわからなかったのですが、
こうすることで、後でどのボタンが押されたかを調べる時に、
botanという名前の配列型として結果を取り出しやすくなります。
このあたりは流してください。

ソース①のinputタグの3番の部分だけ
[checked]が追加されていますが
これによって、予め3番目をオンにすることができます。
最初にページを開いた時、すでに3番がオンで、
テキスト欄に「3番を選択しました」と表示されていました。

いっきには大変なので、とりあえずラジオボタンの説明は
終わりとしますが、またご質問等ございましたら、お願いします。

一応、上の例を実現しているしょうゆ、いやっ、ソースを
ソース②に示しておきます。

ソース②

---

<script type="text/javascript"><!--
function kekka(){
 for (i = 0; i <=2; i++){
  if (document.getElementsByName("botan")[i].checked == true)   document.fohmu.hyoji.value = i+1+"番を選択しました";
 }
}
//--></script>
<center>
<form name="fohmu">
選択<input type="radio" name="botan" value="1" onClick="kekka()">１番
<input type="radio" name="botan" value="2" onClick="kekka()">２番
<input type="radio" name="botan" value="3" checked onClick="kekka()">３番
<br /><br />
<input type="text" name="hyoji" style="text-align:center">
</form>
</center>
<script type="text/javascript"><!--
kekka();
//--></script>

---

タグ：HTML ラジオボタン

順序リスト(HTML)

タグのつづきです。
下ごしらえです。
HTMLは例外を除いて＜～＞と＜/～＞で
動作させたい何かはさむのでした。
＜～＞は(開始)タグと呼びます。＜/～＞は終了タグです。
終了タグがないものもあります。
formやaなどは要素(正確には違うようです)と呼びます。
タグの中のstyleやtypeなどは属性と呼び、
その値(="・・・")を属性値と呼びます。

属性は半角スペースを空けて記述するのでした。

例

<a href="・・・">

ホームページなどでよく使うものとして、
いくつかの項目を列挙することは多いのではないでしょうか。

そこで次のようなリストを示すタグを紹介したいと思います。

例

1. 米を研ぐ。
2. お釜に研いだ米と適量の水を入れる。
3. 炊飯器にセットする。
4. 米を炊く。
5. お知らせが鳴ったら出来上がり。

このソースは

<ol type="1">
<li>米を研ぐ。</li>
<li>お釜に研いだ米と適量の水を入れる。</li>
<li>炊飯器にセットする。</li>
<li>米を炊く。</li>
<li>お知らせが鳴ったら出来上がり。</li>
</ol>

になります。

type属性値を"1"、"A"、"a"、
"Ⅰ"、ローマ数字大文字、"ⅰ"、ローマ数字小文字、にすれば、
それぞれの文字で順序リストが表示できます。
type属性を省略するとデフォルト(規定値)、"1"になります。
さらにstart属性をつけると途中の番号などから始められます。
type="A"等でも、start="6"の属性値は数字です。

例

<ol type="Ⅰ" start="10">

順番を付けずにただ並べるなら、
<ol>タグを<ul>タグに置き換え、
type属性を省略するとデフォルトの"disc"→●が選択されます。
あるいは、type属性を"circle"→○、"square"→■にします。

例

<ul type="disc">

例

• 炊飯器にセットする。
• お釜に研いだ米と適量の水を入れる。
• 米を研ぐ。
• お知らせが鳴ったら出来上がり。
• 米を炊く。

タグ：HTML Ordered List Unordered List 順序リスト 非順序リスト