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
index.htmlLalu 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">COPYRIGHT HAMZAH XOU</footer>
<!--
/*footer bawah copyright*/
<div>
<header class:"container"> copyright hamzah xou </header>
</div>
//-->
</div>
</div>
</div>
</body>
</html>
- Ke dua buat file
style.css
style.css 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;} <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>