Cara membuat informasi pengunjung dengan javascript
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;}
Subscribe Our Newsletter
0 Response to "Cara membuat informasi pengunjung dengan javascript"
Post a Comment