Reload Page ❖ Jam Digitalweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

https:////example.com/style.css X

 
1
/* Make font-face */
2
@font-face{font-family:'BebasNeueRegular';src:url('BebasNeue-webfont.eot');src:url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('BebasNeue-webfont.woff') format('woff'),url('BebasNeue-webfont.ttf') format('truetype'),url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight:normal;font-style:normal}
3
/* Design Clock */
4
.container{width:80%;margin:0 auto;overflow:hidden}
5
.clock{width:80%;margin:0 auto;padding:30px;color:#000}
6
#Date{font-family:'BebasNeueRegular',Arial,Helvetica,sans-serif;font-size:100%;text-align:center;}
7
ul{width:80%;margin:0 auto;padding:0;list-style:none;text-align:center}
8
ul li{display:inline;font-size:200%;text-align:center;font-family:'BebasNeueRegular',Arial,Helvetica,sans-serif;}
9
#point{position:relative;-moz-animation:mymove 1s ease infinite;-webkit-animation:mymove 1s ease infinite;padding-left:10px;padding-right:10px}
10
/* Simple Animation */
11
@-webkit-keyframes mymove{0%{opacity:1.0;}50%{opacity:0;text-shadow:none}100%{opacity:1.0;}}
12
@-moz-keyframes mymove{0%{opacity:1.0;}50%{opacity:0;text-shadow:none}100%{opacity:1.0;}}
xxxxxxxxxx
 
​

https:////example.com/script.js X

​x
 
1
    $(document).ready(function() {
2
        // Create two variable with the names of the months and days in an array
3
        var monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
4
        var dayNames = ["Minggu,", "Senin,", "Selasa,", "Rabu,", "Kamis,", "Jumat,", "Sabtu,"]
5
​
6
        // Create a newDate() object
7
        var newDate = new Date();
8
        // Extract the current date from Date object
9
        newDate.setDate(newDate.getDate());
10
        // Output the day, date, month and year
11
        $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
12
​
13
        setInterval(function() {
14
            // Create a newDate() object and extract the seconds of the current time on the visitor's
15
            var seconds = new Date().getSeconds();
16
            // Add a leading zero to seconds value
17
            $("#sec").html((seconds < 10 ? "0" : "") + seconds);
18
        }, 1000);
19
​
20
        setInterval(function() {
21
            // Create a newDate() object and extract the minutes of the current time on the visitor's
22
            var minutes = new Date().getMinutes();
23
            // Add a leading zero to the minutes value
24
            $("#min").html((minutes < 10 ? "0" : "") + minutes);
25
        }, 1000);
26
​
27
        setInterval(function() {
28
            // Create a newDate() object and extract the hours of the current time on the visitor's
29
            var hours = new Date().getHours();
30
            // Add a leading zero to the hours value
31
            $("#hours").html((hours < 10 ? "0" : "") + hours);
32
        }, 1000);
33
    });
10
 
1
<div class="clock">
2
<div id="Date"></div>
3
  <ul>
4
      <li id="hours"></li>
5
      <li id="point">:</li>
6
      <li id="min"></li>
7
      <li id="point">:</li>
8
      <li id="sec"></li>
9
  </ul>
10
</div>