手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript常见用法总结
javascript常见用法总结
摘要:js解码和编码.html复制代码代码如下:javascript的编码和解码functiongel(id){returndocument.ge...

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"></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"></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;">

<tr>

<th>序列</th>

<th>标题</th>

<th>发邮人</th>

<th>发件时间</th>

</tr>

<>

</table>

</body>

</html>

【javascript常见用法总结】相关文章:

javascript实现行拖动的方法

javascript实现图片跟随鼠标移动效果的方法

浅析javascript函数表达式

JavaScript中Number.MAX_VALUE属性的使用方法

javascript清空table表格的方法

javascript实现动态改变层大小的方法

JavaScript基本语法讲解

javascript实现查找数组中最大值方法汇总

Javascript监视变量变化的方法

使用JavaScript刷新网页的方法

精品推荐
分类导航