js decoding and encoding.html
The code copy is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript encoding and decoding</title>
<script type="text/javascript">
function gel(id) {
return document.getElementById(id);
}
window.onload = function() {
//alert(document.getElementById("span1").innerHTML
gel("btn1").onclick = function() {
alert(encodeURI(gel("span1").innerHTML));
};
gel("btn2").onclick = function() {
alert(decodeURI(gel("span1").innerHTML));
};
};
</script>
</head>
<body>
<span id="span1">The three heroes of the crazy man are rising!</span>
<input type="button" id="btn1" value="encoded" />
<input type="button" id="btn2" value="Decoded" />
</body>
</html>
Use of setInterval and setTimeout in js.html
The code copy is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Using setInterval and setTimeout in js</title>
<script type="text/javascript">
var time = 10;
var id = 0;
function gel(id) {
return document.getElementById(id);
}
function dectime() {
if (time > 0) {
time--;
gel("timespan").innerHTML = time;
} else {
//Clear the hour hand
clearInterval(id);
}
}
window.onload = function() {
id = setInterval(dctime, 1000);
};
</script>
</head>
<body>
<span >Countdown<span id="timespan" style="color: red;"></span>seconds</span>
</body>
</html>
js check whether the input is a number.html
The code copy is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js check whether the input is a number</title>
<script type="text/javascript">
window.onload= function() {
document.getElementById("btn1").onclick = function() {
var i = prompt("Enter the value to be judged");
//window.alert(i);
if (!isNaN(i)) {
window.alert("is number");
} else {
window.alert("not a number");
}
};
}
</script>
</head>
<body>
<input type="button" id="btn1" value="judge number" />
</body>
</html>
js dynamically obtain, create and delete nodes.html
The code copy is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js dynamically obtain, create and delete nodes</title>
<script type="text/javascript">
function gel(id) { return document.getElementById(id); }
window.onload = function () {
gel("btnProAdd").onclick = function () {
//Add child nodes under proList
var linew = document.createElement("li");
linew.innerHTML = prompt("Enter the province to be added");
gel("proList").appendChild(linew);
//Rebound all click-and-delete events
DelLiOnClick();
};
//Double-click the li child node and delete it
function DelLiOnClick() {
//1. First get all the child nodes
var liNodes = gel("proList").childNodes;
for (var i = 0; i < liNodes.length; i++) {
liNodes[i].onclick = function () {
//alert(liNodes[i]).innerHTML;//Because onclick binds anonymous function, i will always be 7 here
//The following is the correct way to delete it, use this. Because the one that triggers the onclick event is always the li you selected
this.parentNode.removeChild(this);
};
}
}
};
</script>
</head>
<body>
<ul id="proList">
<li>Shanxi</li>
<li>Henan</li>
<li>Beijing</li>
</ul>
<input type="button" value="Add new province" id="btnProAdd" />
</body>
</html>
Use of setInterval and setTimeout in js.html
The code copy is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Using setInterval and setTimeout in js</title>
<script type="text/javascript">
var time = 10;
var id = 0;
function gel(id) {
return document.getElementById(id);
}
function dectime() {
if (time > 0) {
time--;
gel("timespan").innerHTML = time;
} else {
//Clear the hour hand
clearInterval(id);
}
}
window.onload = function() {
id = setInterval(dctime, 1000);
};
</script>
</head>
<body>
<span >Countdown<span id="timespan" style="color: red;"></span>seconds</span>
</body>
</html>
js dynamically add table data.html
The code copy is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic addition of table data</title>
<script type="text/javascript">
var mailArr = [
{ "title": "A C# problem", "name": "Zhang San", "date": "2014-03-21" },
{ "title": "A javascript problem", "name": "Li Si", "date": "2014-03-21" },
{ "title": "A C question", "name": "55", "date": "2014-03-21" },
{ "title": "A C++ question", "name": "Zhao Liu", "date": "2014-03-21" }
];
window.onload = function () {
var tab = document.getElementById("tb");
//Add mailArr loop traversal method to the table in tr
for (var rowindex = 0; rowindex < mailArr.length; rowindex++) {
var tr = document.createElement("tr");
var th1 = document.createElement("th");
var th2 = document.createElement("th");
var th3 = document.createElement("th");
var th4 = document.createElement("th");
th1.innerHTML = "<input type='checkbox'/>";
th2.innerHTML = mailArr[rowindex].title;
th3.innerHTML = mailArr[rowindex].name;
th4.innerHTML = mailArr[rowindex].date;
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
tr.appendChild(th4);
tab.appendChild(tr);
}
};
</script>
</head>
<body>
<table id="tb" style="border-collapse: collapse;">
<tr>
<th>Sequence</th>
<th>Title</th>
<th>Send mailer</th>
<th>Send time</th>
</tr>
<!-- Loop increase-->
</table>
</body>
</html>