Of Stack

Summary of common usage in javascript

  • 2020-03-30 03:04:26
  • OfStack
Js decodes and encodes.html
 
<!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"> Mad man !</span> 
<input type="button" id="btn1" value=" After the coding " /> 
<input type="button" id="btn2" value=" After decoding " /> 
</body> 
</html>

Using.html for setInterval and setTimeout in js 
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>js In the setInterval and setTimeout The use of </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 clockwise
clearInterval(id); 
} 
} 

window.onload = function() { 
id = setInterval(dectime, 1000); 
}; 
</script> 
</head> 
<body> 
<span > The countdown <span id="timespan" style="color: red;"></span> seconds </span> 
</body> 
</html>

Js checks if the input is numeric.html 
 
<!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 if 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(" The digital "); 
} else { 
window.alert(" Not Numbers "); 
} 
}; 
} 
</script> 
</head> 
<body> 
<input type="button" id="btn1" value=" Determine the digital " /> 
</body> 
</html>

Js dynamically gets, creates, and deletes node.html 
 
<!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 gets, creates, and deletes nodes </title> 
<script type="text/javascript"> 
function gel(id) { return document.getElementById(id); } 

window.onload = function () { 
gel("btnProAdd").onclick = function () { 
//Add child nodes under the proList
var linew = document.createElement("li"); 
linew.innerHTML = prompt(" Enter the province to be added "); 
gel("proList").appendChild(linew); 
//Rebind all click delete events
DelLiOnClick(); 
}; 

//Double-click the li child node to delete it

function DelLiOnClick() { 
//1. Get all the child nodes first
var liNodes = gel("proList").childNodes; 

for (var i = 0; i < liNodes.length; i++) { 
liNodes[i].onclick = function () { 
//alert(liNodes[i]).innerHTML;// because onclick It's bound to an anonymous function, so i There's always going to be 7 
//Here is the correct method to delete this. Use this. Because the onclick event is always triggered by the selected li
this.parentNode.removeChild(this); 
}; 
} 
} 


}; 
</script> 
</head> 
<body> 
<ul id="proList"> 
<li> shanxi </li> 
<li> henan </li> 
<li> Beijing </li> 
</ul> 

<input type="button" value=" The new provinces " id="btnProAdd" /> 
</body> 
</html>

Using.html for setInterval and setTimeout in js

The same code at the page code block index 1
Js dynamically adds table data.html 
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> Add table data dynamically </title> 

<script type="text/javascript"> 

var mailArr = [ 
{ "title": " a c# The problem ", "name": " Zhang SAN ", "date": "2014-03-21" }, 
{ "title": " a javascript The problem ", "name": " Li si ", "date": "2014-03-21" }, 
{ "title": " a c The problem ", "name": " 4 ", "date": "2014-03-21" }, 
{ "title": " a c++ The problem ", "name": " Zhao six ", "date": "2014-03-21" } 
]; 

window.onload = function () { 
var tab = document.getElementById("tb"); 
//Add the mailArr loop traversal mode to the table in tr mode
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" border="1px;" style="border-collapse: collapse;"> 
<tr> 
<th> The sequence </th> 
<th> The title </th> 
<th> Hair YouRen </th> 
<th> Take a time </th> 
</tr> 
<!--  Circulation increase  --> 
</table> 
</body> 
</html>
Related articles: