おすすめのモーニング・朝食メニューを教えて！

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

解決済

  • 質問者：yamyamchammy
  • 質問日時：
  • 回答数：3件

javascriptとcookie初心者です。

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

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

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

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

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

<!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>
    • good
    • 1
    • 件
通報する

No.3

  • 回答者： babu_baboo
  • 回答日時：

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



<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 ぞくせいは、ぜったいにひつようです

そのどきゅめんとの「もと」をいしきして、すくりぷとはかくように、こころがけましょう
かこにぜんぶいわれてきたことの、うけうりですが・・・。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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


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

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

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


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

通報する
お礼日時：2011/02/07 17:35

No.1

  • 回答者： babu_baboo
  • 回答日時：

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


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

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

補足日時：2011/02/07 01:24
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報