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 相关文章推荐
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 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
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
phpStorm2020 注册码
2020/09/17 PHP
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
Python抓取百度查询结果的方法
2015/07/08 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
pygame实现打字游戏
2021/02/19 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
django创建css文件夹的具体方法
2020/07/31 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
软件测试面试题
2014/01/05 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2016年寒假见闻
2015/10/10 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js