Để kiểm tra tuổi và hiển thị nội dung bằng JavaScript và HTML, chúng ta có thể tạo một trang web đơn giản với một ô nhập tuổi và một nút kiểm tra. Khi người dùng nhập tuổi và nhấn nút kiểm tra, chúng ta có thể sử dụng JavaScript để kiểm tra tuổi và hiển thị nội dung tương ứng, ví dụ như “Bạn đã đủ tuổi” hoặc “Bạn chưa đủ tuổi”. Đoạn mã JavaScript có thể sử dụng điều kiện if-else để xác định tuổi và thay đổi nội dung trang web dựa trên kết quả kiểm tra. Điều này giúp chúng ta tạo ra một trang web tương tác và hiển thị nội dung phản hồi dựa trên tuổi của người dùng. Học viết Code kiểm tra tuổi người dùng để hiển thị nội dung bằng javascript, html, css. Tham khảo ngay code mẫu của toantuoity.com nhé!
Code kiểm tra tuổi người dùng để hiển thị 1 nội dung nào đó
Code kiểm tra tuổi là một công cụ hữu ích để xác định tuổi của một người. Nó có thể được sử dụng để xác định tuổi của một người trên các trang web, các ứng dụng trên điện thoại di động và các trang web khác. Code kiểm tra tuổi có thể được sử dụng để xác định tuổi của một người trong một số trường hợp, chẳng hạn như khi một người đăng ký một tài khoản trên một trang web, khi một người đăng nhập vào một trang web hoặc khi một người đăng ký một số dịch vụ. Code kiểm tra tuổi cũng có thể được sử dụng để xác định tuổi của một người trong một số trường hợp khác nhau, chẳng hạn như khi một người đăng ký một tài khoản trên một trang web, khi một người đăng nhập vào một trang web hoặc khi một người đăng ký một số dịch vụ.
Bước 1: Viết form nhập tuổi dành cho user
<div id="nhaycam">
<div class="hid-post-title" style=" font-size: 20px; margin: 10px; "> <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="30px" height="30px"><path d="M 16 0 C 13.789063 0 11.878906 0.917969 10.6875 2.40625 C 9.496094 3.894531 9 5.824219 9 7.90625 L 9 9 L 12 9 L 12 7.90625 C 12 6.328125 12.390625 5.085938 13.03125 4.28125 C 13.671875 3.476563 14.542969 3 16 3 C 17.460938 3 18.328125 3.449219 18.96875 4.25 C 19.609375 5.050781 20 6.308594 20 7.90625 L 20 9 L 23 9 L 23 7.90625 C 23 5.8125 22.472656 3.863281 21.28125 2.375 C 20.089844 0.886719 18.207031 0 16 0 Z M 9 10 C 7.34375 10 6 11.34375 6 13 L 6 23 C 6 24.65625 7.34375 26 9 26 L 23 26 C 24.65625 26 26 24.65625 26 23 L 26 13 C 26 11.34375 24.65625 10 23 10 Z M 16 15 C 17.105469 15 18 15.894531 18 17 C 18 17.738281 17.597656 18.371094 17 18.71875 L 17 21 C 17 21.550781 16.550781 22 16 22 C 15.449219 22 15 21.550781 15 21 L 15 18.71875 C 14.402344 18.371094 14 17.738281 14 17 C 14 15.894531 14.894531 15 16 15 Z"></path></svg> Nội dung này bị khoá </div>
<p class="nd">Nội dung nhạy cảm, vui lòng xác nhận trên 18 tuổi!
<input type="text" name="HoTen" id="hoten" placeholder="Nhập số tuổi vào đây...">
<input type="button" name="HienThi" value="Xác nhận" onClick="postanhnong()"></p>
</div>
Bước 2: Viết một đoạn nội dung khi user nhập đúng tuổi sẽ hiển thị
<div class="entry-content"> <p>Nội dung này sẽ hiển thị cho user nhập đúng độ tuổi quy định.</p> </div>
Bước 3: Viết 1 đoạn javascript xử lý yêu cầu
<script type="text/javascript">
function postanhnong() {
hoten = document.getElementById("hoten").value;
if (hoten > 18) {
document.getElementById("nhaycam").innerHTML="<style>.entry-content {display: block !important;}</style>";
} else {
alert("Bạn còn quá non để xem nội dung này!");
}
}
</script>
Bước 4: Thêm chút style cho đẹp
<style>
.entry-content{display:none;}
#nhaycam{text-align: center;background: #ffddd4;border: 1px dashed orange;}
#nhaycam .nd {
color: red;
font-size: 19px;
font-weight: bold;
}
#nhaycam input[type=button] {
background: red;
color: white;
border-radius: 30px;
}
input[type=text] {border-radius: 30px;}
</style>
Chúc các bạn thành công!
