- ベストアンサー
1日1回だけ引けるjavascriptおみくじ
javascriptとcookie初心者です。 調べながらjavascriptで画像おみくじを作りました。 cookieを使用して1日1回のみ引けるように設定をしたく、 いろいろ調べて 「cookieの有効期限を翌日の0時に設定」すればいいというところまでは わかったのですが、記述の仕方がわかりません。 どなたか教えてください。 よろしくお願いいたします！！
- yamyamchammy
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <title></title> <style type="text/css"> form > div { text-align : center; } </style> <body> <h1>今日の運勢</h1> <form action="#"> <div> <h2>スクリプトが有効な場合、ここに今日の運勢が表示されます</h2> <img src="777.png" id="un" alt="スクリプトが有効な場合、ここに今日の運勢が表示されます"><br> <input type="button" value="今日の一枚！" onClick="omikuji(document.getElementById ('un'));"> </div> </form> <script> var omikuji = (function (getCookie, setCookie) { var save = 31; var unList = [ { src: '1.png', alt: '大吉' }, { src: '2.png', alt: '吉' }, { src: '3.png', alt: '凶' }, { src: '4.png', alt: '大凶' } ]; return function (node) { var d = node.ownerDocument; var v = d./*@cc_on @if (1) parentWindow @else@*/ defaultView /*@end@*/; var today = (new Date).getDate () + ''; var lastDay = getCookie.call (v, 'day'); var unsei; var no; if (today === lastDay) unsei = unList [Number (getCookie.call (v, 'un'))]; else { no = Math.floor (Math.random() * unList.length); unsei = unList[no]; setCookie.call (v, 'day', today, save); setCookie.call (v, 'un', String (no), save); } node.src = unsei.src; node.alt = unsei.alt; }; })( function () { return (function (name) { var d = this.document; var n = encodeURIComponent (name).replace (/([.*()])/g, '\\$1'); var v = d.cookie.match (RegExp (n + '\\s*=\\s*(.*?)(?:[\\s;,]|$)')); return v ? decodeURIComponent (v[1]) : ''; }).apply (this, arguments); }, function () { return (function (name, value, day, path, domain) { var d = this.document; var t = new Date; t.setDate (t.getDate () + (day || 0)); d.cookie = encodeURIComponent (name) + '=' + encodeURIComponent (value) + ';' + 'expires=' + t.toUTCString () + ';' + (path ? 'path=' + encodeURIComponent (path) + '': '') + (domain ? 'domain=' + encodeURIComponent (domain) + ';': ''); }).apply (this, arguments); }); </script>
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
ひとさまのかいたものを、どうこういえるものではありませんが、 <script language="JavaScript" type="text/javascript">は、 <script type="text/javascript">にすべき。HTML5なら<script>でOK。 my_pic=new Array(); へんすうせんげんには、var をつけましょう document.images[] は、なんだかなぁ～ ｈｔｍｌにも、ひとこと <img>ようそは、いんらいんようそなので、ぶろっくようそでかこんでおきましょう その name ぞくせいもふるいのでやめましょう。 alt ぞくせいは、ぜひつけましょう <form>ようその name ぞくせいも・・・、action ぞくせいは、ぜったいにひつようです そのどきゅめんとの「もと」をいしきして、すくりぷとはかくように、こころがけましょう かこにぜんぶいわれてきたことの、うけうりですが・・・。
- babu_baboo
- ベストアンサー率51% (268/525)
こんなのはどうでしょう？ かんたんなことを、めんどうにかいてみました。 ぜんかくくうはくは、はんかくにしてね。 （さいきん、かいとうしても「はずれ」がおおいので、うんだめし！そしたら「凶」！あ～。） <!DOCTYPE html> <title></title> <body> <h1>今日の運勢</h1> <p id="un">スクリプトが有効な場合、ここに今日の運勢が表示されます</p> <script> var getOmikuji = (function (getCookie, setCookie) { var save = 31; var unList = [ '大吉', '中吉', '小吉', '中吉', '小吉', '吉', '半吉', '末吉', '末小吉', '凶', '小凶', '半凶', '末凶', '大凶' ]; return function () { var today = (new Date).getDate () + ''; var lastDay = getCookie.call (this, 'day'); var unsei; if (today === lastDay) unsei = getCookie.call (this, 'un'); else { unsei = unList[Math.floor (Math.random() * unList.length)]; setCookie.call (this, 'day', today, save); setCookie.call (this, 'un', unsei, save); } return unsei; }; })( function () { return (function (name) { var d = this.document; var n = encodeURIComponent (name).replace (/([.*()])/g, '\\$1'); var v = d.cookie.match (RegExp (n + '\\s*=\\s*(.*?)(?:[\\s;,]|$)')); return v ? decodeURIComponent (v[1]) : ''; }).apply (this, arguments); }, function () { return (function (name, value, day, path, domain) { var d = this.document; var t = new Date; t.setDate (t.getDate () + (day || 0)); d.cookie = encodeURIComponent (name) + '=' + encodeURIComponent (value) + ';' + 'expires=' + t.toUTCString () + ';' + (path ? 'path=' + encodeURIComponent (path) + '': '') + (domain ? 'domain=' + encodeURIComponent (domain) + ';': ''); }).apply (this, arguments); }); //_____________ document.getElementById ('un').firstChild.nodeValue = '今日の運勢は、' + getOmikuji () + 'です。'; </script>
補足
回答有難うございます！！！ htmlとcssでやっとなので尊敬の眼差しです。 ブログもお邪魔しました！ 教えていただいたもの何とかいじってみようと思いましたが、 私が作成したのが画像おみくじのため、私の知識ではどうにもなりませんでした（涙） 以下が作成したソースなのですが、付け足していただくこと可能でしょうか？ 宜しくお願い致します。 <head> <script language="JavaScript" type="text/javascript"> <!--// my_pic=new Array(); my_pic[0]="1.png"; my_pic[1]="2.png"; my_pic[2]="3.png"; my_pic[3]="4.png"; hajime="777.png"; pics=new Array(); for(i=0; i<my_pic.length; i++) { pics[i]=new Image(); pics[i].src=my_pic[i]; } function img_load() { for(i=0; i<my_pic.length; i++)document.images["hidden"].src=pics[i].src; document.images["hidden"].src=hajime; } function omikuji() { i =Math.floor(Math.random()*4); document.images["kuji_pic"].src=pics[i].src; } //--> </script> </head> <body> <img src="777.png" name="kuji_pic"> <div align="center"> <form name="form1"> <input type="button" value="今日の一枚！" onClick="omikuji();"> </form> </div> </body>
お礼
素晴らしい～！！できましたっ！！！ ほんとにほんとにありがとうございます。 感謝感激雨あられです。 必要に迫られてjavascriptも調べてあっちこっちから持ってきて貼り付けて、 おみくじなんかはとくに数年前の古い情報しかなく、 それでもとにかく要望を満たすことに夢中になっていて、 直していただいたソースの美しさに「はっっっ！！」となりました。 「そのどきゅめんとの「もと」をいしきして、すくりぷとはかくように、こころがけましょう」 この一行が私には難解ですが、ほんとにほんとにありがとうございました！！ またブログお邪魔しに行きます！