• ベストアンサー

1日1回だけ引けるjavascriptおみくじ

javascriptとcookie初心者です。 調べながらjavascriptで画像おみくじを作りました。 cookieを使用して1日1回のみ引けるように設定をしたく、 いろいろ調べて 「cookieの有効期限を翌日の0時に設定」すればいいというところまでは わかったのですが、記述の仕方がわかりません。 どなたか教えてください。 よろしくお願いいたします！！

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

<!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)

回答No.3

ひとさまのかいたものを、どうこういえるものではありませんが、 <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 ぞくせいは、ぜったいにひつようです そのどきゅめんとの「もと」をいしきして、すくりぷとはかくように、こころがけましょう かこにぜんぶいわれてきたことの、うけうりですが・・・。

yamyamchammy
質問者

お礼

素晴らしい～！！できましたっ！！！ ほんとにほんとにありがとうございます。 感謝感激雨あられです。 必要に迫られてjavascriptも調べてあっちこっちから持ってきて貼り付けて、 おみくじなんかはとくに数年前の古い情報しかなく、 それでもとにかく要望を満たすことに夢中になっていて、 直していただいたソースの美しさに「はっっっ！！」となりました。 「そのどきゅめんとの「もと」をいしきして、すくりぷとはかくように、こころがけましょう」 この一行が私には難解ですが、ほんとにほんとにありがとうございました！！ またブログお邪魔しに行きます！

回答No.1

こんなのはどうでしょう？ かんたんなことを、めんどうにかいてみました。 ぜんかくくうはくは、はんかくにしてね。 （さいきん、かいとうしても「はずれ」がおおいので、うんだめし！そしたら「凶」！あ～。） <!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>

yamyamchammy
質問者

補足

回答有難うございます！！！ 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>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptをメモ帳に記述して保存すると・・・

    初心者ですが、よろしくお願いいたします。 JavaScriptをメモ帳に記述して保存します。 そして、htmlに変換して開き、表示→ソースの表示 をしますと、記述したはずのコードが消えてしまって いるのです。どういう原因が考えられますでしょうか？ ちなみにcookieの値の取得の仕方を学んでた最中で、 expiresの期限は未来にしてあるのですが・・・ それは関係ないのでしょうか。 よろしくお願いいたします。

  • 1日1回しかアクセスできないページ

    1日1回しかクリックできないおみくじを作りたいと思っています。 クリックするとポップアップウィンドウが出て、大吉！などのイラストが出るというようなものを考えています。 その日に1回アクセスしたら、あとは何度行っても同じページが出るか、「また明日引いてね！」みたいなダイアログが出るようにしたいです。 色々調べてJavascriptでおみくじが作れることはなんとなくわかったのですが、1日1回しかクリックできないというふうにするにはどうしたらいいかがなかなか見つからなくて困っています。 （1回ボタンを押すと一定時間押せなくなるというものは見つけたんですが、更新するとまた押せるようになってしまうものでした…） お恥ずかしいことにプログラミング初心者ですが、知っている方がいれば教えて頂けないでしょうか？ そもそもおみくじを作れるのはJavascriptで合っているのでしょうか？ 宜しくお願いします。

  • JavaScript または Cookie(クッキー)が利用できません、とは？

    いつもお世話になっております。あるサイトを見ようと思ったのですが、下のような文章が出てきて、見ることができませんでした。いったい、どのように設定を直せば見ることができるのでしょうか？ 「JavaScriptを使用してよろしければ、JavaScriptを有効にして下さい。 また、Cookieを使用してよろしければ、ブラウザの設定のCookieの受け入れを可能にして、・・・」

  • JavaScripｔ、Cookieを有効にして下さい。

    「JavaScripｔ、Cookieを有効にして下さい。 Javaアプレットが無効になっています。」 と表示され、 どうしても見たいWebが見れません。 どうしてもログインできないのです。 Windows2000で、IEを使用しています。 ちなみに、Cookieは、有効に設定してあります。

  • JavaScriptを埋め込むには？

    こんにちは。よろしくお願いします。 現在、JavaScriptの使用が禁止されているスペースで、HPを作成していますが どうしてもポップアップを使いたいので、JavaScriptの使用が可能なスペースで 画像をクリックするとリンク先にジャンプし、ポップアップが表示されるように作成しました。 そのURLを、JavaScript使用禁止のページの画像に埋め込んだところ 当たり前ですが、JavaScriptが埋め込まれた画像が表示され その画像をクリックしないと、リンク先ジャンプ＆ポップアップ表示されません。 JavaScript禁止ページの画像クリック→リンク先ジャンプ＆ポップアップとするには どのように作成すれば良いでしょうか？ JavaScriptに関して、全くの初心者なもので、分かりづらい説明ですが どうぞ、よろしくお願いいたします。

  • JavaScript、Cookieの設定について

    あるサイトにログインするのに １．「JavaScript(またはアクティブスクリプト)を有効にする」設定にしてください。 ２．「Cookieを受け入れる」設定にしてください。 とあります。 このことを確認したいのですが、どこをどうすれば良いのか分かりません。 お教えください。 「設定」ー「コントロールパネル」ー「インターネットオプション」を見たのですが、分かりませんでした。 使用ブラウザはI.E5.5です。

  • javascriptとcookieの判定とページ遷移

    javascriptを使ったサイト作りは全くの初心者なのですが、自分のHPで以下のようなことがしたいと思っています。 1.index.htmlでjavascriptとcookieの設定を判定 2.どちらも有効の場合はtop.html（サイトの内容）へ自動的に移動 3.２以外の場合はsetup.html（設定の仕方）へ自動的に移動 検索で探していて判定結果を表示するスクリプトはちらほら見かけたのですが、その結果を受けて２、３をさせる方法がわかりません。 ヒントになるページを教えていただくか、アドバイスをいただけないでしょうか。 どうかよろしくお願いします。

  • JavaScriptで画像から選択肢へ切り替え

    JavaScript全くの初心者です。よろしくお願いします。 パナソニックさんのホームページ（http://panasonic.jp/）の様に、 最初に写真が表示されていて、mouseoverで選択肢が現れる、 と言ったページが作りたいのです。 フラッシュが使われていますが、画像で作りたいです。 勉強を始めましたが、画像と内容文への入れ替え方法は見つからず悩んでいます。 JavaScript記述して頂ける方いらっしゃいましたら、宜しくお願いいたします。

  • JavaScriptを有効にする方法

    スカパー契約変更のためたどって行くと、「このＩ・Ｅでは表示できない」「javascript・cookieを有効にしないと表示されないページ有り、設定を有効に」などと出てきて利用できません。これが原因でしょうか？I・EはＶ5.を使用がよいと書かれていますが、先日I・EをＶ６からＶ７にしました。Ｖ6.の時は利用できていました。前に進めないで困っています。javascriptとは何者で、どこに存在して、何をしており、有効にしておくと弊害などがあるのでしょうか。基本的な知識もなく意味など教えていただけると共に、有効にする方法などご指導よろしくお願いします。

  • 同じページにJavaScriptは２つできないの？？

    つたないHPを作っています。今は「何行かのテキストボックスの文字をスクロール」というJavaScriptを１つ使っています。 さらにもう１つJavaScriptを使用したいのですが、うまく作動してくれません。同じページに２つ使うことはできないのでしょうか？ 新しく使用したいのは、http://jun89.xdap.jp/でみつけたオリジナルJS素材の「ひながた用吹出し」の「画像の泡」というものです。ここのソースをコピーしてそのまま貼り付け、画像だけ変えました。この「ひながた用吹出し」はきちんと作動するのですが、「何行かのテキストボックスの文字をスクロール」が作動しません。 headの中に２つのJavaScriptを入れて、<body onLoad="star()""roll()">として、その後bodyの中に必要なものを入れています。この設定が間違っているのでしょうか？２つ同時に設定せずに、１つずつではきちんと作動しています。 PC初心者で、きちんとしたPC用語で説明できていないので、わかりづらいかと思いますが、よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する