Create Clock in javascript

<HTML> <HEAD> <TITLE> Clock </TITLE> <SCRIPT LANGUAGE=”JavaScript”> function dateTime() { var now = new Date(); var result = now.toLocaleString(); var tzOffset=-now.getTimezoneOffset()/60; if(tzOffset<0) result += ” (GMT “+tzOffset+” hours)”; else result += ” (GMT +”+tzOffset+” hours)”; return result; } function tick() { document.forms[0].clock.value=dateTime() setTimeout(“tick()”,1000) } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT NAME=”clock” TYPE=”TEXT” SIZE=”50″ VALUE=”&{dateTime()};”> </FORM> <SCRIPT

Hidden Attribute in javascript

<!DOCTYPE HTML> <html> <head> <script> var toggleHidden = function() { var elem = document.getElementById(“toggle”); if (elem.hasAttribute(“hidden”)) { elem.removeAttribute(“hidden”); } else { elem.setAttribute(“hidden”, “hidden”); } } </script> </head> <body> <button onclick=”toggleHidden()”>Click</button> <table> <tr><th>Country</th><th>Capital</th></tr> <tr><td>India</td><td>New Delhi</td></tr> <tr id=”toggle” hidden><td>United States</td><td>Washington D.C.</td> </tr> <tr><td>New Zealand</td><td>Wellington</td></tr> </table> </body> </html>

Hide mouse on canvas in Javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.9.1.js’></script> <style type=’text/css’> canvas{border:1px solid red;} </style> <script type=’text/javascript’> $(window).load(function(){ $(“#theCanvas”).click(function () { alert(“You clicked the canvas with an invisible mouse!”); $(“#theCanvas”).css(“cursor”, “none”); }); }); </script> </head> <body> <p”>Click the red canvas and I’ll hide the cursor when you are over me</p> <canvas id=”theCanvas”></canvas> </body> </html>

Create Count Down Timer in Javascript

In this simple code you can create count down timer in just few step . <span id=”countdown” class=”timer”></span> <script> var seconds = 20;  // change time in second function secondPassed() { var minutes = Math.round((seconds – 30)/60); var remainingSeconds = seconds % 60; if (remainingSeconds < 10) { remainingSeconds = “0” + remainingSeconds; } document.getElementById(‘countdown’).innerHTML

Set Box with Shadow in javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.8.3.js’></script> <script type=’text/javascript’> $(window).load(function(){ var canvas=document.getElementById(“canvas”); var ctx=canvas.getContext(“2d”); ctx.rotate(.6); ctx.rect(150, 50, 50, 60); ctx.shadowOffsetX = 50; ctx.shadowOffsetY = 50; ctx.shadowBlur = 5; ctx.shadowColor = “DarkGoldenRod”; ctx.strokeStyle = “Gold”; ctx.stroke(); }); </script> </head> <body> <canvas id=”canvas” width=300 height=300></canvas> </body> </html>

Add close button to dialog in website

<!DOCTYPE html> <html> <head> <script type=’text/javascript’> window.onload=function(){ Dialog_header.onclick = function(e) { $(“#Dialog”).fadeOut(500); }; Button1.onclick = function(e) { var $dialog = $(“#Dialog”); if (!$dialog.hasClass(‘ui-dialog’)) { $dialog.page(); } $dialog.fadeIn(500); }; Button2.onclick = function() { $(“#Dialog”).fadeOut(500); }; } </script> <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css” /> <script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script> <script src=”http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js”></script> </head> <body> <div data-role=”page” id=’Page1′> <div data-role=’button’ id=”Button1″>Open Dialog</div> </div> <div

Create Input Type Date in Javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’></script> <script type=’text/javascript’ src=”http://code.jquery.com/mobile/latest/jquery.mobile.min.js”></script> <link rel=”stylesheet” type=”text/css” href=”http://code.jquery.com/mobile/latest/jquery.mobile.min.css”> </head> <body> <div data-role=”page”> <div data-role=”content”> <input type=”date” /> </div> </div> </body> </html>

Config Loading widget in javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’> window.onload=function(){ $(document).on(“click”, “.show”, function () { $.mobile.loading(“show”); }); $(document).on(“click”, “.hide”, function () { $.mobile.loading(“hide”); }); } </script> <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css” /> <script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script> <script> $(document).on(“mobileinit”, function() { $.mobile.loader.prototype.options.text = “Please wait..”; $.mobile.loader.prototype.options.textVisible = true; $.mobile.loader.prototype.options.theme = “e”; $.mobile.loader.prototype.options.html = “”; }); </script> <script src=”http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js”></script> </head> <body> <button class=”show” data-inline=”true”

Create Flip switch in Javascript

<!DOCTYPE html> <html> <head> <script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.9.1.js’></script> <script type=”text/javascript” src=”http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js”></script> <link rel=”stylesheet” type=”text/css” href=”http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css”> <script type=’text/javascript’> $(window).load(function(){ $(document).delegate(“#submit”, “vclick”, function() { alert($(“#flip-1″).val()); }); }); </script> </head> <body> <label for=”flip-1″>Flip switch:</label> <select name=”flip-1″ id=”flip-1″ data-role=”slider”> <option value=”off”>Off</option> <option value=”on”>On</option> </select> <button id=”submit”>Submit</button> </body> </html>