JS初学者必备的几个经典案例（一）！！！

时间：2023-03-09 07:06:35
JS初学者必备的几个经典案例（一）！！！

一：选中复选框按钮可用    和     倒计时10秒后按钮可用

这是倒计时10秒后按钮可用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <div>

    <span id="daojishi">10</span>

    <input disabled="disabled" type="button" value="注册" id="anniu" />

</div>

</body>

<script type="text/javascript">

var id;

id=window.setInterval("daojishi()",1000);

    function daojishi()

    {

        //找到span

        var anniu=document.getElementById("anniu");

        var s = document.getElementById("daojishi");

        var t=s.innerText;

        t=t-1;

        if(t<=0)

        {

            window.clearInterval(id);

            anniu.removeAttribute("disabled");

        }

        s.innerText=t;

    }

</script>

</html>

选中复选框按钮可用！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<input type="button" value="按钮" disabled="disabled" id="anniu" />

<input type="checkbox" onclick="xuanzhong()" id="ck"/>

</body>

<script type="text/javascript">

    function xuanzhong()

    {

        var anniu=document.getElementById("anniu");

        var ck=document.getElementById("ck");

        if(ck.checked)

        {

            anniu.removeAttribute("disabled");

        }

        else

        {

            anniu.setAttribute("disabled","disabled");

        }

    }

</script>

</html>

3.下拉菜单（最简单的）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

    <style type="text/css">

        .list{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}

        .list1{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}

        .list2{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}

        .list3{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}

        .list4{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;}

    </style>

<body>

    <div style="width:150px; height:1000px;">

        <ul>

            <li class="list" style=" background-color:#F00" onclick="dianji('yi')">文件</li>

            <div id="yi" style="width:150px; height:200px; display:none">

                <ul>

                    <li class="list1">文件</li>

                    <li class="list1">编辑</li>

                    <li class="list1">格式</li>

                    <li class="list1">命令</li>

                </ul>

            </div>

            <li class="list" style=" background-color:#0F0" onclick="dianji('er')">编辑</li>

            <div id="er" style="width:150px; height:200px; display:none">

                <ul>

                    <li class="list2">文件</li>

                    <li class="list2">编辑</li>

                    <li class="list2">格式</li>

                    <li class="list2">命令</li>

                </ul>

            </div>

            <li class="list" style=" background-color:#00F" onclick="dianji('sa')">格式</li>

            <div id="sa" style="width:150px; height:200px; display:none">

                <ul>

                    <li class="list3">文件</li>

                    <li class="list3">编辑</li>

                    <li class="list3">格式</li>

                    <li class="list3">命令</li>

                </ul>

            </div>

            <li class="list" style=" background-color:#FF0" onclick="dianji('si')">命令</li>

            <div id="si" style="width:150px; height:200px; display:none">

                <ul>

                    <li class="list4">文件</li>

                    <li class="list4">编辑</li>

                    <li class="list4">格式</li>

                    <li class="list4">命令</li>

                </ul>

            </div>

        </ul>

    </div>

</body>

    <script type="text/javascript">

        function dianji(a)

        {

            var a=document.getElementById(a);

            if(a.style.display=="none")

            {

                a.style.display="block";

            }

            else

            {

                a.style.display="none";

            }

        }

    </script>

</html>

4.下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

    <style type="text/css">

        *{ margin:0px auto; padding:0px;}

        .list{ width:100px; height:50px; text-align:center; line-height:50px; vertical-align:middle; float:left; list-style:none;}

        .ys{ width:100px; height:100px; float:left; margin-top:50px; margin-left:-100px;}

    </style>

<body>

    <<br /><<br />

    <div style="width:400px; height:50px;">

        <ul>

            <li class="list" style="background-color:#F00" onmouseover="yishang('yi')" onmouseout="yichu('yi')">文件</li>

            <div id="yi" class="ys" style="background-color:#F00;display:none"></div>

            <li class="list" style="background-color:#0F0" onmouseover="yishang('er')" onmouseout="yichu('er')">编辑</li>

            <div id="er" class="ys" style="background-color:#0F0;display:none"></div>

            <li class="list" style="background-color:#00F" onmouseover="yishang('sa')" onmouseout="yichu('sa')">命令</li>

            <div id="sa" class="ys" style="background-color:#00F;display:none"></div>

            <li class="list" style="background-color:#FF0" onmouseover="yishang('si')" onmouseout="yichu('si')">帮助</li>

            <div id="si" class="ys" style="background-color:#FF0;display:none"></div>

        </ul>

    </div>

</body>

    <script type="text/javascript">

        function yishang(a)

        {

            var a=document.getElementById(a);

            if(a.style.display=="none")

            {

                a.style.display="block";

            }

        }

        function yichu(a)

        {

            var a=document.getElementById(a);

                a.style.display="none";

        }

    </script>

</html>

5.下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

    <style type="text/css">

        *{ margin:0px auto; padding:0px;}

        #yi{ width:200px; height:50px; border:1px solid #333; text-align:center; line-height:50px; vertical-align:middle;}

        #yi:hover{ cursor:pointer}

        .list{ width:200px; height:50px; border:1px solid #333; text-align:center; line-height:50px; vertical-align:middle; border-top:none;}

        .list:hover{ cursor:pointer;}

    </style>

<body>

    <<br /><<br />

        <div id="yi" onclick="dianji()">选项</div>

        <div id="er" style="display:none">

            <div class="list" onclick="xuan(this)">山东</div>

            <div class="list" onclick="xuan(this)">河北</div>

            <div class="list" onclick="xuan(this)">山西</div>

        </div>

</body>

    <script type="text/javascript">

        function dianji()

        {

            var a=document.getElementById("er");

            if(a.style.display=="none")

            {

                a.style.display="block";

            }

            else

            {

                a.style.display="none";

            }

        }

        function xuan(a)

        {

            var yi=document.getElementById("yi");

            var b=document.getElementById("er");

            yi.innerHTML=a.innerHTML;

            b.style.display="none";

        }

    </script>

</html>

6.进度条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

    <style type="text/css">

        *{ margin:0px auto; padding:0px;}

        #yi{ width:1000px; height:10px; border:1px solid #999; border-radius:5px;}

    </style>

<body>

    <br /><<br />

        <div id="yi">

            <div id="er" style="width:0px; height:10px; background-color:#F00; float:left"></div>

        </div>

</body>

    <script type="text/javascript">

        var id;

        id=window.setInterval("jindu()",10);

        function jindu()

        {

            var a=document.getElementById("er");

            var k=a.style.width;

            k=parseInt(k.substr(0,k.length-2))+2;

            a.style.width=k+"px";

            if(k>=1000)

            {

                window.clearInterval(id);

            }

        }

    </script>

</html>

7.滚动条事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

    <style type="text/css">

        *{ margin:0px auto; padding:0px;}

    </style>

<body>

    <div id="yi" style="width:100%; height:30px; background-color:#F00"></div>

    <div id="er" style="width:100%; height:60px; background-color:#000"></div>

    <div id="sa" style="width:100%; height:800px; background-color:#009"></div>

</body>

    <script type="text/javascript">

        window.onscroll=function ()

        {

            var a=document.getElementById("er");

            if(window.scrollY>=30)

            {

                a.style.position="fixed";

                a.style.top="0px";

            }

            else

            {

                a.style.position="relative";

            }

        }

    </script>

</html>

8.滑动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

    <style type="text/css">

    </style>

<body>

    <div id="yi" style="width:100px; height:300px; background-color:#F00; float:left"></div>

      <div id="er" style="width:1000px; height:300px; background-color:#000; float:left;"> </div>

    <div id="sa" style=" width:50px; height:50px; background-color:#CCC; position:relative; top:125px; left:75px; cursor:pointer;" onclick="dianji()"></div>

</body>

    <script type="text/javascript">

        var id;

        function dianji()

        {

            id=window.setInterval("dong()",10);

        }

        function dong()

        {

            var a=document.getElementById("yi");

            var h=a.style.width;

            h=parseInt(h.substr(0,h.length-2))+2;
            if(h>=1100)

            {

                window.clearInterval(id);
　　　　　　　　　 return;

            }
            a.style.width=h+"px";

            var b=document.getElementById("er");

            var he=b.style.width;

            he=parseInt(he.substr(0,he.length-2))-2;

            b.style.width=he+"px";

            var c=document.getElementById("sa");

            var xiao=c.style.left;

            xiao=parseInt(xiao.substr(0,xiao.length-2))+2;

            c.style.left=xiao+"px";

        }

    </script>

</html>