Wednesday, October 30, 2013

How to Add a Simple JavaScript Clock in SharePoint 2013

Hi All,
Welcome to the SharePoint Bin. Hope you all find something useful in the bin. :)

OK. Let's get started. Today I am going to show you the simplicity and the flexibility offered by the SharePoint 2013. I will walk you through step by step about how to show a simple JavaScript clock in a SharePoint Page. First you need to have a SharePoint Online on Microsoft Office 365 or SharePoint 2013 On-Premises installation for testing this.


STEP 01 :


Go to the site page which you need to add your JavaScript clock. Click on the 'Edit' button at the top right corner of the page as illustrated in Figure 01.



STEP 02 :

After enter into the edit mode of the page, put your cursor somewhere on the page as indicated in figure 02.




STEP 03 :

Click on the 'Insert' tab on the ribbon and click on 'embed code' button as illustrated on figure 03.

Figure 03

STEP 04 :

Now here you can add JavaScript code for the clock. 


Figure 04


So insert following code to the text box and click insert button.
<h1 id="id1">your clock is here</h1>


<script type="text/javascript">

window.setInterval(function(){document.getElementById("id1").innerHTML=new Date().toLocaleTimeString();},1000);

</script> 






STEP 05 : 

Now you can see your clock is running in the edit mode of the page.


STEP 06 :


Now click Save button on the top right corner of the page to exit edit mode.




STEP 07 :

Now you have a Simple JavaScript Clock running on your page.



As I demonstrated here, you can use your HTML and JavaScript knowledge to embed various useful items to SharePoint pages without any complex procedures. 

No comments:

Post a Comment