Popup Window onClick:
<!DOCTYPE html>
<title>My Example</title>
<input id="go" type="button" value="Open new window" onclick="window.open('http://noterring.blogspot.com/p/javascript.html','popUpWindow','height=500, width=400, left=100, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes');">
To See Output Copy The Whole Code And Past HERE
<title>My Example</title>
<input id="go" type="button" value="Open new window" onclick="window.open('http://noterring.blogspot.com/p/javascript.html','popUpWindow','height=500, width=400, left=100, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes');">
To See Output Copy The Whole Code And Past HERE
Popup Window Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Put the button into a variable
var e = document.getElementById("go");
// Wait for user to click the button
e.addEventListener("click", function() {
// Get the URL from the user input
var url = document.getElementById("url").value;
// Do the popup window
window.open(url,"popUpWindow","height=500, width=400, left=100, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes");
}, false);
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="popupForm" action="{action page}">
<input name="url" id="url" value="http://noterring.blogspot.com/p/javascript.html">
<input name="go" id="go" type="button" value="Go">
</form>
To See Output Copy The Whole Code And Past HERE
Timed Redirect onClick:
<!DOCTYPE html>
<title>My Example</title>
<input type="button" value="Go" onclick="window.setTimeout(function(){location.href = 'http://noterring.blogspot.com/p/javascript.html';}, 1500);">
To See Output Copy The Whole Code And Past HERE
Timed Redirect Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Put the button into a variable
var e = document.getElementById("go");
// Wait for user to click the button
e.addEventListener("click", function() {
var redirectURL = document.getElementById("url").value;
var redirectDelay = document.getElementById("delay").value;
// Do the timed redirect
window.setTimeout(function(){
location.href = redirectURL;
}, redirectDelay);
}, false);
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
<input name="url" id="url" value="http://noterring.blogspot.com/p/javascript.html">
<input name="delay" id="delay" type="number" value="1500">
<input name="go" id="go" type="button" value="Go">
</form>
To See Output Copy The Whole Code And Past HERE
Refresh Page onClick:
<!DOCTYPE html>
<title>My Example</title>
<input type="button" value="Refresh Page" onclick="document.location.reload(true);">
<!-- Test the refresh by outputting the time in milliseconds -->
<script>
document.write(new Date().getTime());
</script>
To See Output Copy The Whole Code And Past HERE
<title>My Example</title>
<input type="button" value="Refresh Page" onclick="document.location.reload(true);">
<!-- Test the refresh by outputting the time in milliseconds -->
<script>
document.write(new Date().getTime());
</script>
To See Output Copy The Whole Code And Past HERE
Refresh Page Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Put the button into a variable
var e = document.getElementById("go");
// Wait for user to click the button
e.addEventListener("click", function() {
// Refresh current page
document.location.reload(true);
}, false);
// Test the refresh by outputting the time in milliseconds
document.getElementById("timestamp").innerText = new Date().getTime();
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
<input name="go" id="go" type="button" value="Refresh">
</form>
<p><span id="timestamp"></span> milliseconds since midnight, January 1, 1970.</p>
To See Output Copy The Whole Code And Past HERE
Refresh Page Automatically:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Do the automatic refresh
window.setTimeout(function(){
document.location.reload(true);
}, 3500);
// Test the refresh by outputting the time in milliseconds
document.getElementById("timestamp").innerText = new Date().getTime();
});
</script>
<p><span id="timestamp"></span> milliseconds since midnight, January 1, 1970.</p>
To See Output Copy The Whole Code And Past HERE
Alert Box onClick:
<!DOCTYPE html>
<title>My Example</title>
<input type="button" value="Click me" onclick="alert('Thanks... I feel much better now!');">
To See Output Copy The Whole Code And Past HERE
Alert Box Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Put the button into a variable
var e = document.getElementById("go");
// Wait for user to click the button
e.addEventListener("click", function() {
// Do the alert box
alert("Thanks... I feel much better now!");
}, false);
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
<input id="go" type="button" value="Click me">
</form>
Confirmation Box onClick:
<!DOCTYPE html>
<title>My Example</title>
<input id="go" type="button" value="Click me" onclick="confirm('Are you sure?');">
To See Output Copy The Whole Code And Past HERE
Confirmation Box Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Put the button into a variable
var e = document.getElementById("go");
// Wait for user to click the button
e.addEventListener("click", function() {
confirm("Are you sure?");
}, false);
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
<input id="go" type="button" value="Click me">
</form>
To See Output Copy The Whole Code And Past HERE
Jump Menu with Conditional Confirmation Box Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Put the drop down into a variable
var e = document.getElementById("jumpmenu");
// Wait for user to select an option
e.addEventListener("change", function() {
// Put the selected value into a variable
selectedURL = this.options[this.options.selectedIndex].value;
// Check that the value is not null
if (this.value != "null") {
// Display the confirm box and put the response into a variable
var confirmLeave = confirm("Are you sure?");
// If user clicked "OK"
if (confirmLeave==true) {
// Load the selected URL
document.location.href = selectedURL;
}
// If user clicked "Cancel"
else {
return false;
}
}
});
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="navForm" action="{action page}">
<select name="jumpmenu" id="jumpmenu">
<option>Jump to...</option>
<option value="http://noterring.blogspot.com/p/html.html">HTML</option>
<option value="http://noterring.blogspot.com/p/css.html">CSS</option>
<option value="http://noterring.blogspot.com/p/javascript.html">JAVASCRIPT</option>
</select>
</form>
To See Output Copy The Whole Code And Past HERE
Basic Prompt - onClick:
<!DOCTYPE html>
<title>My Example</title>
<input id="go" type="button" value="Click me" onclick="prompt('What is your name?', 'Homer');">
To See Output Copy The Whole Code And Past HERE
Basic Prompt Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Put the button into a variable
var e = document.getElementById("go");
// Wait for user to click the button
e.addEventListener( "click", function() {
// Do the prompt and save user input to a variable
var name = prompt("What is your name?","Homer");
// Write out the user's input
document.getElementById( "msg" ).innerText = name;
}, false);
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<input id="go" type="button" value="Click me">
<p id="msg"></p>
To See Output Copy The Whole Code And Past HERE
Conditional Prompt Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var e = document.getElementById("go");
e.addEventListener( "click", function() {
var name=prompt("What is your name?","Homer");
if ( name!=null && name!="" ) {
output = "Well " + name + ". You seem very daring!";
}
else {
output = "Hey, I asked you your name!";
}
document.getElementById( "msg" ).innerText = output;
}, false);
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
<input id="go" type="button" value="I dare you to click me!">
</form>
<p id="msg"></p>
To See Output Copy The Whole Code And Past HERE
"Print this Page" onClick:
<!DOCTYPE html>
<title>My Example</title>
<input id="go" type="button" value="Print this Page" onclick="window.print();">
To See Output Copy The Whole Code And Past HERE
"Print this Page" Unobtrusive:
<!DOCTYPE html>
<title>My Example</title>
<script>
// Wait for DOM to load
document.addEventListener("DOMContentLoaded", function(event) {
// Put the button into a variable
var e = document.getElementById("print");
// Wait for user to click the button
e.addEventListener("click", function() {
window.print();
}, false);
});
</script>
<!-- Replace '{action page}' with your own action page to support non-JavaScript users -->
<form name="myForm" action="{action page}">
<input id="print" type="button" value="Print this Page">
</form>
To See Output Copy The Whole Code And Past HERE
Current Date/Time:
<!DOCTYPE html>
<title>My Example</title>
<time id="msg"></time>
<script>
document.getElementById("msg").innerHTML = Date();
</script>
To See Output Copy The Whole Code And Past HERE
Current Date/Time Locale String:
<!DOCTYPE html>
<title>My Example</title>
<time id="msg"></time>
<script>
document.getElementById("msg").innerHTML = new Date().toLocaleString();
</script>
To See Output Copy The Whole Code And Past HERE
Current Date/Time - Locale String with Locale :
<!DOCTYPE html>
<title>My Example</title>
<script>
// Put current date into a variable
var date = new Date();
// Some locale examples
document.open();
document.write(
"<p>" + date.toLocaleString('en-US')
+ "<p>" + date.toLocaleString('en-GB')
+ "<p>" + date.toLocaleString('en-AU')
+ "<p>" + date.toLocaleString('en-NZ')
+ "<p>" + date.toLocaleString('th')
+ "<p>" + date.toLocaleString('cs')
+ "<p>" + date.toLocaleString('de')
+ "<p>" + date.toLocaleString('af')
+ "<p>" + date.toLocaleString('el')
+ "<p>" + date.toLocaleString('da')
+ "<p>" + date.toLocaleString('ko')
+ "<p>" + date.toLocaleString('ar')
+ "<p>" + date.toLocaleString('es')
+ "<p>" + date.toLocaleString('fr')
+ "<p>" + date.toLocaleString('vi')
+ "<p>" + date.toLocaleString('zh')
+ "<p>" + date.toLocaleString('ja')
);
document.close();
</script>
To See Output Copy The Whole Code And Past HERE
Current Date MM/DD/YYYY:
<!DOCTYPE html>
<title>My Example</title>
<time id="date"></time>
<script>
/*
Create a JavaScript Date object for the current date and time,
then extract the desired parts, then join them again in the desired format.
*/
var currentDate = new Date(),
day = currentDate.getDate(),
month = currentDate.getMonth() + 1,
year = currentDate.getFullYear(),
date = day + "/" + month + "/" + year;
// Output the date to the above HTML element
document.getElementById("date").innerHTML = date;
</script>
To See Output Copy The Whole Code And Past HERE
Current Date DD/MM/YYYY:
<!DOCTYPE html>
<title>My Example</title>
<time id="date"></time>
<script>
/*
Create a JavaScript Date object for the current date and time,
then extract the desired parts, then join them again in the desired format.
*/
var currentDate = new Date(),
day = currentDate.getDate(),
month = currentDate.getMonth() + 1,
year = currentDate.getFullYear(),
date = day + "/" + month + "/" + year;
// Output the date to the above HTML element
document.getElementById("date").innerHTML = date;
</script>
To See Output Copy The Whole Code And Past HERE
Current Time 24hr:
<!DOCTYPE html>
<title>My Example</title>
<time id="time"></time>
<script>
/*
Create a JavaScript Date object for the current date and time,
then extract the desired parts, then join them again in the desired format.
*/
var currentTime = new Date(),
hours = currentTime.getHours(),
minutes = currentTime.getMinutes();
// Add a leading zero if needed
if (minutes < 10) {
minutes = "0" + minutes;
}
// Join the parts
time = hours + ":" + minutes;
// Output the result to the above HTML element
document.getElementById("time").innerHTML = time;
</script>
To See Output Copy The Whole Code And Past HERE
Current Time 12hr:
<!DOCTYPE html>
<title>My Example</title>
<time id="time"></time>
<script>
/*
Create a JavaScript Date object for the current date and time,
then extract the desired parts, then join them again in the desired format.
*/
var currentTime = new Date(),
hours = currentTime.getHours(),
minutes = currentTime.getMinutes();
// Add a leading zero if needed
if (minutes < 10) {
minutes = "0" + minutes;
}
// Add suffix and adjust hours for 12hr time if required
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
// Join the parts
time = hours + ":" + minutes + " " + suffix;
// Output the result to the above HTML element
document.getElementById("time").innerHTML = time;
</script>
To See Output Copy The Whole Code And Past HERE
Current Date Long Format(e.g. Saturday, November 26, 2016):
<!DOCTYPE html>
<title>My Example</title>
<time id="msg"></time>
<script>
// Create a JavaScript Date object for the current date and time, and set the desired options.
var date = new Date(),
options = { weekday: "long", month: "long", day: "numeric", year: "numeric" };
// Convert to locale string and add a locale and the options
date = date.toLocaleString( "en-US", options );
// Output the date to the above HTML element
document.getElementById("msg").innerHTML = date;
</script>
To See Output Copy The Whole Code And Past HERE
Current Date Short Format(e.g. Sat, Nov 26, 16):
<!DOCTYPE html>
<title>My Example</title>
<time id="msg"></time>
<script>
// Create a JavaScript Date object for the current date and time, and set the desired options.
var date = new Date(),
options = { weekday: "short", month: "short", day: "numeric", year: "2-digit" };
// Convert to locale string and add a locale and the options
date = date.toLocaleString( "en-US", options );
// Output the date to the above HTML element
document.getElementById("msg").innerHTML = date;
</script>
To See Output Copy The Whole Code And Past HERE
Nested "For" Loop:
<!DOCTYPE html>
<title>My Example</title>
<p id="msg"></p>
<script>
// Set variables
var output = "";
// Outer loop
for (i = 1; i <= 10; i++) {
output += "<h1>" + i + " times table</h1>";
output += "<ul>";
// Inner loop
for (j = 1; j <= 10; j++) {
output += "<li>" + j + " x " + i + " = " + j * i;
}
output += "</ul>";
}
// Output results to the above HTML element
document.getElementById("msg").innerHTML = output;
</script>
To See Output Copy The Whole Code And Past HERE
Nested "While" Loop:
<!DOCTYPE html>
<title>My Example</title>
<p id="msg"></p>
<script>
// Set variables
var i = 1;
var output = "";
// Outer loop
while (i <= 10) {
output += "<h1>" + i + " times table</h1>";
output += "<ul>";
// Inner loop
var j = 1;
while (j <= 10) {
output += "<li>" + j + " x " + i + " = " + j * i;
j++;
}
i++;
output += "</ul>";
}
// Output results to the above HTML element
document.getElementById("msg").innerHTML = output;
</script>
To See Output Copy The Whole Code And Past HERE
No comments:
Post a Comment
Hey, It's Been Grabbed