ママのスキンケアのお悩みにおすすめアイテム

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

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

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

宜しくお願いします。

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

A 回答 (3件)

他の方も回答しておられますが、Cookieを使用するのが簡単です。


Cookieは、Javascriptから直接利用することができます。
http://ash.jp/~hasimoto/zakki/new_jsck.htm

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

なるほど。なにをどうすればいいのかがわかりました。
まずはJavascriptとCookieの勉強ですね…
ありがとうございます!

お礼日時:2009/02/28 15:20

クッキーをつかい生存期間を翌日の0時にしておくのが妥当なやりかた。


もしくは、生年月日や血液型など特定の条件ををいれるような仕組みにしておき、
その条件を使ったランダマイズをするのも手段の一つ。
    • good
    • 0
この回答へのお礼

ありがとうございました!
クッキーについて少し勉強してみます。

お礼日時:2009/02/28 15:21

まず、


1日1回というのを何を基準にするかが問題だわ。
相手の顔を見て判断するわけにはいかないのだから
何をもって1日1回とするかよ。

まず、それを決めてから再度質問して頂戴。

ちなみに良くあるパターンは
・ユーザ毎にIDを発行し、ログインさせてから利用させる。
 この質問サイトと同じ仕組みよね。
 一人で複数ID所持されたらNGだけど、確実性は高いわ。
 でもIDを発行したり管理したりする仕組みが必要よ。
・ブラウザのに保存させる
 ブラウザやパソコンを変えたり、そもそも保存の内容を消されたら
 いくらでもアクセスされてしまうわ。
この2つくらいかしらね。
    • good
    • 0
この回答へのお礼

ログインさせてからとなると、ユーザー的に少しハードルが高くなりますね…
そこまで手の込んだものにはしないので、後者のほうを参考にさせていただきます。

ありがとうございました!

お礼日時:2009/02/28 15:23

このQ&Aに関連する人気のQ&A

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

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

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

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

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

javascriptとcookie初心者です。

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

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

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

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

Aベストアンサー

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

<!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 (getC...続きを読む

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
こんなページとか有るので。

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」に統一するべき~という事になります。

...続きを読む

QconfirmのOK・キャンセルを押した後の操作制御

いつもお世話になっています。

<script language="JavaScript">
<!--
function startConfirm(){
confirm("本当によろしいですか?");
}
// -->
</script>
</head>

(中略)

<form action="next.asp" target="_top" name="me">
<td>
<input TYPE="submit" value="全削除" name="all_del" onclick="startConfirm()">
</td>
</form>

と、このようなボタンを押したときに確認メッセージを表示させています。
キャンセルを押した場合にnext.aspに遷移せず、自分の画面に戻る
または他の画面に遷移させたいのです。

startConfirm()の中に処理を書けば良いのでしょうが、哀しいかな、わかりません(涙)。
やり方をご存知の方、教えてください。

alertでOKを押された時の処理を任意に行う方法も教えていただけたら嬉しいです。

いつもお世話になっています。

<script language="JavaScript">
<!--
function startConfirm(){
confirm("本当によろしいですか?");
}
// -->
</script>
</head>

(中略)

<form action="next.asp" target="_top" name="me">
<td>
<input TYPE="submit" value="全削除" name="all_del" onclick="startConfirm()">
</td>
</form>

と、このようなボタンを押したときに確認メッセージを表示させています。
キャンセルを押した場合にnext.aspに遷移せず、自分の画面に戻る
または他の画面に遷...続きを読む

Aベストアンサー

こんにちはさん、xruzです。
submitボタンにこだわらずscriptでsubmit()すれば柔軟に対応できますよ。
こんな感じではいけませんか?

<html>
<head>
<title>submit</title>
</head>
<script language="javascript">
<!--
function frmSubmit() {
var errFlag=true;
// チェックとか処理とかをします
if(errFlag==false) {
// alert("Err"); // エラー処理かな
return;
}
if(confirm("Send Ok?")) {
// document.frm.target="main"; // 表示先の変更
// document.frm.action="hoge.asp"; // リンク先の変更
document.frm.submit();
} else {
// this.location.href="jump.cgi"; // キャンセルした場合のリンク先?
}
}
//-->
</script>
<body>

<form method="post" action="" name="frm" target="_self">

<input type="button" value="send" onclick="frmSubmit();">
</form>

</body>
</html>

がんばってくださいね。

こんにちはさん、xruzです。
submitボタンにこだわらずscriptでsubmit()すれば柔軟に対応できますよ。
こんな感じではいけませんか?

<html>
<head>
<title>submit</title>
</head>
<script language="javascript">
<!--
function frmSubmit() {
var errFlag=true;
// チェックとか処理とかをします
if(errFlag==false) {
// alert("Err"); // エラー処理かな
return;
}
if(confirm("Send Ok?")) {
// document.frm.target="main"; // 表示先の変更
// document.frm.action="hoge....続きを読む

Qボタンを動的にdisabledさせたいのですが

お世話になります。

ある画面に複数ボタンがあって
押されたボタンをdisabledにしたいなと思っています。
ただしどのボタンがおされても同じ関数に飛んでほしいのですが
いまいち解決できません。

<form name="form">
<input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()">
<input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()">
<input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()">
</form
>
とあった場合

function hogehoge(){
document.form.ボタンの名前.disabled=true;
}

としたいのですが
名前の部分は動的に変えることは可能なのでしょうか?
普通に
document.form.syori1.disabled=true;
と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。

ボタン名は
onClick="javascript:hogehoge(document.form.ボタンの名前.name)"
で、送ることができるのは確認したのですが
hogehoge(ボタンの名前)
の方でどうやってdisabledのところに入れればいいか解りません。
よろしくお願い致します。

お世話になります。

ある画面に複数ボタンがあって
押されたボタンをdisabledにしたいなと思っています。
ただしどのボタンがおされても同じ関数に飛んでほしいのですが
いまいち解決できません。

<form name="form">
<input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()">
<input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()">
<input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()">
</form
>
...続きを読む

Aベストアンサー

そういう場合は名前じゃなくて、thisというオブジェクトを渡します。

<script language=javascript>
function hogehoge(btn){
btn.disabled=true;
}
</script>
<form name="form">
<input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge(this)">
<input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge(this)">
<input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge(this)">
</form>

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む


人気Q&Aランキング