javascript常見(jiàn)用法總結(jié)
更新時(shí)間:2014年05月22日 09:30:17 作者:
javascript常見(jiàn)用法,比如,編碼解碼、間隔及掩飾執(zhí)行、檢查輸入是否為數(shù)字、獲取、創(chuàng)建和刪除節(jié)點(diǎn)等等
js解碼和編碼.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的編碼和解碼</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">瘋漢三雄起了!</span>
<input type="button" id="btn1" value="編碼后" />
<input type="button" id="btn2" value="解碼后" />
</body>
</html>
js中setInterval和setTimeout的使用.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中setInterval和setTimeout的使用</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 {
//清除時(shí)針
clearInterval(id);
}
}
window.onload = function() {
id = setInterval(dectime, 1000);
};
</script>
</head>
<body>
<span >倒計(jì)時(shí)<span id="timespan" style="color: red;"></span>秒</span>
</body>
</html>
js檢查輸入是否為數(shù)字.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檢查輸入是否為數(shù)字</title>
<script type="text/javascript">
window.onload= function() {
document.getElementById("btn1").onclick = function() {
var i = prompt("輸入要判斷的值");
//window.alert(i);
if (!isNaN(i)) {
window.alert("是數(shù)字");
} else {
window.alert("不是數(shù)字");
}
};
}
</script>
</head>
<body>
<input type="button" id="btn1" value="判斷數(shù)字" />
</body>
</html>
js動(dòng)態(tài)獲取、創(chuàng)建和刪除節(jié)點(diǎn).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動(dòng)態(tài)獲取、創(chuàng)建和刪除節(jié)點(diǎn)</title>
<script type="text/javascript">
function gel(id) { return document.getElementById(id); }
window.onload = function () {
gel("btnProAdd").onclick = function () {
//在proList下面增加子節(jié)點(diǎn)
var linew = document.createElement("li");
linew.innerHTML = prompt("輸入要新增的省份");
gel("proList").appendChild(linew);
//重新綁定所有的點(diǎn)擊刪除事件
DelLiOnClick();
};
//雙擊li子節(jié)點(diǎn),刪除它
function DelLiOnClick() {
//1.首先得到所有的子節(jié)點(diǎn)
var liNodes = gel("proList").childNodes;
for (var i = 0; i < liNodes.length; i++) {
liNodes[i].onclick = function () {
//alert(liNodes[i]).innerHTML;//因?yàn)閛nclick綁定的是匿名函數(shù),所以i到這里永遠(yuǎn)只會(huì)是7
//下面是正確的刪除方法, 使用this.因?yàn)橛|發(fā)onclick事件的永遠(yuǎn)是你選中的li
this.parentNode.removeChild(this);
};
}
}
};
</script>
</head>
<body>
<ul id="proList">
<li>山西</li>
<li>河南</li>
<li>北京</li>
</ul>
<input type="button" value="新增省份" id="btnProAdd" />
</body>
</html>
js中setInterval和setTimeout的使用.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中setInterval和setTimeout的使用</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 {
//清除時(shí)針
clearInterval(id);
}
}
window.onload = function() {
id = setInterval(dectime, 1000);
};
</script>
</head>
<body>
<span >倒計(jì)時(shí)<span id="timespan" style="color: red;"></span>秒</span>
</body>
</html>
js動(dòng)態(tài)添加表格數(shù)據(jù).html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動(dòng)態(tài)添加表格數(shù)據(jù)</title>
<script type="text/javascript">
var mailArr = [
{ "title": "一個(gè)c#問(wèn)題", "name": "張三", "date": "2014-03-21" },
{ "title": "一個(gè)javascript問(wèn)題", "name": "李四", "date": "2014-03-21" },
{ "title": "一個(gè)c問(wèn)題", "name": "五五", "date": "2014-03-21" },
{ "title": "一個(gè)c++問(wèn)題", "name": "趙六", "date": "2014-03-21" }
];
window.onload = function () {
var tab = document.getElementById("tb");
//把mailArr循環(huán)遍歷方式以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" border="1px;" style="border-collapse: collapse;">
<tr>
<th>序列</th>
<th>標(biāo)題</th>
<th>發(fā)郵人</th>
<th>發(fā)件時(shí)間</th>
</tr>
<!-- 循環(huán)增加 -->
</table>
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript的編碼和解碼</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">瘋漢三雄起了!</span>
<input type="button" id="btn1" value="編碼后" />
<input type="button" id="btn2" value="解碼后" />
</body>
</html>
js中setInterval和setTimeout的使用.html
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js中setInterval和setTimeout的使用</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 {
//清除時(shí)針
clearInterval(id);
}
}
window.onload = function() {
id = setInterval(dectime, 1000);
};
</script>
</head>
<body>
<span >倒計(jì)時(shí)<span id="timespan" style="color: red;"></span>秒</span>
</body>
</html>
js檢查輸入是否為數(shù)字.html
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js檢查輸入是否為數(shù)字</title>
<script type="text/javascript">
window.onload= function() {
document.getElementById("btn1").onclick = function() {
var i = prompt("輸入要判斷的值");
//window.alert(i);
if (!isNaN(i)) {
window.alert("是數(shù)字");
} else {
window.alert("不是數(shù)字");
}
};
}
</script>
</head>
<body>
<input type="button" id="btn1" value="判斷數(shù)字" />
</body>
</html>
js動(dòng)態(tài)獲取、創(chuàng)建和刪除節(jié)點(diǎn).html
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js動(dòng)態(tài)獲取、創(chuàng)建和刪除節(jié)點(diǎn)</title>
<script type="text/javascript">
function gel(id) { return document.getElementById(id); }
window.onload = function () {
gel("btnProAdd").onclick = function () {
//在proList下面增加子節(jié)點(diǎn)
var linew = document.createElement("li");
linew.innerHTML = prompt("輸入要新增的省份");
gel("proList").appendChild(linew);
//重新綁定所有的點(diǎn)擊刪除事件
DelLiOnClick();
};
//雙擊li子節(jié)點(diǎn),刪除它
function DelLiOnClick() {
//1.首先得到所有的子節(jié)點(diǎn)
var liNodes = gel("proList").childNodes;
for (var i = 0; i < liNodes.length; i++) {
liNodes[i].onclick = function () {
//alert(liNodes[i]).innerHTML;//因?yàn)閛nclick綁定的是匿名函數(shù),所以i到這里永遠(yuǎn)只會(huì)是7
//下面是正確的刪除方法, 使用this.因?yàn)橛|發(fā)onclick事件的永遠(yuǎn)是你選中的li
this.parentNode.removeChild(this);
};
}
}
};
</script>
</head>
<body>
<ul id="proList">
<li>山西</li>
<li>河南</li>
<li>北京</li>
</ul>
<input type="button" value="新增省份" id="btnProAdd" />
</body>
</html>
js中setInterval和setTimeout的使用.html
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js中setInterval和setTimeout的使用</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 {
//清除時(shí)針
clearInterval(id);
}
}
window.onload = function() {
id = setInterval(dectime, 1000);
};
</script>
</head>
<body>
<span >倒計(jì)時(shí)<span id="timespan" style="color: red;"></span>秒</span>
</body>
</html>
js動(dòng)態(tài)添加表格數(shù)據(jù).html
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動(dòng)態(tài)添加表格數(shù)據(jù)</title>
<script type="text/javascript">
var mailArr = [
{ "title": "一個(gè)c#問(wèn)題", "name": "張三", "date": "2014-03-21" },
{ "title": "一個(gè)javascript問(wèn)題", "name": "李四", "date": "2014-03-21" },
{ "title": "一個(gè)c問(wèn)題", "name": "五五", "date": "2014-03-21" },
{ "title": "一個(gè)c++問(wèn)題", "name": "趙六", "date": "2014-03-21" }
];
window.onload = function () {
var tab = document.getElementById("tb");
//把mailArr循環(huán)遍歷方式以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" border="1px;" style="border-collapse: collapse;">
<tr>
<th>序列</th>
<th>標(biāo)題</th>
<th>發(fā)郵人</th>
<th>發(fā)件時(shí)間</th>
</tr>
<!-- 循環(huán)增加 -->
</table>
</body>
</html>
您可能感興趣的文章:
- Javascript的數(shù)組與字典用法與遍歷對(duì)象的屬性技巧
- JavaScript數(shù)組常用操作技巧匯總
- javascript數(shù)組詳解
- Javascript 數(shù)組排序詳解
- 一個(gè)JavaScript遞歸實(shí)現(xiàn)反轉(zhuǎn)數(shù)組字符串的實(shí)例
- JavaScript中實(shí)現(xiàn)最高效的數(shù)組亂序方法
- 原生JavaScript實(shí)現(xiàn)合并多個(gè)數(shù)組示例
- JavaScript中合并數(shù)組的N種方法
- javascript字典探測(cè)用戶名工具
- Javascript中this的用法詳解
- Javascript數(shù)組與字典用法分析
相關(guān)文章
JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流等js開(kāi)發(fā)基礎(chǔ)小結(jié)
這篇文章主要介紹了JS對(duì)象與JSON互轉(zhuǎn)換、New Function()、 forEach()、DOM事件流等js開(kāi)發(fā)中基礎(chǔ)的知識(shí)點(diǎn),并通過(guò)舉例詳細(xì)解釋了JavaScript定義的數(shù)據(jù)類型、無(wú)第三變量交換值、/和%運(yùn)算符、Memoization技術(shù)、閉包等知識(shí),需要的朋友可以參考下2017-08-08Javascript入門學(xué)習(xí)第八篇 js dom節(jié)點(diǎn)屬性說(shuō)明
上2篇文章我們講了 用dom方式 創(chuàng)建節(jié)點(diǎn),復(fù)制節(jié)點(diǎn),插入節(jié)點(diǎn), 刪除節(jié)點(diǎn),替換節(jié)點(diǎn),查找節(jié)點(diǎn),獲取屬性等。。。2008-07-07jquery下組織javascript代碼(js函數(shù)化)
這里整理的是jquery下js的一些代碼組織方法,大家可以借鑒下整理出基于jquery的自己喜歡的模式。2010-08-08

javascript定義變量時(shí)加var與不加var的區(qū)別
這篇文章主要介紹了javascript 變量中 var 與不加var的區(qū)別,需要的朋友可以參考下
2014-12-12 
JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記 概述
在JavaScript面世之初,沒(méi)有人會(huì)想到它會(huì)被應(yīng)用的如此廣泛,也遠(yuǎn)比一般人想象中的要復(fù)雜強(qiáng)大的多,在我自己學(xué)習(xí)的過(guò)程中,曾經(jīng)有過(guò)多次震撼
2012-10-10 
JavaScript中的document.referrer在各種瀏覽器測(cè)試結(jié)果
這篇文章主要介紹了JavaScript中的document.referrer在各種瀏覽器測(cè)試結(jié)果,包括在多種情況下每個(gè)瀏覽器能否用document.referrer取到值,非常珍貴的測(cè)試結(jié)果,需要的朋友可以參考下
2014-07-07