js的案例
来源：互联网 发布：淘宝封号查询系统 编辑：程序博客网 时间：2024/05/19 15:41
为了方便大家，我把代码打包上传到我的资源，大家可以去下载后部署到自己的网站上去，这样就不用你来copy代码了，免费下载哦，下面的代码都是从打包的源码中截取出来的额。2017/3/18有更新
下载网址：http://download.csdn.net/detail/xiaozhegaa/9783956
## 
新开一个窗口：可以选择窗口中的属性
window.html <body> 姓名:<input type="text" id="numid"/><br/> 密码：<input type="text" id="nameid"/><br/> <input type="button" value="选择" onclick="open1()"/> <script type="text/javascript"> function open1() {//openwindow.open("use.html","","top = 200,left =150,width=250,height=150"); } </script> </body>//use.html<table border="1" bordercolor="blue"> <tr> <td><input type="button" value="100" onclick="s1('100','小郑');"/></td> <td>100</td> <td>小郑</td> </tr> <tr> <td><input type="button" value="101" onclick="s1('101','老郑');"/></td> <td>101</td> <td>老郑</td> </tr> <tr> <td><input type="button" value="102" onclick="s1('102','哈哈');"/></td> <td>102</td> <td>哈哈</td> </tr></table><script type="text/javascript"> //实现s1方法 function s1(num1,name1) { //需要把num1和name1赋值到window页面 //跨页面的操作 opener：得到创建这个窗口的窗口 得到window页面 var pwin = window.opener; //得到window页面 pwin.document.getElementById("numid").value = num1; pwin.document.getElementById("nameid").value = name1; //关闭窗口 window.close(); }</script>
在末尾添加节点
<style type="text/css"> div{ width:200px; height:200px; border:2px solid red; }</style><div> <ul id="ulid"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul></div><div id="div1"></div><br/><input type="button" value="全部添加过去" onclick="add2();"/><br/><br/><br/><input type="button" value="仅仅添加多一个节点" onclick="add1();"/><script type="text/javascript"> function add2() { var div1 = document.getElementById("div1"); var ul1 = document.getElementById("ulid"); div1.appendChild(ul1); } function add1() { var ul1 = document.getElementById("ulid"); var li1 = document.createElement("li"); var tex1 = document.createTextNode("5555"); li1.appendChild(tex1); ul1.appendChild(li1); }</script>动态显示时间
* 得到当前的时间
var date = new Date(); //得到不是常规的格式
var d1 = date.toLocaleString(); //格式化
* 需要让页面每一秒获取时间
setInterval方法 定时器
* 显示到页面上
每一秒向div里面写一次时间
* 使用innerHTML属性
<script type="text/javascript"> function getD1() { var date = new Date(); var d1 = date.toLocaleString(); var div1 = document.getElementById("times"); div1.innerHTML = d1; } setInterval("getD1();",1000);</script>复选框的全选，单选，反选等操作
** 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中
【解析】
* 全选操作
步骤：
1、获取要操作的复选框 使用getElementsByName()
2、返回是数组， 属性 checked判断复选框是否选中
* checked = true; //表示选中
* checked = false;//表示不选中
- 遍历数组，得到的是每一个checkbox
* 把每一个checkbox属性checked=true
* 全不选操作
步骤
1、获取到要操作的复选框
2、返回的是数组，遍历数组
3、得到每一个复选框
4、设置复选框的属性 checked=false
* 反选操作
步骤
1、获取到要操作的复选框
2、返回数组，遍历数组
3、得到每一个复选框
4、判断当前的复选框是选中还是不选中
- if(love1.checked == true) {}
5、如果选中，属性checked设置成false，否则，设置成true
* 使用复选框实现全选和全不选 步骤 1、得到上面那个复选框 - 通过id获取到 2、判断这个复选框是否是选中 - if条件，checked==true 3、如果是选中，下面是全选 4、如果不是选中，下面是全不选<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/不选<br/><input type="checkbox" name="love"/>篮球<input type="checkbox" name="love"/>足球<input type="checkbox" name="love"/>网求<input type="checkbox" name="love"/>乒乓球<br/><input type="button" value="全选" onclick="selAll();"/><input type="button" value="全不选" onclick="selNo();"/><input type="button" value="反选" onclick="selOther();"/><script type="text/javascript"> function selAllNo() { var box1 = document.getElementById("boxid"); if(box1.checked == true) { selAll(); } else { selNo(); } } function selOther() { var loves11 = document.getElementsByName("love"); for(var a=0;a<loves11.length;a++) { var love11 = loves11[a]; if(love11.checked == true) { love11.checked = false; } else { love11.checked = true; } } } function selNo() { var loves1 = document.getElementsByName("love"); for(var j=0;j<loves1.length;j++) { var love1 = loves1[j]; love1.checked = false; } } function selAll() { var loves = document.getElementsByName("love"); for(var i=0;i<loves.length;i++) { var love1 = loves[i]; love1.checked = true; } }</script>下拉选框的案例
<div id="s1" style="float:left;"> <div> <select id="select1" multiple="multiple" style="width:100px;height:100px;"> <option>AAAAAAAA</option> <option>BBBBBBBB</option> <option>CCCCCCCC</option> <option>DDDDDDDD</option> <option>EEEEEEEE</option> </select> </div> <div> <input type="button" value="选到右边" onclick="selToRight();"/><br/> <input type="button" value="全部选择到右边" onclick="allToRight();"/> </div></div><div id="s2"> <div> <select id="select2" multiple="multiple" style="width:100px;height:100px;"> <option>QQQQQQQQ</option> </select> </div> <div> <input type="button" value="选择到左边" onclick="selToLeft();"/><br/> <input type="button" value="全部选择到左边" onclick="allToLeft();"/> </div></div><script type="text/javascript"> function allToLeft() { var select2 = document.getElementById("select2"); var select1 = document.getElementById("select1"); var options1 = select2.getElementsByTagName("option"); for(var m=0;m<options1.length;m++){ var op11 = options1[m]; select1.appendChild(op11); m--; } } function selToLeft() { var s1 = document.getElementById("select1"); var s2 = document.getElementById("select2"); var opss = s2.getElementsByTagName("option"); for(var aa=0;aa<opss.length;aa++) { var op = opss[aa]; if(op.selected == true) { s1.appendChild(op); aa--; } } } function allToRight() { var s2 = document.getElementById("select2"); var s1 = document.getElementById("select1"); var ops = s1.getElementsByTagName("option"); for(var j=0;j<ops.length;j++) { var op1 = ops[j]; s2.appendChild(op1); j--; } } function selToRight() { var select2 = document.getElementById("select2"); var select1 = document.getElementById("select1"); var options1 = select1.getElementsByTagName("option"); for(var i=0;i<options1.length;i++) { var option1 = options1[i]; if(option1.selected == true) { select2.appendChild(option1); i--; } } }</script>五省联动的效果
<select id="countryid" onchange="add1(this.value);"> <option value="0">--请选择--</option> <option value="中国">中国</option> <option value="美国">美国</option> <option value="德国">德国</option> <option value="日本">日本</option></select><select id="cityid"></select></body><script type="text/javascript"> //创建一个数组存储数据 //二维数组 var arr = new Array(4); arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"]; arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"]; arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"]; arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"]; function add1(val) { var city1 = document.getElementById("cityid"); var options1 = city1.getElementsByTagName("option"); for(var m=0;m<options1.length;m++) { var op = options1[m]; city1.removeChild(op); m--; } //遍历二维数组 for(var i=0;i<arr.length;i++) { var arr1 = arr[i]; var firstvalue = arr1[0]; if(firstvalue == val) { for(var j=1;j<arr1.length;j++) { var value1 = arr1[j]; //得到城市的名称 var option1 =document.createElement("option"); var text1 =document.createTextNode(value1); option1.appendChild(text1); city1.appendChild(option1); } } } }</script>动态生成表格
行：<input type="text" id="h" />列：<input type="text" id="l" /><br/><input type="button" value="生成" onclick="add2();"/><div id="divv"></div><script type="text/javascript"> function add2() { /* 1、得到输入的行和列的值 2、生成表格 ** 循环行 ** 在行里面循环单元格 3、显示到页面上 - 把表格的代码设置到div里面 - 使用innerHTML属性 */ //获取输入的行和列 var h = document.getElementById("h").value; var l = document.getElementById("l").value; //把表格代码放到一个变量里面 var tab = "<table border='1' bordercolor='blue'>"; //循环行 for(var i=1;i<=h;i++) { tab += "<tr>"; //循环单元格 for(var j=1;j<=l;j++) { tab += "<td>aaaaaaa</td>" } tab += "</tr>"; } tab += "</table>"; //alert(tab); //得到div标签 var divv = document.getElementById("divv"); //把table的代码设置到div里面去 divv.innerHTML = tab; }</script>图片的自动切换效果
<img id="imgs" src="image/1.jpg" /><script language="javascript"> setInterval(test,3000); var array=new Array(); var index=0; var array= new Array("image/1.jpg","image/2.jpg","image/3.jpg", "image/4.jpg","image/5.jpg"); function test() { var myimg=document.getElementById("imgs"); if(index==array.length-1) { index=0; }else{ index++; } myimg.src=array[index]; }</script>显示与隐藏的案例
<a href="#" onclick="Show_Hidden(tr1)">申报3A级、2A级、1A级的旅游景区</a><a href="#" onclick="Show_Hidden(tr2)">小郑</a><a href="#" onclick="Show_Hidden(tr3)">落枕</a><table> <tr id="tr1" style="display:none;"> <td>凡在中华人民共和国境内，正式开业从事旅游经营业务一年以上的旅游景区，包括风景区、文博院馆、寺庙观堂、旅游度假区、自然保护区、主题公园、森林公园、地质公园、游乐园、动物园、植物园及工业、农业、经贸、科教、军事、体育、文化艺术等旅游景区，均可申请参加质量等级评定。 旅游景区质量等级评定，是指对具有独立管理和服务机构的旅游景区进行评定，对园中园、景中景等内部旅游点，不进行单独评定。 </td> </tr> <tr id="tr2" style="display:none;"> <td>2222222 </td> </tr> <tr id="tr3" style="display:none;"> <td>333 </td> </tr></table> <script type="text/javascript"> function Show_Hidden(trid){ if(trid.style.display=="block"){ trid.style.display='none'; }else{ trid.style.display='block'; } } </script> 0 0
- js的案例
- 好看的JS脚本案例
- js不错的案例网站
- js监控回车的案例
- JS案例
- js 案例
- js案例
- JS案例集 牛人的作品
- JS案例集 牛人的作品
- js的对象和小效果案例
- 批量上传js插件的使用案例
- mobiscroll js日期插件的基本案例
- 【案例】简单的js验证码
- js lightbox展示图片的案例
- Node.js的首次应用小案例
- js中this的使用案例整理
- JS控制另外一个框架的案例
- js对象的set/get方法案例
- 递归算法实现字符串的逆序存储
- 对称二叉树
- PyQt5教程——菜单和工具栏（3）
- 面试--阻止编译优化方法 （46）
- Git远程操作详解
- js的案例
- Java学习笔记1
- 学Android--SharedPreferences
- PyQt5教程——布局管理（4）
- AngularJS—实现根据数量、单价计算总价效果
- C语言训练
- 410款INTEL CPU详细技术资料速查表
- python:SyntaxError:Missing parentheses in call to 'print'
- 1061. 判断题(15)-PAT乙级真题
