Code kiểm tra tuổi hiển thị nội dung bằng javascript, html

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 Toancr SEO 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!