ってことでエイジさんからやり方を伝授されますた。

最初動くスクリプトを丸々貰ったんですが
おかしな挙動してる部分がどうしても
手直しできなかったんで
先日おいらが作ったスクリプトにエイジさんが教えてくれたスクリプトを
合体させてみますた。
つってもこっちも挙動がちょっとおかしんだけど(ぁ


例)置き換えモード
<preタグ使用例>
クマノミ:2008/10/12
チョウチョウ:2008/11/5
ヤッコ:2007/5/25
ミドリイシ:2006/2/3
トサカ:2009/9/30
メタハラ:2008/12/7


<pタグ使用 CSSで枠組み>

クマノミ:2008/10/12

チョウチョウ:2008/11/5

ヤッコ:2007/5/25

ミドリイシ:2006/2/3

トサカ:2009/9/30

メタハラ:2008/12/7




例)追加モード
<テーブル使用 CSSで飾りつけ>
魚 (経過日)
クマノミ2008/10/12
ヤッコ2007/5/25
トゲ2009/9/31
フウライ2010/2/28
サザナミ2008/12/7


その他 (経過日)
クロナマコ2008/10/12
イソギン2008/11/5
ヤドカリ2007/5/25
ミドリイシ2006/2/3
トサカ2009/9/31
シッタカ2010/2/28
メタハラ2008/12/7

ここからスクリプト

<style type="text/css"><!-- 

/*全体のフォント*/ #life-list , #life-list2{ color:#7F8E96; font-family:Arial,Helvetica,sans-serif; font-size:12px; }

/*日付部分のフォント*/ #life-list b, #life-list2 b { color:#0088ee; font-family:Arial,Helvetica,sans-serif; font-size:12px; }

/*枠組み*/ .list { width : 175px; -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; background:#222 none repeat scroll 0 0; border:1px solid #333; padding: 5px; }

/*テーブルデザイン*/ .decoration table{ width:230px; border:1px dashed #333; } .decoration th{ border-bottom:1px dashed #333; background: #222;} --></style>

<!-- 実行モードの置き換えモードを使用するときはidにlife-listを 追加モードで使用する場合はidにlife-list2をセットします。 idさえセット出来れば、殆どのタグが自由に使えます。 CSS等も自由に使えます。 -->

<!-- 例)置き換えモード  --> 例)置き換えモード <br/> <preタグ使用例> <div id="life-list"> <pre> クマノミ:2008/10/12 チョウチョウ:2008/11/5 ヤッコ:2007/5/25 ミドリイシ:2006/2/3 トサカ:2009/9/30 メタハラ:2008/12/7 </pre> <pタグ使用> <div class="list"> <p> クマノミ:2008/10/12<br /> チョウチョウ:2008/11/5<br /> ヤッコ:2007/5/25<br /> ミドリイシ:2006/2/3<br /> トサカ:2009/9/30<br /> メタハラ:2008/12/7 </p> </div> </div> <br/> <!-- 例)追加モード --> 例)追加モード <br/> <テーブル使用> <div id="life-list2"> <div class="decoration"> <table> <th colspan=2>魚 (経過日)</th> <tr><td>クマノミ</td><td>2008/10/12</td></tr> <tr><td>ヤッコ</td><td>2007/5/25</td></tr> <tr><td>トゲ</td><td>2009/9/31</td></tr> <tr><td>フウライ</td><td>2010/2/28</td></tr> <tr><td>サザナミ</td><td>2008/12/7</td></tr> </table> <br/> <table> <th colspan=2>その他 (経過日)</th> <tr><td>クロナマコ</td><td>2008/10/12</td></tr> <tr><td>イソギン</td><td>2008/11/5</td></tr> <tr><td>ヤドカリ</td><td>2007/5/25</td></tr> <tr><td>ミドリイシ</td><td>2006/2/3</td></tr> <tr><td>トサカ</td><td>2009/9/31</td></tr> <tr><td>シッタカ</td><td>2010/2/28</td></tr> <tr><td>メタハラ</td><td>2008/12/7</td></tr> </table> </div> </div>

<script type="text/javascript"><!-- //スクリプトとHTMLタグの位置関係の変更不可 function keika(year,month,day,mode){ var hurai=new Date(year,month-1,day); var toge=new Date(); var nami=new Date(toge.getFullYear(),toge.getMonth(),0); var akebono,seguro,tonosama; var misuji=0; var hatatate=0; if(toge.getDate()>=hurai.getDate()){ tonosama=toge.getDate()-hurai.getDate(); }else{ if(nami.getDate()>=hurai.getDate()){ tonosama=(nami.getDate()-hurai.getDate())+toge.getDate(); }else{ tonosama=toge.getDate(); } hatatate=1; } if(toge.getMonth()-hatatate>=hurai.getMonth()){ seguro=toge.getMonth()-hatatate-hurai.getMonth(); }else{ seguro=12+toge.getMonth()-hatatate-hurai.getMonth(); misuji=1; } akebono=toge.getFullYear()-misuji-hurai.getFullYear(); var str = (mode)? '<b>'+ year + '/' + month + '/' + day +'</b>'+ ' (': ''; if(akebono) str += '<b>'+akebono + '</b>年'; if(seguro) str += '<b>'+seguro + '</b>ヶ月'; if(tonosama) str += '<b>'+tonosama + '</b>日 '; return (mode)? str + ')': str; } function setLife(id,mode){ var list = document.getElementById(id); if(!list) return false; list.innerHTML = list.innerHTML.replace(/(\d+)\/(\d+)\/(\d+)/g, function($0,$1,$2,$3){ return keika($1,$2,$3,mode); } ); } // 以下、実行 setLife(id,mode) setLife('life-list',0); // 0: 置換モード setLife('life-list2',1); // 1: 追加モード //--></script>

まぁようするに

div id=”life-list” 置き換えモードで
div id=”life-list2″ が追加モードと。
このidの中に
生体名 日付と書くとその日付を自動で置き換えるか
追加するかと言うこと。
この<div id~> どんなHTMLタグでくぐっても多分大丈夫。

id をターゲットにしてるので

CSSなんかで飾りつけも可能。

こっちのスクリプトは簡単なんだけど

いじくり倒そうとするとちょっと難しいかも・・