タイム・スタンプ(24時間)

◀︎

button_like_1.html

<style>
body{justify-content:center;
max-width:400px;
align-items:center;
margin:8px auto;
font-family:Arial,sans-serif;}
</style>

<p>タイム・スタンプ(24時間)</p>
<div id="目印"></div>
<button id="likeButton" onclick="いいね()">いいね</button>
<button id="unlikeButton" style="display:none;" onclick="取り消す()">取り消す</button>


<script>
document.addEventListener('DOMContentLoaded', () =>
{if(localStorage.getItem('liked') === 'true')
{document.getElementById("目印").innerHTML = '<p style="color:#00abcd;font-size:30px;">イイネ！</p>';
document.getElementById("likeButton").style.display = "none";
document.getElementById("unlikeButton").style.display = "inline-block";}});

function いいね()
{let xhr = new XMLHttpRequest();
xhr.open("POST", "button_like_1.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function()
{if(xhr.readyState === 4 && xhr.status === 200)
{document.getElementById("目印").innerHTML = xhr.responseText;
localStorage.setItem('liked', 'true');
document.getElementById("likeButton").style.display = "none";
document.getElementById("unlikeButton").style.display = "inline-block";表示}};
xhr.send();}

function 取り消す()
{localStorage.removeItem('liked');
document.getElementById("目印").innerHTML = "";
document.getElementById("likeButton").style.display = "inline-block";
document.getElementById("unlikeButton").style.display = "none";}
</script>

button_like_1.php

<?php
session_start();
if($_SERVER["REQUEST_METHOD"] === "POST")
{$ipAddress = $_SERVER['REMOTE_ADDR'];
$currentDateTime = time();
if(isset($_SESSION['liked_ip']) && $_SESSION['liked_ip'] === $ipAddress)
{$lastLikedTime = $_SESSION['liked_time'];
if(($currentDateTime - $lastLikedTime) < 86400)
{echo '<p style="color:red;font-size:20px;">すでにボタンは押されています</p>';
exit;}}
$_SESSION['liked_ip'] = $ipAddress;
$_SESSION['liked_time'] = $currentDateTime;
echo '<p style="color:#00abcd;font-size:30px;">イイネ！</p>';}
?>