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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
js控制input框只读实现示例
Jan 20 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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针对数字的加密解密类
2014/03/20 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python递归实现打印多重列表代码
2020/02/27 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
浅谈Python中的字符串
2020/06/10 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书