javascript常见用法总结

更新时间：2014年05月22日 09:30:17 作者：

javascript常见用法，比如，编码解码、间隔及掩饰执行、检查输入是否为数字、获取、创建和删除节点等等

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 { 
//清除时针 
clearInterval(id); 
} 
} 

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

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>js检查输入是否为数字</title> 
<script type="text/javascript"> 



window.onload= function() { 
document.getElementById("btn1").onclick = function() { 
var i = prompt("输入要判断的值"); 
//window.alert(i); 
if (!isNaN(i)) { 
window.alert("是数字"); 
} else { 
window.alert("不是数字"); 
} 
}; 
} 
</script> 
</head> 
<body> 
<input type="button" id="btn1" value="判断数字" /> 
</body> 
</html> 

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>js动态获取、创建和删除节点</title> 
<script type="text/javascript"> 
function gel(id) { return document.getElementById(id); } 

window.onload = function () { 
gel("btnProAdd").onclick = function () { 
//在proList下面增加子节点 
var linew = document.createElement("li"); 
linew.innerHTML = prompt("输入要新增的省份"); 
gel("proList").appendChild(linew); 
//重新绑定所有的点击删除事件 
DelLiOnClick(); 
}; 

//双击li子节点，删除它 

function DelLiOnClick() { 
//1.首先得到所有的子节点 
var liNodes = gel("proList").childNodes; 

for (var i = 0; i < liNodes.length; i++) { 
liNodes[i].onclick = function () { 
//alert(liNodes[i]).innerHTML;//因为onclick绑定的是匿名函数，所以i到这里永远只会是7 
//下面是正确的删除方法, 使用this.因为触发onclick事件的永远是你选中的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 { 
//清除时针 
clearInterval(id); 
} 
} 

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

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>动态添加表格数据</title> 

<script type="text/javascript"> 

var mailArr = [ 
{ "title": "一个c#问题", "name": "张三", "date": "2014-03-21" }, 
{ "title": "一个javascript问题", "name": "李四", "date": "2014-03-21" }, 
{ "title": "一个c问题", "name": "五五", "date": "2014-03-21" }, 
{ "title": "一个c++问题", "name": "赵六", "date": "2014-03-21" } 
]; 

window.onload = function () { 
var tab = document.getElementById("tb"); 
//把mailArr循环遍历方式以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>标题</th> 
<th>发邮人</th> 
<th>发件时间</th> 
</tr> 
<!-- 循环增加 --> 
</table> 
</body> 
</html> 

您可能感兴趣的文章:

javascript常见用法

相关文章

实现JavaScript的组成----BOM和DOM详解
下面小编就为大家带来一篇实现JavaScript的组成----BOM和DOM详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
JavaScript中的Math.SQRT1_2属性使用简介
这篇文章主要介绍了JavaScript中的Math.SQRT1_2属性的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
Javascript入门学习第八篇 js dom节点属性说明
上2篇文章我们讲了用dom方式创建节点，复制节点，插入节点, 删除节点，替换节点，查找节点，获取属性等。。。
2008-07-07
javascript document.execCommand() 常用解析
dom下execCommand命令的一些参数整理，需要的朋友可以参考下。
2009-12-12
js数组方法扩展实现数组统计函数
这篇文章主要介绍了js数组方法扩展,实现数组统计函数,需要的朋友可以参考下
2014-04-04
简介JavaScript中substring()方法的使用
这篇文章主要介绍了简介JavaScript中substring()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
JS中attr和prop属性的区别以及优先选择示例介绍
这篇文章主要介绍了JS中attr和prop属性的区别以及优先选择,需要的朋友可以参考下
2014-06-06
老生常谈Javascript的防抖和节流
这篇文章主要为大家详细介绍了Javascript的防抖和节流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
JavaScript基本入门语法集合
对于新手来说，掌握下面的方法，基本上就可以自己些js了，入门必备
2008-09-09
JavaScript的Date()方法使用详解
这篇文章主要介绍了JavaScript的Date()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06

最新评论