Trong bài viết này, chúng ta sẽ thảo luận về mã đếm người truy cập trang web bằng JavaScript. Một bộ đếm người truy cập trang web là một đoạn mã đơn giản giúp theo dõi số lượng người dùng truy cập một trang web. Nó có thể được sử dụng để đo sự phổ biến của một trang web hoặc để xem cách người dùng tương tác với trang web.
Để tạo một bộ đếm người truy cập trang web bằng JavaScript, bạn sẽ cần tạo trước một trang HTML đơn giản. Trên trang này, bạn sẽ bao gồm một thẻ script trỏ đến mã đếm người truy cập.
Tiếp theo, bạn cần bao gồm mã đếm người truy cập. Mã này sẽ tạo ra một bộ đếm đơn giản để theo dõi số lượng người dùng truy cập trang.
JavaScript – Đếm Số Lượng Người Truy Cập Cho Trang Web
Ví dụ 1: Mã HTML
<div id="incrementCount">
<span class="counter-item">9</span>
<span class="counter-item">5</span>
<span class="counter-item">7</span>
<span class="counter-item">6</span>
<span class="counter-item">5</span>
<span class="counter-item">4</span>
</div>
Mã JavaScript Thuần
var flg = localStorage.getItem('on_load_counter');
if (flg === null) {
flg = 0;
}
flg++;
localStorage.setItem("on_load_counter", flg);
document.getElementById('incrementCount').innerHTML = flg;
Ví dụ:
index.html
<!DOCTYPE html>
<html>
<head>
<title>JS Counter - www.pakainfo.com</title>
<style>
.main_container {
height: 46px;
width: auto;
padding: 3px;
margin: 2px;
max-width: 300px;
background-color: #555555;
align-content: center;
}
.container_inner {
height: auto;
border: none;
background-color: #555555;
max-width: 290px;
vertical-align: center;
padding-top: 12px;
padding-left: 10px;
align-content: center;
}
.live_cnt {
width:30px;
height: 30px;
background-color: #888888;
color: #ffffff;
font-size: 22px;
text-align: center;
line-height: 20px;
padding: 3px;
margin: 1.5px;
font-family: verdana;
vertical-align: center;
}
</style>
</head>
<body onload="CounterVisitor(10)">
<div class="main_container" id="id_main_container">
<div class="container_inner" id="display_div_id">
</div>
</div>
</body>
<script>
var total_visitor_list = [10,10000,10000];
var visitor_cnt_0 = total_visitor_list[0];
var visitor_cnt_1 = total_visitor_list[1];
var visitor_cnt_2 = total_visitor_list[2];
var result_data = "";
var display_div = document.getElementById("display_div_id");
function CounterVisitor(current_count){
setInterval(function(){
// clear count
while (display_div.hasChildNodes()) {
display_div.removeChild(display_div.lastChild);
}
visitor_cnt_0++;
if (visitor_cnt_0 > 99) {
visitor_cnt_0 = 10; // reset count
visitor_cnt_1++; // increase next count
}
if(visitor_cnt_1>99999){
visitor_cnt_2++;
}
result_data = visitor_cnt_2.toString() + visitor_cnt_1.toString() + visitor_cnt_0.toString();
for (var i = 0; i < result_data.length; i++) {
var live_flag = document.createElement('span');
live_flag.className = 'live_cnt';
live_flag.innerText = result_data[i];
display_div.appendChild(live_flag);
}
},1000);
}
</script>
</html>
Đây là một bộ đếm người truy cập HTML cơ bản sử dụng mã PHP:
Tạo một tệp PHP mới và đặt tên là “counter.php”.
Dán mã sau vào tệp:
<?php
$file = "counter.txt";
$handle = fopen($file, "r");
if(!$handle) {
echo "Could not open the file!";
}
else {
$counter = (int) fread($handle,20);
fclose($handle);
$counter++;
$handle = fopen($file, "w");
fwrite($handle, $counter);
fclose($handle);
echo "You are visitor number " . $counter . ".";
}
?>
Lưu tệp và tải lên máy chủ của bạn.
Tạo một tệp HTML mới và đặt tên là “index.html”.
Dán mã sau vào tệp:
<!DOCTYPE html>
<html>
<head>
<title>Visitor Counter</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>
<?php include("counter.php"); ?>
</p>
</body>
</html>
Lưu tệp và tải lên máy chủ của bạn.
Bây giờ, mỗi khi có người truy cập trang web của bạn, tệp “counter.php” sẽ cập nhật tệp “counter.txt” và hiển thị số lượng người truy cập trên tệp “index.html” của bạn. Lưu ý rằng đây là một bộ đếm người truy cập cơ bản và có thể không phù hợp cho các trang web có lưu lượng lớn.
Hy vọng bạn đã có ý tưởng về mã nguồn đếm người truy cập HTML.
- Bài viết này ban đầu được xuất bản tại: https://www.pakainfo.com
