GitHub Repo
https://github.com/1994sheng/html-javascript
<!DOCTYPE HTML> <!--[if lt IE 9 ]> <html lang="ja" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="ja" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja"> <!--<![endif]--> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- ↓ページタイトル↓ --> <title>Home Cooking</title> <!-- ↓検索エンジン用ここから↓ --> <meta name="Description" content="検索用文言"> <meta name="Keywords" content="検索用キーワードカンマ（,）区切り"> <!-- ↑検索エンジン用ここまで↑--> <!-- ▼▼ここからは変更不可！！▼▼ --> <link rel="stylesheet" href="common/js/colorbox/colorbox.css"> <link rel="stylesheet" href="common/css/common.css"> <script src="common/js/jquery.min.js"></script> <script src="common/js/colorbox/jquery.colorbox-min.js"></script> <script src="common/js/jquery.tile.min.js"></script> <script src="common/js/common.js"></script> <script> jQuery(function() { $('a[href$=".jpg"],a[href$=".gif"],a[href$=".png"],a[href$=".jpeg"]').colorbox(); $(window).load(function() { $("#wrapper > div").tile(); $(".img-list figure, .img-list div.img-wrapper").tile(); }); }); </script> <!--[if lt IE 9]> <script src="common/js/html5shiv.min.js"></script> <![endif]--> </head> <body id="top"> <noscript> <p id="noscript">このWebサイトはJavaScriptを使用しています。 <!--[if lt IE 9]><br> Internet Explorer 8をお使いの方はJavaScriptをオンにしてご覧ください。 <![endif]--> </p> </noscript> <!-- ▲▲ここまでは変更不可！！▲▲ --> <div id="wrapper"> <!-- ↓左サイドバーカラムここから↓ --> <div id="sidebar"> <header> <!-- ↓サイトロゴ画像↓ --> <h1><a href="index.html"><img src="img/logo.png" width="185" height="185" alt="Home Cooking"></a></h1> </header> <!-- ↓ナビゲーションここから↓ --> <nav> <ul> <li class="here"><a href="index.html">トップページ</a></li> <li><span>レシピ紹介</span> <!-- ↓↓サブメニューここから↓↓ --> <ul> <li><a href="recipe.html">ベリータルト</a></li> </ul> <!-- ↑↑サブメニューここまで↑↑ --> </li> <li><span>お菓子のミニ知識</span> <!-- ↓↓サブメニューここから↓↓ --> <ul> <li><a href="tips.html">マカロン</a></li> </ul> <!-- ↑↑サブメニューここまで↑↑ --> </li> <li><a href="profile.html">プロフィール</a></li> </ul> </nav> <!-- ↑ナビゲーションここまで↑ --> </div> <!-- ↑左サイドバーカラムここまで↑ --> <!-- ↓コンテンツカラムここから↓ --> <div id="mainContent"> <main> <header> <!-- ↓サイト名↓ --> <h1>Home Cooking <small>ペロのWebサイトにようこそ！</small></h1> <!-- ↓サイト名の背景画像↓ --> <img src="img/index01.png" width="1100" height="180" alt=""> </header> <!-- ↓キャッチコピー↓ --> <p class="read-txt">料理がライフワークな女子のまったりとした日々の記録。目指せ女子力UP♪</p> <section> <!-- ↓更新履歴ここから↓ --> <div class="update"> <h3>更新履歴<input name="" type="button" value="从旧到新" id="days" onclick="paixun()"></h3> <div id = "massge"> </div> <script> var time=document.getElementById('days'); var massge1=document.getElementById('massge'); var massge= new Array(); massge[0]='<article><h4><a href="recipe.html">レシピ紹介UPしました〜(*´∪｀)ﾉ</a></h4><time>2015.02.25</time><p>お手軽・簡単・美味しいベリータルト♪ 本当に簡単なので、みなさんもぜひ挑戦してくださいね！<br>甘すぎるスイーツが苦手な人にもおススメ♥</p></article>'; massge[1]='<article><h4><a href="tips.html">お菓子のミニ知識UP★</a></h4><time>2015.02.24</time><p>マカロンについて、熱弁をふるったよ！<br>かわいいマカロンの出生の秘密にせまる（爆）</p></article>'; massge[2]='<article><h4><a href="profile.html">プロフィールページ更新しました(♥′θ♥) ﾉ></a></h4><time>2015.02.23</time><p>プロフィールページに各コーナーの紹介を追加しました♪♪♪<br>あと、TwitterとFacebookのフォローよろしくお願いします〜〜！フォロワーさんどんどん増えろ〜〜（笑）</p></article>'; function paixun(){ if(time.value=="从旧到新"){ time.value="最近更新"; var message_element = document.getElementById("massge"); var result = ""; for(var i = 0; i < massge.length; i++) { result += massge[i]; } message_element.innerHTML = result; }else{ time.value="从旧到新"; var message_element = document.getElementById("massge"); var result= ""; for(var i = massge.length - 1; i >= 0; i--) { result += massge[i]; } message_element.innerHTML = result; } } </script> </div> <div class = "sub"> <!-- ↓見出し↓ --> <h4>Pick Up <input name="" type="button" value="点击隐藏" id="btn" onclick="btn()" style="left:300px; top:50px;"></h4> <div id = "box"> <!-- ↓Pick Up1ここから↓ --> <figure> <!-- ↓↓Pick Up1の画像↓↓ --> <img src="img/recipe18.jpg" width="280" height="185" alt="写真：ベリータルト♪"> <figcaption> <!-- ↓↓Pick Up1の見出し↓↓ --> <h5><a href="recipe.html">レシピ紹介UP♪</a></h5> <!-- ↓↓Pick Up1の文章↓↓ --> みんな大好き！美味しいベリータルト♪ぜひ挑戦してみてね〜★ </figcaption> </figure> <!-- ↑Pick Up1ここまで↑ --> <!-- ↓Pick Up2ここから↓ --> <figure> <!-- ↓↓Pick Up2の画像↓↓ --> <img src="img/tips01.jpg" width="280" height="185" alt="写真：マカロンの秘密"> <figcaption> <!-- ↓↓Pick Up2の見出し↓↓ --> <h5><a href="tips.html">特別な日のお菓子</a></h5> <!-- ↓↓Pick Up2の文章↓↓ --> 女の子が大好きなマカロンの秘密を探ってみました♪ </figcaption> </figure> </div> </div> <script> var btn1=document.getElementById('btn'); var box1=document.getElementById('box'); function btn(){ if(btn1.value=="点击隐藏"){ box1.style.display='none'; btn1.value="点击展开"; }else{ box1.style.display=''; btn1.value="点击隐藏"; } } </script> <!-- ↑Pick Up2ここまで↑ --> </div> <!-- ↑Pick Upここまで↑ --> </section> </main> <footer> <!-- ↓リンクバナーここから↓ --> <aside> <!-- ↓↓リンクバナー1↓↓ --> <dl> <dt> <a href="#" target="_blank"> <img src="common/img/twitter.png" width="40" height="40" alt="Twitter"> </a> </dt> <dd>Twitterやってます。<br> ぜひフォローしてくださいね♪</dd> </dl> <!-- ↓↓リンクバナー2↓↓ --> <dl> <dt> <a href="#" target="_blank"> <img src="common/img/facebook.png" width="40" height="40" alt="Facebook"> </a> </dt> <dd>Facebookやってます。<br> ぜひフォローしてくださいね♪</dd> </dl> </aside> <!-- ↑リンクバナーここまで↑ --> <!-- ↓ナビゲーション（フッター）ここから↓ --> <ul> <li><a href="index.html">トップページ</a></li> <li><span>レシピ紹介</span> <!-- ↓↓サブメニューここから↓↓ --> <ul> <li><a href="recipe.html">ベリータルト</a></li> </ul> <!-- ↑↑サブメニューここまで↑↑ --> </li> <li><span>お菓子のミニ知識</span> <!-- ↓↓サブメニューここから↓↓ --> <ul> <li><a href="tips.html">マカロン</a></li> </ul> <!-- ↑↑サブメニューここまで↑↑ --> </li> <li><a href="profile.html">プロフィール</a></li> </ul> <!-- ↑ナビゲーション（フッター）ここまで↑ --> <!-- ↓コピーライト↓ --> <small>© Home Cooking</small> </footer> </div> <!-- ↑コンテンツカラムここまで↑ --> <!-- ↓ページの上に戻るボタン↓ --> <p id="goto-pagetop"><a href="#top">このページの上に戻る</a></p> </div> </body> </html>
