WEB拍手を実装したメモ
初心者みたいな記事でアレですが、自分のサイトに簡易WEB拍手を実装したのでちょっとメモ。所要時間1時間くらいのマジで雑なやつ(ワンドロか?)
拍手される度にメールがくる
本当にメモなので解説なし 今イベントの準備で忙しいので…
HTML
<button id="webclap-send" class="webclap-send" onclick="webclap_send();"><span id="webclap-send-text">イイネ</span>♡</button> <textarea id="webclap-textarea"></textarea>
JS
// 通信成功したら成功しましたって表示するやつ var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState == 4) { if (req.status == 200) { setTimeout('webclap_done();', 1000); } } } // テキストエリアからメッセージ拾って送信するやつ function webclap_send() { webclap_progress(); var message = document.getElementById('webclap-textarea').value; req.open('POST', './php/mail.php', true); req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8'); req.send('message=' + message); } // ボタンとテキストエリアを送信中状態にするやつ function webclap_progress() { document.getElementById('webclap-send').classList.add("progress"); document.getElementById('webclap-send').disabled = true; document.getElementById('webclap-textarea').disabled = true; document.getElementById('webclap-send-text').textContent = "送信中…"; } // ボタンとテキストエリアを送信完了状態にするやつ function webclap_done() { document.getElementById('webclap-send').classList.remove("progress"); document.getElementById('webclap-send').disabled = false; document.getElementById('webclap-textarea').disabled = false; document.getElementById('webclap-send-text').textContent = "送信完了しました"; document.getElementById('webclap-textarea').value = ""; setTimeout('webclap_init();', 1000); } // ボタンを初期状態にするやつ function webclap_init() { document.getElementById('webclap-send-text').textContent = "イイネ"; }
CSS
.webclap-send { cursor: pointer; } .webclap-send.progress { cursor: progress; }
PHP
<?php //宛先 $to = "***@example.jp"; //差出人 $header = "From: "."***@example.jp"; //件名 $subject = "拍手されました"; //本文 $body = ""; $body .= "メッセージ\n"; $body .= "==============================\n"; $body .= $_POST['message']; $body .= "\n"; $body .= "==============================\n"; $body .= "\n"; $body .= "IP:" . $_SERVER["REMOTE_ADDR"] . "\n"; if (mb_send_mail($to, $subject, $body, $header)) { echo "OK"; } else { echo "NG"; }