javascript常见用法总结


Posted in Javascript onMay 22, 2014

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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
vue双向绑定简要分析
Mar 23 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
node结合swig渲染摸板的方法
Apr 11 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
JS常用字符串处理方法应用总结
May 22 #Javascript
通过js来制作复选框的全选和不选效果
May 22 #Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 #Javascript
js简单实现交换Li的值
May 22 #Javascript
js操作iframe父子窗体示例
May 22 #Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 #Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 #Javascript
You might like
php 注释规范
2012/03/29 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python入门篇之字符串
2014/10/17 Python
Python中的高级数据结构详解
2015/03/27 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
浅谈Python peewee 使用经验
2017/10/20 Python
python同步两个文件夹下的内容
2019/08/29 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
保密普查工作实施方案
2014/02/25 职场文书
节约用水的口号
2014/06/20 职场文书
体育教师求职信
2014/06/30 职场文书
合作协议书模板
2014/10/10 职场文书
windows安装python超详细图文教程
2021/05/21 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
服务器间如何实现文件共享
2022/05/20 Servers