Restricting website access based on a user's location is a common practice for many reasons, such as regional content restrictions, legal compliance, or targeted marketing. While IP-based geo-blocking is the standard approach, you can also use JavaScript to determine the user's time zone and restrict access accordingly.
In this article, we'll explore a simple JavaScript method to check the user's time zone and display a restriction message if they are from a blocked region.
Why Use Time Zone-Based Blocking?
- Privacy-Friendly – No need to access IP-based location data.
- Fast Execution – Uses the browser's built-in
Intl.DateTimeFormatobject. - Easy Implementation – No third-party services required.
JavaScript Code for Time Zone Restriction
Below is a simple JavaScript snippet that checks the user's time zone and blocks access for certain regions:
document.addEventListener("DOMContentLoaded", function () {
function checkTimeZone() {
const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const blockedTimeZones = ["Asia/Manila", "Asia/Jakarta", "Asia/Calcutta"];
if (blockedTimeZones.includes(userTimeZone)) {
const blocker = document.getElementById("cntryBlk");
if (blocker) blocker.style.display = "flex";
}
}
checkTimeZone();
});
Block Message Display
<div class="fNtf" id="cntryBlk" style="display:none;"><div><svg class="line" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><line class="svgC" x1="12" x2="12" y1="8" y2="12"></line><line class="svgC" x1="12" x2="12.01" y1="16" y2="16"></line></svg><h5>Site is Blocked</h5><p>Sorry! This site is not available in your country.</p></div></div>
/* Styling for the full-screen block message */ .fNtf { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); /* Dark overlay */ color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; font-family: 'Arial', sans-serif; z-index: 9999; padding: 20px; } .fNtf div { background: #ff4d4d; /* Red alert box */ padding: 25px; border-radius: 10px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 4px 10px rgba(255, 77, 77, 0.5); animation: fadeIn 0.5s ease-in-out; } /* Warning icon */ .fNtf svg { width: 40px; height: 40px; fill: none;margin: 0 auto; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Headline */ .fNtf h5 { font-size: 26px; margin: 10px 0;color: #fff; font-weight: bold; letter-spacing: 1px; } /* Message text */ .fNtf p { font-size: 16px; line-height: 1.5; margin: 0; } /* Fade-in effect */ @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Responsive Design */ @media (max-width: 768px) { .fNtf div { max-width: 90%; padding: 20px; } .fNtf h5 { font-size: 20px; } .fNtf p { font-size: 14px; } .fNtf svg { width: 50px; height: 50px; } }
How to Improve This Script?
- Expand the Blocked List – Add more restricted time zones if needed.
- Improve UI – Style the block message with CSS for better user experience.
- Fallback Methods – Combine this with IP-based geolocation for higher accuracy.
- Redirect Users – Instead of blocking, redirect them to an alternative page.
Final Thoughts
Using JavaScript for time zone-based blocking is a lightweight and privacy-friendly approach. It ensures minimal data collection while allowing website owners to implement regional restrictions effectively. However, for higher accuracy and security, you should consider combining this method with IP-based geolocation or backend validation.
What’s Next? If you found this tutorial helpful, check out our other web development guides and tips to enhance your site's functionality. Also, let us know in the comments if you have any questions or suggestions!