JS实例（一）-CSDN博客

一：单选按钮，选择同意，提交变为可用，反正提交不可用：

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);
    }
}