一：单选按钮，选择同意，提交变为可用，反正提交不可用：
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);
}
}
时间： 2024-10-07 05:45:32