How to Create a Digital Clock in JavaScript?


How to Create a Digital Clock in JavaScript?In JavaScript, Date Object is used to work with date and time. You can create a digital clock in JavaScript for your web page manipulating date object easily.  The Date object automatically hold the current date and time as its initial value. You can extract Hours, Minutes and Seconds from it, to create and display time on Digital Clock. I have presented here a simple and  easy to use JavaScript code to make a digital clock program. Feel free to use this code to add a digital clock on your web page or your web application.


Here I have defined a Date object with the new  keyword, new Date() to define the date object and extracted Hours, Minutes and Seconds using functions getHours(), getMinutes() and getSeconds() respectively and given codes for a simple clock having 24 hours format and a clock along with AM or PM.


JavaScript code for creating a simple digital clock


<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()


//to add a zero in front of numbers<10

m=checkTime(m)
s=checkTime(s)

document.getElementById('clock').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()', 500)
}

function checkTime(i)
{
if (i<10)
{ i="0" + i}
return i
}

window.onload=startTime;

</script>
<div id="clock" style="font-size:35px;color:#00aaff;text-shadow:2px 2px 2px blue;
border:3px groove blue;background-color:#aaffaa; width:195px; height:40px"></div>


checkTime() function is used here to add zero in front of numbers less then 10 and executed the function 'startTime()' using window.onload. Here is a inline css code to design the clock, you can change its values according to your wish. If you want to use the css in separate css file and link to your web page, you can write the css as follows on distinct css file.
#clock{

font-size:35px;
color:#00aaff;
text-shadow:2px 2px 2px blue;
border:3px groove blue;
background-color:#aaffaa;
width:195px;
height:40px;

}


JavaScript code for creating a digital clock with AM or PM


<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
var ap="AM";

//to add AM or PM after time

if(h>11) ap="PM";
if(h>12) h=h-12;
if(h==0) h=12;

//to add a zero in front of numbers<10

m=checkTime(m)
s=checkTime(s)

document.getElementById('clock').innerHTML=h+":"+m+":"+s+" "+ap
t=setTimeout('startTime()', 500)
}

function checkTime(i)
{
if (i<10)
{ i="0" + i}
return i
}

window.onload=startTime;

</script>

<div id="clock" style="font-size:35px;color:#00aaff;text-shadow:2px 2px 2px blue;
border:3px groove blue;background-color:#aaffaa; width:195px; height:40px"></div>


In the above code, variable ap is added to make the clock 12 hour format and to add "AM" or "PM" after the time and added this variable at innerHTML of clock element.


Preview of digital clock created with JavaScript







Related Posts


What are the Different Ways to Redirect Page in JavaScript?


Different Ways to Redirect Page in JavaScript
When you click on a link or type the URL to go to one page but sometimes it may go to another page internally due to page redirection on that page. There may be several reasons to redirect to a new page from the original page. The reasons you may want redirection are to redirect from your old domain to new domain, to redirect visitors from mobile device to the mobile site, to redirect to the visitors from different countries to their respective country level domain URL and many more.You can use temporary or permanent redirection methods to redirect from on page to another page. The permanent redirection is server side redirection and temporary redirection in client side redirection.

Using JavaScript you can do client side redirection, however it is not preferred method for page redirection, a search engine may ignore JavaScript redirection. Do not use this feature to spam the search engine, if such you may band from search engine. Here are given different redirection methods and their purpose to redirect from one page to another page in JavaScript, you may use any one of them according to your circumstance.


Simple JavaScript Redirection to Another Page


1. Using window.location method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location="http://www.newpage.com";
</script>

2. Using window.location.href method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location.href="http://www.newpage.com";
</script>

3. Using window.location.assign method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location.assign="http://www.newpage.com";
</script>

4. Using window.location.replace method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location.replace="http://www.newpage.com";
</script>


JavaScript Redirect to Another Page After 'x' Seconds


1. Using onLoad method: Use these scripts in body tag to redirect to another page after '5' seconds.

<body onLoad="setTimeout(location.href='http://www.newpage.com', '5000')">


2. Using Redirect function: Use these scripts in the head section to redirect to another page after '5' seconds with redirection message.

<script type="text/javascript">
 
function Redirect()
{
 window.location="http://www.newpage.com";
}
document.write("You will be redirected to a new page in 5 seconds");
setTimeout('Redirect()', 5000);
 
</script>
 
 


JavaScript Redirect to Another Page On Load



1. Using onLoad method: Use these scripts in body tag to redirect to another page on load.

<body onLoad="setTimeout(location.href='http://www.newpage.com', '0')">


2. Using a function: Use these scripts in the head section to redirect to another page on load.

<script type="text/javascript">
 
function Redirect()
{
 window.location="http://www.newpage.com";
}
setTimeout('Redirect()', 0);
 
</script>


JavaScript Redirect to Another Page On Click


1. Using a function: Use these scripts in the head and body section to redirect to another page on button click.

<head>
<script>
function myButton()
{
window.location="http://www.siteforinfotech.com";
}
</script>
</head>
<body>
<button onclick="myButton()">Click me</button>
</body>


JavaScript Redirect to Another Page Passing Variables


1. Using a function: Use these scripts in the body section to redirect to another page on button click with passing the value of text box.

<body>
<form action="/search">
Enter your search text: <input type="text" id="searchtext" name="q">
&nbsp;<input onclick="myFunction()" type="submit" value="Search It" /></form>
<script>
function myFunction()
{
var search = document.getElementById("searchtext").value;
window.location = '/search?q='+search;
}
</script>
</body>

Enter your search text:  



Related Posts


How to Detect Visitor's Browser Using JavaScript?


How to Detect Visitor's Browser Using JavascriptYou can detect which and what version of browser have used by your website visitors by using simple JavaScript codes. The navigator object in JavaScript contains information about the visitor's browser. It includes information about the visitor's browser name, browser version and more. It can be very useful to detect the visitor's browser type and version, and then serve up the appropriate information. By using this feature in JavaScript, it is easier to make your web pages smart enough to look one way to some browsers and another way to other browsers. But it may not be work for some browsers, specially for older browsers, which do not support JavaScript.

Here are some steps and codes for detecting visitor's browser using JavaScript, it may help you to apply this feature in your website.



Code for Detecting Visitor's Browser and Browser Version Using JavaScript


<script type="text/javascript">
var x=navigator

document.write("Name=" + x.appName)
document.write("<br/>")
document.write("Version=" + x.appVersion)
document.write("<br/>")
document.write("CookieEnabled=" + x.cookieEnabled)
document.write("<br/>")
document.write("BrowserLanguage=" + x.browserLanguage)
document.write("<br/>")
document.write("SystemLanguage=" + x.systemLanguage)
document.write("<br/>")
document.write("UserLanguage=" + x.userLanguage)
</script>

Where: 

  • appName - It holds the application name of the browser.
  • appVersion - It holds the version of the application and other things.
  • cookieEnabled - It checks whether or not cookie is enabled.
  • browserLanguage - It holds the browser Language.
  • systemLanguage - It holds the system Language.
  • userLanguage - It holds the user Language.



Output of the Code for Detecting Visitor's Browser and Browser Version 





Example: Alert user for older browser



You can alert or inform the visitor of  your website by using navigator object in JavaScript as the following. Here in the given code, the browsers below the version 4 are treated as older browser and displays the message. You can also add the links to download the latest version of browsers. 

<script type="text/javascript">

var browser= x.appName
var version = parseFloat(x.appVersion)

if((browser="Netscape" || browser=="Microsoft Internet Explorer") && (version>=4))

{document.write("Your browser is good enough!")
document.write("<br/>")}

else
{document.write("Your browser is old Update browser!")
document.write("<br/>")}

</script>

Output of the above Code  





Related Posts

How to Create Pop Up Menus in Oracle Forms ?


Pop Up menus are those, which are displayed on the screen when we right click on it. Pop Up menu makes any application easier to use it. In Oracle Forms also we can make pop up menus to add different menu items for the operating form.  The items for operations such as inserting, saving, deleting and navigating records can be included in the pop up menu. Here I have written some steps for creating pop up menus in Oracle Forms along with their screenshots.

Pop Up Menus in Oracle Forms

Steps for Creating Pop Up Menus 



1. At first create a form as the post "How to Create Oracle Forms by Using Wizard ?"  .  Click on Pop Up option in object navigator, Click on plus + sign and rename the menu name. Right click on menu name and click on Menu Editor. Add the new items by clicking on plus down and plus right buttons as given below.



Menu Editor for Pop Up Menus in Oracle Forms


2. Add the items as given in the image below.  


Menu Editor for Pop Up Menus in Oracle Forms



3. Right click on menu items on the object navigator and click on PL/SQL Editor option. Write PL/SQL queries On the PL/SQL Editor window as given below. 

PL/SQL Editor for Pop Up Menus in Oracle Forms

 4. Add the following PL/SQL queries in the PL/SQL editor for respected items.
  • PREVIOUS:           previous_record;
  • NEXT:                  next_record;
  • FIRST:                  first_record;
  • LAST:                   last_record;
  • INSERT:               create_query;
  • CONDITION:        enter_query;
  • SAVE:                  commit;
  • DELETE:              delete_record;
  • EXIT:                  exit_form;

5. For adding Menu Item Type as Separator, go to Property Palette by right clicking on menu item and clicking on Property Palette option. Select Separator on Menu Item Type property under Functional property.


Property Palette for Pop Up Menus in Oracle Forms

6. For assigning Pop Up menu on the form, right click on canvas and click on Property Palette option. From Popup Menu option under Functional property select the Popup Menu name as in the image below.


Property Palette for Pop Up Menus in Oracle Forms

7. Save, Compile and Run the form. You can view the Popup menu while right clicking on form area.




Related Posts:



How to Insert, Navigate and Delete Records in Oracle Forms ?


I have already described in my previous posts about creating oracle forms using wizards and creating list of values (LOVs). In this post I am going to describe How to create buttons for Inserting, Saving, Navigating and Deleting records in oracle forms. Insertion, Deletion and Navigation functions are necessary for manipulating data within forms whether it is greed line view or form view or any other format. You can add those buttons by simply adding push buttons from toolbox to the form and adding PL/SQL query in the button trigger using PL/SQL editor. Here are some steps for adding buttons on the form.


 Steps for creating Insertion, Navigational and Deletion Buttons 


1. At first create a form as given in the post "How to Create Oracle Forms by Using Wizard ?"  then start to add the buttons on the form as given in the image below.

creating Insertion, Navigational and Deletion Buttons

2. Add push buttons in the form area from toolbox by clicking on it and drawing on the form. Then give a new name and label name as given in the image below from the Property Palette. You can open the Property Palette by right clicking on the button and clicking on Property Palette option.

Insert, Navigate and Delete Records in Oracle Forms

3. After renaming and labeling the buttons, go to Object Navigator and expand the button name by clicking on the plus sign, then click on Triggers option and click on + sign above to add new trigger. Find and select "WHEN-BUTTON-PRESSED" option and click on OK.

Using Triggers in Oracle Forms

4. A new PL/SQL editor window will appear as given below. Type the required query, save it and exit from the window. Repeat the same process for all the buttons you have created. The query commit; given in the image below is for saving records in the database.

PL/SQL editor window in Oracle Forms

5. Add the following PL/SQL queries in the PL/SQL editor for respected buttons.
  • Show Record:       execute_query;
  • Previous Record:  previous_record;
  • Next Record:        next_record;
  • First Record:        first_record;
  • Last Record:         last_record;
  • Insert Record:      create_query;
  • Condition:            enter_query;
  • Save:                    commit;
  • Delete:                 delete_record;
  • Exit Form:           exit_form;

6. After completing all the steps, run that form and test the buttons whether or not they are working.


 

Related Posts:


How to Create LOV in Oracle Forms Using Wizard ?


LOV in Oracle FormsLOV (List of Values) in Oracle Forms are used to display the associated values while inserting values in forms. It makes the user easier to enter data on the forms. You can assign values in LOV statically or dynamically and can be displayed on the form manually or automatically. Filters can also be added on LOV to filter before display the list. Here I am writing some easy steps for creating List of Values in Oracle Forms using wizard. It may help you to learn the process of creating LOV in your Oracle Form.




Steps for Creating LOV in Oracle Forms Using Wizard



1. To add a new List of Values, at first go to Object Navigator and click on LOVs option and click on + sign above, then the following dialog box will appear.

How to Create LOV in Oracle Forms Using Wizard ? -add LOV

2. Select the option "Use the LOV Wizard" to create from Wizard.

How to Create LOV in Oracle Forms Using Wizard ? -New Record Group

 3. Select the option "New Record Group base on query" to create new record group or select "Existing Record Group" to use existing Record Group and got to next.

How to Create LOV in Oracle Forms Using Wizard ? -Connect Database

4. Click on Build SQL Query button, give User Name, Passport and Database name and connect to the Database. Select the required Table from where you want to take the values.

How to Create LOV in Oracle Forms Using Wizard ? -Select Table

5. Select the Columns which you want to display in the list and click on OK. Select all the columns on the LOV columns and go to next.

How to Create LOV in Oracle Forms Using Wizard ? -Select Columns

6. Give the title what you would like to display in LOV window. Also select width, height and position of the LOV window.

How to Create LOV in Oracle Forms Using Wizard ? -Add Title

7. Give the no of rows you want to display in LOV and select the check box having "Let the user filter records before displaying them", if you want to display the records with filter. Go to next and finish the wizard. Now the LOV is successfully created.


How to Assign Value of LOV to the Column ?


1. Right click on LOV name and go to property palette.

How to Create LOV in Oracle Forms Using Wizard ? -Property Palette

2. Under functional property go to column mapping properties, select the required column and click on browse and select the column to assign.

How to Create LOV in Oracle Forms Using Wizard ? -Lov Column mapping

How to Display LOV Automatically on the Form ?


1. Under functional property of property palette, go to "Automatic Display" option and change to "Yes".

How to Create LOV in Oracle Forms Using Wizard ? -Automatic Display

2. Go to "Automatic Skip" option and change to "Yes" to go to the next navigation automatically. 

How to Create Oracle Forms by Using Wizard ?


Oracle Forms Developer
Oracle Forms is a technology developed by Oracle to develop database driven web applications quickly and easily. It is a component of Oracle Fusion Middleware Technology of Oracle corporation. By using Oracle Forms you can develop even advanced web applications more easily. While developing web applications, you can use graphical methods such as wizards for faster development. Here are some easy steps with screenshots for developing oracle forms by using wizard.

Steps for Creating Oracle Forms by Using Wizard



1. At first start Weblogic Server by clicking on Start Weblogic Server option under Oracle Forms of Oracle Instance from start menu.

How to Create Oracle Forms by Using Wizard ? -Start Weblogic

2. Give your weblogic username and password.
3. Start form builder application from the start menu, which is located under Developer Tools of oracle instance folder.

How to Create Oracle Forms by Using Wizard ? - Start Oracle Form

4. After opening form builder application, Click on data block option and click on + sign above under forms module of Object Navigator.


 5. Click on "Use the Data Block Wizard" option to create a form by using wizard.

How to Create Oracle Forms by Using Wizard ? - New Data Block

  6. Click on "Table or View" option to create from Table or View.

How to Create Oracle Forms by Using Wizard ? - Data Block

7. Click on "Browse" button to open Table or View. Give User name, Password and Database name to connect to the database.

How to Create Oracle Forms by Using Wizard ? - Connecting Database


8. After configuring the Data Block, Click on "Create the data block, then call the Layout Wizard" option and finish the wizard.

How to Create Oracle Forms by Using Wizard ? - Finish Data Block

9. Select "New Canvas" option from the combo box to create New Canvas to locate data blocks physically.

How to Create Oracle Forms by Using Wizard ? - Create Canvas

10. Specify the required Width and Height of the fields.


 11. Give the Title of the Frame, Number of Records to be Displayed and the Distance Between Records.

How to Create Oracle Forms by Using Wizard ? - No of Records

 12. After completing the wizard click on Finish to finish the wizard. Then you can view the design view as below.

How to Create Oracle Forms by Using Wizard ? -Form Design View

 13. Run the form to view this form in browser.




Related Posts: