What Will I Learn?
Write here briefly the details of what the user is going to learn in a bullet list.
- You will learn about get in javascript.
- You will learn about setinterval in javascript.
Requirements
Write here a bullet list of the requirements for the user in order to follow this tutorial.
- You have basic about javascript.
Difficulty
- Basic
Tutorial Contents
- Today I created a simple tutorial to display the time in a website. To start this you have to understand the basic of javascript like what is javascript, what distinguishes it from html and php, where javascript is used. Next we will enter in making the program.
- The first step is you have to create an html file, may be by any name, but I use the name jam.html, in this tutorial I combine javascript and css in a file.
- Next, because we use html file, then we have to declare the main element of the file, as we know html element consists of , , and , for those of you who do not understand about this you can copy code below :
<html>
<head>
<title> jam sederhana </title>
</head>
<body>
</body>
</html>
-The next stage we will create an id to hold the value of the time, for the creation of the id you have to add it into <body> ... </ body>.
<div id="clock"></div>
- When id is created next stage we will create a javascript code to catch the current time, code from javascript must be between
<script> ... </ script>. And in this tutorial I put the script into<head>. - Next we will enter in the making of its function.
function waktu() {
...
}
Function waktu (): assigned to open a function to start the script, To start timing, we must first get the command to get the time,
var t = new Date();
- Based on the above code can be seen that the variable t holds the value of date, then next we have to declare the id we have made above into this script.
var j = document.getElementById("clock");
- the above variable serves to capture the element that will be declared in this script, after id succeed in declaration next we will make a variable that will accommodate value of clock, minute, and second.
var jam = t.getHours();
var menit = t.getMinutes();
var detik = t.getSeconds();
- as we already know the above code functions to accommodate the value of time, if we look well, we can see that there are t variables in the hour, minute and second variables, the variable t serves as a container, as for
getHours,getMinutes,getSecondsfunction to catch the current time. When the time is captured next we will create a code to display the value of the hours, minutes and seconds.
j.innerHTML = jam+":"+menit+":"+detik;
- Based on the above code we will know how the time sequence will be displayed later. Then, outside of the function waktu () we will create a code to send each of the above elements to the id.
var j = document.getElementById("clock");
- then we need a code to run the time function.
setInterval(waktu, 700);
- as for the setinterval it is tasked to perform the work repeatedly based on the value of the specified interval. We can include more than 700 values.
- Now we will create a css code in the html file, while the css code must be between [removed] ... [removed]. And in this program I put the style into the head.
#clock{
font-size : 200%;
color:red;
}
- as we know, in css to indicate that value is an id we use #, font-size above function to set size of writing, And color function to give color to writing.
- this is full code :
<!DOCTYPE html>
<html>
<head>
<title>jam sederhana</title>
<script>
function waktu() {
var t = new Date();
var j = document.getElementById("clock");
var jam = t.getHours();
var menit = t.getMinutes();
var detik = t.getSeconds();
j.innerHTML = jam+":"+menit+":"+detik;
}
var j = document.getElementById("clock");
setInterval(waktu, 700);
</script>
<style>
#clock{
font-size : 200%;
color:red;
}
</style>
</head>
<body>
<div id="clock"></div>
</body>
</html>
This is output :
Posted on Utopian.io - Rewarding Open Source Contributors