js的案例
为了方便大家，我把代码打包上传到我的资源，大家可以去下载后部署到自己的网站上去，这样就不用你来copy代码了，免费下载哦，下面的代码都是从打包的源码中截取出来的额
下载网址：http://download.****.net/detail/xiaozhegaa/9707750
##
新开一个窗口：可以选择窗口中的属性
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() {
//open
window.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>