Cara membuat informasi pengunjung dengan javascript

Hamzah Xou
Hamzah Xou
October 14, 2021

 


Sebelum saya sudah membuat cara menambahkan informasi Pengunjung di blog dengan PHP dan tools 

Namun yang saya berikan kali ini berbeda dari Part1 cara ini menggunakan javascript 


Langkah 

  • pertama buat file index.html

Lalu copy script di bawah ini



 <!DOCTYPE html>
<html>
  <head>
    <title> menampilkan browser yang di gunakan dengan js</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
   
 <a class="btn" id="button1" href="#id01">deteksi</a>

 <div id="id01" class="modal">
  <div class="modal-dialog">
   <div class="modal-content">
    <header class="container">
     <a href="#" class="closebtn">x</a>
     <h4 style="text-align:center">data yang di dapat</h4>
    </header>
    <div class="container"> 
   <!--data js-->
          <script type="text/javascript">
     //<![CDATA[
var h=(new Date()).getHours();
var m=(new Date()).getMinutes();
var s=(new Date()).getSeconds();
if (h >= 4 && h < 10)
document.writeln("<p>waktu : pagi" + "</p>");
if (h >= 10 && h < 15) 
document.writeln("<p>waktu : siang" + "</p>");
if (h >= 15 && h < 18) 
document.writeln("<p>waktu : sore" +"</p>");
if (h >= 18 || h < 4) 
document.writeln("<p>waktu : malam" + "</p>");
//]]>
      document.write ("<p>nama browser: "
   +navigator.appName +"</p>");
      document.write ("<p>versi aplikasi: "
   +navigator.appVersion +"</p>");
      document.write ("<p>versi aplikasi: "
      +navigator.platform +"</p>");
      document.write ("<p>enable cookies: "
    +navigator.cookieEnabled +"</p>");
      document.write ("<p>user-agent: "+navigator.userAgent +"</p>");

</script>
   
       </div>
    <footer class="container">&#67;&#79;&#80;&#89;&#82;&#73;&#71;&#72;&#84; &#72;&#65;&#77;&#90;&#65;&#72; &#88;&#79;&#85;</footer>
    
<!-- 
/*footer bawah copyright*/
<div>
<header class:"container"> copyright hamzah xou </header>
</div>
//-->
   </div>
  </div>
 </div>
  </body>
</html>


  • Ke dua buat file style.css

Lalu salin
     body {
       background: #001559;
}
     #button1 {       border: none;
           background: #0076ff;
           border-radius: 10px;
           padding: 5px;
           color: #fff;
           font-weight: bold;
           font-size: 12px;


      }
      .btn {
         font-family: sans-serif;
         border: none;
         padding: 15px 30px;
         font-size: 20px;
         outline: none;
         margin: 10px;
        
      }


/* The modal's background */

.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */

.modal:target {
display: table;
position: absolute;
}
/* The modal box */

.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */

.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */

.closebtn {
text-decoration: none;
float: right;
font-size: 25px;
font-weight: bold;
color: #fff;
}

.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.container {
padding: 2px 16px;
}

header {
background-color: #0076ff;
font-size: 25px;
color: white;
}

footer {
background-color: #0076ff;
font-size: 10px;
color: white;
text-align: center;
}
p {
 border: 1px solid #0076ff;
}



Untuk melihat demo nya di sini



Demo dengan tombol
atau kalian bisa menggunakan script js ini tanpa tombol
 <script type="text/javascript">
      document.write ("<p>nama browser: "
   +navigator.appName +"</p>");
      document.write ("<p>versi aplikasi: "
   +navigator.appVersion +"</p>");
      document.write ("<p>versi aplikasi: "
      +navigator.platform +"</p>");
      document.write ("<p>enable cookies: "
    +navigator.cookieEnabled +"</p>");
      document.write ("<p>user-agent: "+navigator.userAgent +"</p>");
</script>


Demo seperti di bawah ini
Hamzah Xou