首页 > 代码库 > JS实例（一）
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 =http://www.mamicode.com/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" onm ouseover="hdup()" onm ouseout="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); }}
JS实例（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。