管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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>

教程首页 更多教程