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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 


以上是关于JS初学者必备的几个经典案例！！！的主要内容，如果未能解决你的问题，请参考以下文章

数据分析和可视化必备的几大软件，你用过几个？

Java经典小程序_问题源码详解（初学者必备）

Java经典小程序_问题源码详解（初学者必备）

几个关于js数组方法reduce的经典片段

几个关于js数组方法reduce的经典片段

web前端开发需要掌握的几个必备技术