クーポンくじ
| システム開発
少し前に会社ホームページにクーポンくじというのを作りました。
PHP/MySQLとjavascriptを使用しています。
クーポンの画像を用意して、javascriptのsetIntervalで一定時間アニメーションを表示させ、最後にランダムで画像を選択しています。最後の画像は、要素数100の配列から選択されるようになっていて、配列の中には確率分だけ画像のファイル名を入れて当たりの確立を調整しています。
クーポンコードは、はじめはjavascriptで作成していたのですが、このコードを保存するプログラム がうまくいかず、最終的にアニメーションと当たりを表示するページを分けて、アニメーション以外は全てPHPで作成しました。
当たりページでは、ランダムで選択された画像を表示し、当たりの場合に日付とクーポンコードを生成してCSSのpositionで画像の中に表示させています。クーポンコード生成はこちらを参考にさせていただきました。
当たりクーポンのデータと、IPアドレスのデータをMySQLに保存して管理しています。
サイトのリピーターを増やすためにどうしたらいいかなと考えて作ってみましたが、弊社のサービスだとそんなにしょっちゅう使うものではないので効果は薄めでした(^_^;)
よく使うお店のサイトにあったら、毎日通いたくなるかもしれないですね！
よろしければお試しください。
https://lifework-akita.co.jp/slot/slot.php
アニメーションのjavascriptコードはこんな感じです↓↓
function shuffle(array) {
for (let i = array.length - 1; i >= 0; i--) {
let rand = Math.floor(Math.random() * (i + 1));
[array[i], array[rand]] = [array[rand], array[i]]
}
return array;
}
let slot = null;
let s = 0;
let imglist = new Array("hit_vip.jpg","hit_big1.jpg","hit_big2.jpg","hit_sml1.jpg","hit_sml2.jpg","hit_sml3.jpg");
imglist = shuffle(imglist);
const count = imglist.length;
function img() {
function slot() {
let i = s % count;
document.coupon.src = 'img/' + imglist[i];
document.getElementById("top").innerHTML = '<br><img src="img/wait.png" style="width:140px;">';
s++;
if (s > 25) { clearInterval(slot); location.href= './hit.php';}
}
slot = setInterval(slot, 150);
}配列をランダムに並び替える関数は参照させていただいたサイトがあったのですが、ブックマークしていなかったので分からなくなってしまいましたすみません…