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中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
javascript中this用法实例详解
Apr 06 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
Javascript实现单选框效果
Dec 09 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模块 Memcached功能多于Memcache
2011/06/14 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php购物车实现方法
2015/01/03 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
会议欢迎标语
2014/06/30 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
三国演义读书笔记
2015/06/25 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
Python数据类型最全知识总结
2021/05/31 Python
Django drf请求模块源码解析
2021/06/08 Python