<!DOCTYPE html> <html> <title>Web Page Design</title> <head> <script> function sayHello() { document.write("Hello, Coding Ground!"); } sayHello(); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <title>Web Page Design</title> <style> body{ background-image: linear-gradient( to right, crimson , indigo , darkorange ); } #canvas{ margin-left: 20px; margin-right: 0; margin-bottom: 20px; border: thin solid #aaaaaa; cursor: crosshair; padding: 0; } #controls{ margin: 20px 20px 20px 20px; } #rubberbandDiv{ position: absolute; border: 3px solid blue; cursor: crosshair; display: none; } </style> </head> <body> <div id="controls"> <input type="button" id="resetButton" value="Reset" /> </div> <div id="rubberbandDiv"></div> <canvas id="canvas" width="800" height="520"> </canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext("2d"); var rubberbandDiv = document.getElementById("rubberbandDiv"); var resetButton = document.getElementById("resetButton"); var image = new Image(); var mouseDown = {}; var rubberbandRectangle = {}; var dragging = false; image.src = "https://www.4usky.com/data/out/74/164662929-quake-wallpapers.jpg"; function rubberbandStart(x,y) { mouseDown.x = x; mouseDown.y = y; rubberbandRectangle.left = x; rubberbandRectangle.top = y; moveRubberbandDiv(); showRubberbandDiv(); dragging = true; } function rubberbandStretch(x,y) { rubberbandRectangle.left = x < mouseDown.x ? x:mouseDown.x; rubberbandRectangle.top = y < mouseDown.y ? y:mouseDown.y; rubberbandRectangle.width = Math.abs(rubberbandRectangle.left - mouseDown.x), rubberbandRectangle.height = Math.abs(rubberbandRectangle.top+mouseDown.y); moveRubberbandDiv(); resizeRubberbandDiv(); } function rubberbandEnd() { var bbox = canvas.getBoundingClientRect(); try{ context.drawImage(canvas, rubberbandRectangle.left - bbox.left, rubberbandRectangle.top - bbox.top,rubberbandRectangle.width, rubberbandRectangle.height,0,0,canvas.width, canvas.height); } catch(E) { E.printStackTrace(); } resetRubberbandRectangle(); rubberbandDiv.style.width = 0; rubberbandDiv.style.height=0; hideRubberbandDiv(); dragging = false; } function moveRubberbandDiv() { rubberbandDiv.style.top = rubberbandRectangle.top + "px"; rubberbandDiv.style.left = rubberbandRectangle.left + "px"; } function resizeRubberbandDiv() { rubberbandDiv.style.width = rubberbandRectangle.width + "px"; rubberbandDiv.style.height = rubberbandRectangle.height = "px"; } function showRubberbandDiv() { rubberbandDiv.style.display = "inline"; } function hideRubberbandDiv() { rubberbandDiv.style.display = "none"; } function resetRubberbandRectangle() { rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 }; } canvas.onmousedown = function(e){ var x = e.clientX, y = e.clientY; e.preventDefault(); rubberbandStart(x,y); }; window.onmousemove = function(e) { var x = e.clientX; var y = e.clientY; e.preventDefault(); if(dragging){ rubberbandStretch(x,y); } }; window.onmouseup = function(e) { e.preventDefault(); rubberbandEnd(); }; image.onload = function() { context.drawImage(image, 0, 0, canvas.width , canvas.height); }; resetButton.onclick = function(e) { context.clearRect(0,0,context.canvas.width,context.canvas.height); context.drawImage(image,0,0,canvas.width,canvas.height); } </script> </body> </html>
<html> <head> <title>Form Validation</title> <script type = "text/javascript"> <!-- // Form validation code will come here. //--> </script> </head> <body> <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());"> <table cellspacing = "2" cellpadding = "2" border = "1"> <tr> <td align = "right">Name</td> <td><input type = "text" name = "Name" /></td> </tr> <tr> <td align = "right">EMail</td> <td><input type = "text" name = "EMail" /></td> </tr> <tr> <td align = "right">Zip Code</td> <td><input type = "text" name = "Zip" /></td> </tr> <tr> <td align = "right">Country</td> <td> <select name = "Country"> <option value = "-1" selected>[choose yours]</option> <option value = "1">USA</option> <option value = "2">UK</option> <option value = "3">INDIA</option> </select> </td> </tr> <tr> <td align = "right"></td> <td><input type = "submit" value = "Submit" /></td> </tr> </table> </form> </body> </html>
<html> <head> <title>date</title> </head> <body> <script> var dec = new Date(); dec.setDate( dec.getDate() -1) var dec_date=dec.toLocaleDateString(); document.write( 'yesterday-date : '+ dec_date +"<br>") var cur=new Date().toLocaleDateString(); document.write('today-date : '+ cur +"<br>") var inc=new Date() inc.setDate(inc.getDate()+1) var inc_date=inc.toLocaleDateString(); document.write('tomorrow-date : '+ inc_date) </script> </body> </html>
<html> <head> <script type="text/javascript"> <!-- function sayHello() { alert("Hello World") } //--> </script> </head> <style> body{background-color: blue;} </style> <body> <input type="button" onclick="sayHello()" value="Say Hello" /> </body> </html>
<!DOCTYPE html> <html> <title>Web Page Design</title> <head> <script> var weather= prompt("Is the weather cloudy today?"); if(weather== "not cloudy"){ document.write("go out and play"); } else{ document.write("stay at home bro"); } </script> </head> <body> </body> </html>
<html> <body onload = checkscope();> <script type = "text/javascript"> <!-- var myVar = "global"; // Declare a global variable function checkscope( ) { var myVar = "local"; // Declare a local variable document.write(myVar); } //--> </script> </body> </html>
<!DOCTYPE html> <html> <title>Web Page Design</title> <head> <script> function sayHello(str) { let str2= str.split('').reverse().toString().replace(/,/g,''); document.write(str2); } sayHello("Hola"); </script> </head> <body> </body> </html>
<html> <head> <title>Form Validation</title> <script type = "text/javascript"> <!-- // Form validation code will come here. //--> function validate() { if( document.myForm.Name.value == "" ) { alert( "Please provide your name!" ); document.myForm.Name.focus() ; return false; } if( document.myForm.EMail.value == "" ) { alert( "Please provide your Email!" ); document.myForm.EMail.focus() ; return false; } if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) || document.myForm.Zip.value.length != 6 ) { alert( "Please provide a zip in the format #####." ); document.myForm.Zip.focus() ; return false; } if( document.myForm.Country.value == "-1" ) { alert( "Please provide your country!" ); return false; } return( true ); } </script> </head> <body> <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());"> <table cellspacing = "2" cellpadding = "2" border = "1"> <tr> <td align = "right">Name</td> <td><input type = "text" name = "Name" /></td> </tr> <tr> <td align = "right">EMail</td> <td><input type = "text" name = "EMail" /></td> </tr> <tr> <td align = "right">Zip Code</td> <td><input type = "text" name = "Zip" /></td> </tr> <tr> <td align = "right">Country</td> <td> <select name = "Country"> <option value = "-1" selected>[choose yours]</option> <option value = "1">USA</option> <option value = "2">UK</option> <option value = "3">INDIA</option> </select> </td> </tr> <tr> <td align = "right"></td> <td><input type = "submit" value = "Submit" /></td> </tr> </table> </form> </body> </html>
<html> <body> <script type = "text/javascript"> <!-- var book = "maths"; if( book == "history" ) { document.write("<b>History Book</b>"); } else if( book == "maths" ) { document.write("<b>Maths Book</b>"); } else if( book == "economics" ) { document.write("<b>Economics Book</b>"); } else { document.write("<b>Unknown Book</b>"); } //--> </script> <p>Set the variable maths to different value and then try...</p> </body> <html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more