このサンプルでは1日同じアルファベットを表示するサンプルです。
初回のアクセスでA・B・Cのどれかを表示して、その値をブラウザのcookieに保存します。
次回から保存された値を表示し、24時間で再度抽選を行います。
「」を1日ブラウザに記録しています。
このサンプルは、jQueryを利用しています。
JS
$(function(){
var t_type;
if(GetCookie("t_type")){
t_type = GetCookie("t_type");
}else{
var rnum = Math.floor(Math.random()*3);
//0から3以下の乱数を生成して少数点切り捨て
if(rnum === 1){
t_type="A";
}else if(rnum ===2){
t_type="B";
}else{
t_type="C";
}
//cookie書き込み
t_type_enc = encodeURIComponent(t_type);
limit_sec = 60*60*24; //一日
cookie_string = 't_type='+t_type_enc+'; '
cookie_string += 'max-age='+limit_sec+'; ';
cookie_string += 'path=/; '
document.cookie = cookie_string;
}
//わかりやすくアルファベットで条件分岐
if(t_type==="A"){
$(".demo_val_text").html('A');
}else if(t_type==="B"){
$(".demo_val_text").html('B');
}else{
$(".demo_val_text").html('C');
}
});
function GetCookie( cookieName )
{
//cookieの名前に一致する値を読み込む
var result = null;
var indexOfName = cookieName + '=';
var AllCookie = document.cookie;
var position = AllCookie.indexOf( indexOfName );
if( position != -1 )
{
var startIndex = position + indexOfName.length;
var endIndex = AllCookie.indexOf( ';', startIndex );
if( endIndex == -1 )
{
endIndex = AllCookie.length;
}
result = decodeURIComponent(
AllCookie.substring( startIndex, endIndex ) );
}
return result;
}
css
#demo_val {
width: 100px;
height: 100px;
line-height: 100px;
font-size: 50px;
background-color: #333;
color: #FFF;
text-align: center;
border-radius: 10px;
margin: 20px auto;
}
