JS实例(一)
一:单选按钮,选择同意,提交变为可用,反正提交不可用:
HTML里面代码:
<form id="f1" name="f1"> <input type="radio" value="true" id="ok1" name="ok" onclick="doEnable()"/> <label for="ok1">同意</label> <input type="radio" value="false" id="ok2" name="ok" checked="checked" onclick="doEnable()"/><label for="ok2">不同意</label><br/> <input type="Submit" value="提交" id="btn" name="btn" disabled="disabled"/> </form>
JS代码:
function doEnable() { var b = document.getElementById("btn"); var a = document.getElementById("ok1"); if(a.checked) { b.removeAttribute("disabled"); } else { b.setAttribute("disabled","disabled"); } }
二:表单操作,列表内数据的添加,删除,修改
效果图如下:
HTML代码:
<form id="f1"> <input type="text" id="t1" name="t1" /> <input type="button" id="b1" name="b1" value="添加" onclick="add()" /> <br /><br /> <select name="s1" id="s1" size="10" style="width:100px; margin-left:30px;" onclick="sel(this)"> <option>北京</option> <option>上海</option> <option>广州</option> <option>淄博</option> </select><br /> <input type="button" id="d1" name="d1" value="删除" style=" margin-left:30px;" onclick="del()"/> <input type="button" id="d2" name="d2" value="清空" onclick="cl()"/> <br /><br /> <input type="text" id="t2" name="t2" /> <input type="button" id="u1" name="u1" value="修改" onclick="up()"/> <br /> </form>
JS代码:
var t1 = document.getElementById("t1"); var t2 = document.getElementById("t2"); function add() { var t = t1.value; //取出文本框中输入的值 var obj = document.createElement("option"); //创建一个标签元素 obj.innerHTML=t; //将文本框中的值赋到已创建的标签元素内 document.getElementById("s1").appendChild(obj); //将创建的标签作为一个子元素添加到id为s1的select列表中 t1.value=""; } var op; function sel(rd) { op = rd.options[rd.selectedIndex]; //由传进来的this参数,来找出选中的option的下标,从而找到选中的那个option var u = op.innerHTML; //选中的option中的内容放到u中 t2.value =u; //u的值赋给t2的value } function del() { var s = document.getElementById("s1"); s.removeChild(op); var t2=document.getElementById("t2"); t2.value =""; } function cl() { var s = document.getElementById("s1"); var n = s.options.length; //变量n等于子元素的个数,个数会随着删除变化,所以不能直接放在for里面 for(var i=0;i<n;i++) { s.removeChild(s.options[0]); //每次删除了之后第1个元素变为第0个,所以每次循环删0,就可以都删除 } t1.value=""; t2.value=""; } function up() { var v = t2.value; //将文本框2中的内容赋给变量v op.innerHTML = v; //将v的值赋给选的中option }
三:两个列表,可以添加数据,并且通过按钮在两个列表之间移动数据
效果图如下:
HTML代码:
<div style="float:left"> <select name="s1" id="s1" size="10" style="width:150px; margin-left:30px;" onclick="rightto(this)"> </select><br /> <input type="text" id="t1" name="t1" style="width:100px; margin-left:30px;" /> <input type="button" id="b1" name="b1" value="添加" onclick="add1()" /> </div> <div style="float:left"> <input type="button" id="d1" name="d1" value=">>" style=" margin:15px 0px 0px 30px;" onclick="rightall()"/> <br /> <input type="button" id="d2" name="d2" value="->" style=" margin:15px 0px 0px 30px;" onclick="rightone()"/> <br /> <input type="button" id="d3" name="d3" value="<<" style=" margin:15px 0px 0px 30px;" onclick="leftall()"/> <br /> <input type="button" id="d4" name="d4" value="<-" style=" margin:15px 0px 0px 30px;" onclick="leftone()"/> <br /> </div> <div style="float:left"> <select name="s2" id="s2" size="10" style="width:150px; margin-left:30px;" onclick="leftto(this)"> </select><br /> <input type="text" id="t2" name="t2" style="width:100px; margin-left:30px;" /> <input type="button" id="b2" name="b2" value="添加" onclick="add2()" /> </div>
JS代码:
var t1 = document.getElementById("t1"); var t2 = document.getElementById("t2"); var s1 = document.getElementById("s1"); var s2 = document.getElementById("s2"); var op1; var op2; function add1() { var t = t1.value; //取出文本框中输入的值 var obj = document.createElement("option"); //创建一个标签元素 obj.innerHTML=t; //将文本框中的值赋到已创建的标签元素内 document.getElementById("s1").appendChild(obj); //将创建的标签作为一个子元素添加到id为s1的select列表中 t1.value=""; } function add2() { var t = t2.value; var obj = document.createElement("option"); obj.innerHTML=t; document.getElementById("s2").appendChild(obj); t2.value=""; } function rightall() { var n = s1.options.length; for(var i=0;i<n;i++) { s2.appendChild(s1.options[0]); } } function leftall() { var n = s2.options.length; for(var i=0;i<n;i++) { s1.appendChild(s2.options[0]); } } function rightto(r1) { op1 = r1.options[r1.selectedIndex]; } function leftto(r2) { op2 = r2.options[r2.selectedIndex]; } function rightone() { s2.appendChild(op1); } function leftone() { s1.appendChild(op2); }
四:不算个例子,就是验证了一下checked的返回值,选中某一项的时候返回的值是个true,未选中的返回flase
效果图如下:
HTML代码:
<form> <input id="in1" type="radio" name="in" />同意 <input id="in2" type="radio" name="in" checked="true" />不同意 </form>
JS代码:
var a = document.getElementById("in1"); var b = document.getElementById("in2"); alert(a.checked); alert(b.checked);
五:日期时间的选择
效果图如下:
HTML代码:
<form id="f1" name="f1"> <select name="selYear" id="selYear" onchange="FillDay()"></select>年 <select name="selMonth" id="selMonth" onchange="FillDay()"></select>月 <select name="selDay" id="selDay"></select>日 </form>
JS代码:
var sYear = document.getElementById("selYear"); var sMonth = document.getElementById("selMonth"); var sDay = document.getElementById("selDay"); function FillYear() { //清空 sYear.innerHTML = ""; //添加 var d = new Date(); var year = d.getFullYear(); for(var i=year-10;i<=year+10;i++) { var op = document.createElement("option"); op.innerHTML = i; op.value = i; sYear.appendChild(op); } } function FillMonth() { sMonth.innerHTML = ""; for(var i=1;i<=12;i++) { var op = document.createElement("option"); op.innerHTML = i; op.value = i; sMonth.appendChild(op); } } function FillDay() { sDay.innerHTML = ""; var year = parseInt(sYear.value); var month = parseInt(sMonth.value); if(month == 1 || month == 3 || month==5 || month==7 || month==8 || month==10 || month == 12) { buildDayList(31); } else if(month == 4 || month == 6 || month == 9 || month == 11) { buildDayList(30); } else { if(year%400 == 0 || (year%4==0 && year%100!=0)) { buildDayList(29); } else { buildDayList(28); } } } function buildDayList(n) //n是每月的天数 { for(var i=1;i<=n;i++) { var op = document.createElement("option"); op.innerHTML = i; op.value = i; sDay.appendChild(op); } } FillYear(); FillMonth(); FillDay();
六:鼠标移动到背景上,背景向上拉开,显示出下面的图片,这个还没加入动态移除添加事件,有BUG,练习用
效果图如下:
CSS代码:
<style type="text/css"> #bg { background-image:url(images/1.jpg); width:300px; height:300px; } #hd { background-color:#666; width:300px; } </style>
HTML代码:
<div id="bg" onmouseover="hdup()" onmouseout="hddown()" > <div id="hd" style="height:300px;"> </div> </div>
JS代码:
var d = document.getElementById("hd"); function hdup() { var h = parseInt(d.style.height); if(h>=10) { h=h-10; d.style.height= h+"px"; setTimeout(function(){hdup();},30); } } function hddown() { var h = parseInt(d.style.height); if(h<=290) { h=h+10; d.style.height= h+"px"; setTimeout(function(){hddown();},30); } }