ちょっと変わったマニアな作品が集結

javascriptとcookie初心者です。

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 1

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



<script language="JavaScript" type="text/javascript">は、
<script type="text/javascript">にすべき。HTML5なら<script>でOK。

my_pic=new Array();
へんすうせんげんには、var をつけましょう

document.images[] は、なんだかなぁ~

htmlにも、ひとこと
<img>ようそは、いんらいんようそなので、ぶろっくようそでかこんでおきましょう
その name ぞくせいもふるいのでやめましょう。 alt ぞくせいは、ぜひつけましょう
<form>ようその name ぞくせいも・・・、action ぞくせいは、ぜったいにひつようです

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

素晴らしい~!!できましたっ!!!

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


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

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

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


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

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

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


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

<!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に関連する人気のQ&A

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

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

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

1日1回しかクリックできないおみくじを作りたいと思っています。
クリックするとポップアップウィンドウが出て、大吉!などのイラストが出るというようなものを考えています。
その日に1回アクセスしたら、あとは何度行っても同じページが出るか、「また明日引いてね!」みたいなダイアログが出るようにしたいです。

色々調べてJavascriptでおみくじが作れることはなんとなくわかったのですが、1日1回しかクリックできないというふうにするにはどうしたらいいかがなかなか見つからなくて困っています。
(1回ボタンを押すと一定時間押せなくなるというものは見つけたんですが、更新するとまた押せるようになってしまうものでした…)

お恥ずかしいことにプログラミング初心者ですが、知っている方がいれば教えて頂けないでしょうか?
そもそもおみくじを作れるのはJavascriptで合っているのでしょうか?

宜しくお願いします。

Aベストアンサー

他の方も回答しておられますが、Cookieを使用するのが簡単です。
Cookieは、Javascriptから直接利用することができます。
http://ash.jp/~hasimoto/zakki/new_jsck.htm

ただ、Cookieを使った場合、ユーザーがCookieを削除してしまうと、再びおみくじが引けてしまいます。
それを防ぐには、アカウント制や、IP制限等が別途必要になってきます。
アカウント発行やIP制限を行う場合には、別途PHP等が必要になります。

Qポップアップを1日1回だけ表示するについて

TOPページが開くと自動的にポップアップ(別URL)を出しています。

1日1回のみポップアップを出してインターネットを閉じてもまた開いてもポップアップは出さない。

クッキーでなどの回答が来ると思いますが、初心者なのでソースを全て書いていただけるとありがたいです。

以上、宜しくお願い致します。

Aベストアンサー

そこまでわかっていれば、検索すれば解説付きでいろいろあります。

<参考例>解説とソース付
 http://www016.upp.so-net.ne.jp/masuda2/js/js011.html
 http://www5e.biglobe.ne.jp/access_r/hp/javascript/js_007.html
 http://ash.jp/~hasimoto/zakki/new_jsck.htm

(ちなみに、ここは丸投げ禁止みたいです)

Qアクセス制限(1日1回)

HP上にて、1日1回だけしかアクセス出来ないページを作成したいです。
ただ、そう言った方法は、何をどう検索すれば良いのか分からなかったので質問しました。

・PCと携帯、両方のやり方を知りたいです。
・0時になったら制限をリセットして、また1回のみ行けるようにしたいです。
・具体的に言うと、クリック募金のように、1日1クリックしか出来ない感じです。
・1回行ったら、0時のリセットまで「もうクリック出来ません」みたいな注意書きが表示されるようにしたいです。

明確な方法などが全然分からないので、まずはこの条件で何か方法はありますか?
分かる人が居ましたら、お願い致します。
「こうやって検索してみて」」とかでも全然助かります。
高等技術は持ち合わせていません・・・(Javaは分かりません

Aベストアンサー

JavaScriptの公開プログラム等有りますので調べてみては?

http://www.tohoho-web.com/js/index.htm
こんなページとか有るので。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む

Qホームページでファイルをダウンロードさせる

お世話になります。
会社のホームページを制作中です。
マニュアルなどをアップしておき、ユーザーにダウンロードしてもらうページを作ろうと思っています。
<ベクターのような>
参考になる情報ありましたら教えてください。
宜しくお願いいたします。

Aベストアンサー

ダウンロードについて、
参考URLのページに分かりやすく書いてあるようです。
例もあるのでぜひ参考にしてください。

参考URL:http://www.tohoho-web.com/wwwxx013.htm

Qonclickで2個指定するには?

例えば、下記のような二つの指定があるします。

function checkd1(){
document.FORM.CHECK1.checked=true
}
function checkd2(){
document.write("テスト");
}

これをonclickで二つとも指定するということはできるのでしょうか?

<a href="#" onclick="checkd1()">ボタン</a>
<a href="#" onclick="checkd2()">ボタン2</a>

を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

Aベストアンサー

><a href="#" onclick="checkd1(),checkd2()">ボタン</a>

<a href="#" onclick="checkd1();checkd2()">ボタン</a>

おしいですね。
, ではなく ; なら両方の関数が呼ばれると思います。
(Firefox3とIE6で確認しました。)

なぜ ; かと言うと、
Javascriptの文法で、文の区切りは ; だからですね。

Q文字列から、特定の文字を削除したい

アンケートで入力された値を受け取り、メールで送信しているのですが、受け取った値から、特定の文字列を削除することは可能でしょうか?

例えば電話番号の入力の場合、
03-xxxx-xxxx →03xxxxxxxx
077-xxx-xxxx →077xxxxxxx
のように、-(ハイフン)が入力されていたら、-を削除した文字列に置換してメール送信したいのです。
入力する時に、3つのテキストエリアに分けるのは諸事情でできないので、特定の文字を削除する関数か処理方法がありましたら、教えていただきたいです。
よろしくお願いします。

Aベストアンサー

str_replace
http://itbtech.itboost.co.jp/man/php_man/function.str-replace.html

<?php
$orig_telno = "03-xxxx-xxxx";

$telno = str_replace("-", "", $orig_telno);
echo $telno;

03xxxxxxxx

“PHP 文字列” あたりをキーワードに検索すれば
そんなに難しいものでもないような。

Q1つのformで複数のactionを実行できますか?

フォーム内に商品の購入ボタンがあります。同じフォーム内に商品名でグーグルのサイト内を検索させるボタンを設置し、横に並べることは可能ですか?
フォームの入れ子はよくないようなので、検索をJava scriptでできればよいのですが・・・
スタイルシートではデザイン上無理でした。

<form id="fm" name="fm" action="URL" method="POST">
<input type="hidden" name="shouhinmei" value="商品名">
<input type="hidden" name="kakaku" value="500">
<input type="image" src="kounyuu.gif value="購入">

<form method=get action="http://www.google.co.jp/search">
<input type=hidden class="q" name=q value="商品名"><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=hl value="ja"><input name=btnG type="image" src="検索.gif value="検索"><input type=hidden name=sitesearch value="サイトのURL"></form>
</form>
</form>

+----+  +----+
|購入|  |検索|
+----+  +----+

フォーム内に商品の購入ボタンがあります。同じフォーム内に商品名でグーグルのサイト内を検索させるボタンを設置し、横に並べることは可能ですか?
フォームの入れ子はよくないようなので、検索をJava scriptでできればよいのですが・・・
スタイルシートではデザイン上無理でした。

<form id="fm" name="fm" action="URL" method="POST">
<input type="hidden" name="shouhinmei" value="商品名">
<input type="hidden" name="kakaku" value="500">
<input type="image" src="kounyuu.gif value="購入">...続きを読む

Aベストアンサー

では、以下のような感じで。
なるべく多くのブラウザで動くように書いたつもりですが検証は充分行ってください。

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function searchGoogle(q) {
document.forms['searchForm'].elements['q'].value=q;
document.forms['searchForm'].submit();
return false;
}
//-->
</script>

</head>
<body>

<form action="URL">
~~
<input type="image" src="kounyuu.gif value="購入">
<a href="http://www.google.co.jp/" onclick="return searchGoogle('商品名')"><img src="検索.gif" border=0></a>
</form>

<form action="http://www.google.co.jp/search" id="searchForm" style="display:none;">
<input type=hidden name="q">
<input type=hidden name=ie value="UTF-8">
<input type=hidden name=oe value="UTF-8">
<input type=hidden name=hl value="ja">
<input type=hidden name=sitesearch value="サイトのURL">
</form>

</body>
</html>

では、以下のような感じで。
なるべく多くのブラウザで動くように書いたつもりですが検証は充分行ってください。

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function searchGoogle(q) {
document.forms['searchForm'].elements['q'].value=q;
document.forms['searchForm'].submit();
return false;
}
//-->
</script>

</head>
<body>

<form action="URL">
~~
<input type="image" src="kounyuu.gif value="購入">
<a href="http://www.google.co.jp/" onc...続きを読む

Qアンケートなどの1日1回の投票を何度も!

よくHP上のアンケートで1日1回までのアンケートってありますよね? あれを1日に何度もすることって可能なんですか?  アンケートをしていて以上に投票が多いことがありまして。もしできるのならば、方法を教えてください!どうやってるんでしょー?

Aベストアンサー

基本的に、現在、相手の完全にPCを特定する
手段はないと聞きます。

なので、けっこう簡単にできますよ。
いわゆる、同じ人はダメ。っていうのは、IPか、
クッキーを利用しています。
IPは、ダイヤルアップなら、一回接続し直せば、
IPが変わるので、投票可能です。
また、常時接続でも、プロキシを通せば、IPアドレス
が、違う物に偽装する事ができるので、投票可能です。
クッキー(掲示板等で前に書いた名前を表示するヤツ)も
ブラウザーのキャッシュやクッキーを削除すれば、なか
った事にできますので、投票も可能です。

基本的には、熱狂的なファンの前では、アンケートは
あまり意味のないものとなっている事があります。

荒らしもそうですが、「IPで管理しています。」
と書けば、対処できる事もありますよ。


人気Q&Aランキング