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

Posted 2020-08-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS初学者必备的几个经典案例！！！相关的知识，希望对你有一定的参考价值。

一.写出当前年份的前后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>
    <style type="text/css">
        
    </style>
</head>

<body>
    <select id="nian" onclick="dianji()"></select>年
    <select id="yue" onclick="dianji()"></select>月
    <select id="tian"></select>日



</body>
    <script type="text/javascript">
        nian();
        yue();
        tian();
        function nian()
        {
            var b = new Date();
            var nian=parseInt(b.getFullYear());
            var str="";
            for(i=nian-5;i<nian+6;i++)
            {
                str=str+"<option value=‘"+i+"‘>"+i+"</option>";
                document.getElementById("nian").innerHTML=str;
            }     
        }
        
        
        function yue()
        {
            var str="";
            for(i=1;i<13;i++)
            {
                str=str+"<option value=‘"+i+"‘>"+i+"</option>";
                document.getElementById("yue").innerHTML=str;
            }         
        }
        
        
        function tian()
        {
            var yue=document.getElementById("yue").value;
            var nian=document.getElementById("nian").value;
            var ts=31;
            if(yue==4 || yue==6 || yue==9 || yue==11)
            {
                ts=30;
            }    
            
            if(yue==2)
            {
                if((nian%4==0 && nian%100!=0) || nian%400==0)
                {
                    ts=29;
                }
                else
                {
                    ts=28;    
                }
            }
                var str="";
                for(i=1;i<ts+1;i++)
                {
                    str=str+"<option value=‘"+i+"‘>"+i+"</option>";
                    document.getElementById("tian").innerHTML=str;
                }
        }
        
        
            function dianji()
            {
                tian();    
            }
    </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>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:250px; height:20px; position:relative; top:-30px;}
    .img{ width:100%; height:300px; display:none}
    .yuan{ width:20px; height:20px; background-color:#F00; border:2px solid #FFF; border-radius:100px; float:left; margin-left:30px; cursor:pointer}
</style>
</head>

<body>
    <br /><br />
    <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/fcfaaf51f3deb48fbcf9f4aef21f3a292df57829.jpg" style="display:block" />
     <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/。，ll.jpg" />
      <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/2cf5e0fe9925bc319ab5e0385edf8db1ca1370a2.jpg" />
       <img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4-14101G43447.jpg" />
       
<div id="wai">       
    <div class="yuan" onclick="dian(‘0‘)" ></div>
    <div class="yuan" onclick="dian(‘1‘)" ></div>
    <div class="yuan" onclick="dian(‘2‘)" ></div>
    <div class="yuan" onclick="dian(‘3‘)" ></div>
</div>    
</body>
<script type="text/javascript">
<!--定义索引默认为0-->
    var sy=0;
    <!--调方法-->
    window.setInterval("huan()",4000);
    function huan()
    {
        <!--大图自动轮播-->
        var img=document.getElementsByClassName("img");
        sy++;
        if(sy>=img.length)
        {
            sy=0;
        }
        for(i=0;i<img.length;i++)
        {
            img[i].style.display="none";
        }    
            img[sy].style.display="block";
            
        <!--大图轮播的同时小点跟着换样式-->    
        var yuan=document.getElementsByClassName("yuan");
        for(j=0;j<yuan.length;j++)
        {
            yuan[j].style.backgroundColor="red";
        }
            yuan[sy].style.backgroundColor="black";
    }
    
    function dian(s)
    {
        <!--让当前的索引sy变成你所点击的索引s。这样下一张图片就会挨着显示-->
        sy=s;
        <!--点击小点对应的图片显示-->
        var img=document.getElementsByClassName("img");
        for(i=0;i<img.length;i++)
        {
            img[i].style.display="none";
        }
            img[s].style.display="block";
            
        <!--点击小点，小点也对应的跟着换样式-->    
        var yuan=document.getElementsByClassName("yuan");
        for(j=0;j<yuan.length;j++)
        {
            yuan[j].style.backgroundColor="red";
        }
            yuan[s].style.backgroundColor="black";
    }
    
    
</script>
</html>

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

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

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

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