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

解決済

質問者：yamyamchammy
質問日時：2011/02/06 22:01
回答数：3件

javascriptとcookie初心者です。

調べながらjavascriptで画像おみくじを作りました。
cookieを使用して1日1回のみ引けるように設定をしたく、

いろいろ調べて
「cookieの有効期限を翌日の0時に設定」すればいいというところまでは
わかったのですが、記述の仕方がわかりません。

どなたか教えてください。

よろしくお願いいたします！！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： babu_baboo
回答日時：2011/02/07 08:59

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

- 1
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2011/02/07 09:13

ひとさまのかいたものを、どうこういえるものではありませんが、

- 0
- 件

通報する

この回答へのお礼

素晴らしい～！！できましたっ！！！

ほんとにほんとにありがとうございます。
感謝感激雨あられです。

必要に迫られてjavascriptも調べてあっちこっちから持ってきて貼り付けて、
おみくじなんかはとくに数年前の古い情報しかなく、
それでもとにかく要望を満たすことに夢中になっていて、

直していただいたソースの美しさに「はっっっ！！」となりました。

「そのどきゅめんとの「もと」をいしきして、すくりぷとはかくように、こころがけましょう」
この一行が私には難解ですが、ほんとにほんとにありがとうございました！！

またブログお邪魔しに行きます！

通報する

お礼日時：2011/02/07 17:35

No.1

回答者： babu_baboo
回答日時：2011/02/06 23:55

こんなのはどうでしょう？

かんたんなことを、めんどうにかいてみました。
ぜんかくくうはくは、はんかくにしてね。
（さいきん、かいとうしても「はずれ」がおおいので、うんだめし！そしたら「凶」！あ～。）

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

</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>