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 页面划词搜索JS
Sep 28 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
JS实现简易贪吃蛇游戏
Aug 24 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
function.inc.php超越php
2006/12/09 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php统计数组元素个数的方法
2015/07/02 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
详解python的ORM中Pony用法
2018/02/09 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python 监测文件是否更新的方法
2019/06/10 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Python中的Cookie模块如何使用
2020/06/04 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
教你怎么用python selenium实现自动化测试
2021/05/27 Python