HTML与JavaScript实现交互功能-优快云博客

本文链接：https://blog.youkuaiyun.com/SignalFire/article/details/117589742

任务点一：

生成图片

源代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #box{
               width:400px;
               height: 600px;
               border: 1px solid #000000;
               border-radius: 10px;
               margin: 100px auto;
           }

           #img img{
               width: 400px;
               height: 600px;
               border-radius: 10px;
           }

           #close img{
               position: absolute;
               width: 30px;
               height: 30px;
               margin-top: -618px;
               margin-left: 384px;
           }
       </style>
   </head>
   <body>
       <div id="box">
           <div id="img">
               <img src="img/王冲.jpg" />
           </div>
           <div id="close">
               <img src="img/关%20%20闭.png" />
           </div>
       </div>
   </body>
   <script>
       var close = document.getElementById("close");
       var box = document.getElementById("box");

       close.onclick = function(){
           box.style.display = "none";
       }
   </script>
</html>

效果图如下：

轮播图

源代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #box{
               width: 600px;
               height: 400px;
               margin: 100px auto;
           }

           img{
               width: 600px;
               height: 400px;
           }
       </style>
   </head>
   <body>
       <div id="box">
           <img src="img/h1.jpg" id="img"/>
       </div>
   </body>
   <script>
       var timeId = "";
       var index = 1;
       var img = document.getElementById("img");

       timeId = setInterval(function(){
           index++;
           if(index>5) index =1;
           img.src = "img/h"+index+".jpg";
       },3000);
   </script>
</html>

效果图如下：

此处略去剩余图片

img文件目录如下

多级联动菜单：

源代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>

       </style>
   </head>
   <body>
       <select id="s1">
           <option index="1">河南</option>
           <option index="2">河北</option>
       </select>
       <select id="s2">
           <option index="1">南阳</option>
           <option index="2">郑州</option>
       </select>
       <select id="s3">
           <option index="1">南阳1区</option>
           <option index="2">南阳2区</option>
       </select>
   </body>
   <script src="js/jquery-3.3.1.js"></script>
   <script>
       var s1 = $("#s1");
       var s2 = $("#s2");
       var s3 = $("#s3");

       var index1 = 1;
       var index2 = 2;

       var ny = ["南阳1区","南阳2区"];
       var zz = ["郑州1区","郑州2区"];
       var hn = [{
                   shi:"南阳",
                   next:ny
               },{
                   shi:"郑州",
                   next:zz
               }];

       var ts = ["唐山1区","唐山2区"];
       var sjz = ["石家庄1区","石家庄2区"];
       var hb = [{
                   shi:"唐山",
                   next:ts
               },{
                   shi:"石家庄",
                   next:sjz
               }];

       var sheng = [{
                   shi:"河南",
                   next:hn
               },{
                   shi:"河北",
                   next:hb
               }];

       s1.change(function(){
           var options2 = $("#s2 option");
           var options3 = $("#s3 option");

           var num1 = s1.get(0).selectedIndex;
           var num2 = s2.get(0).selectedIndex;

           for(var i = 0;i < options2.length;i++){
               options2.eq(i).text(sheng[num1].next[i].shi);
           }

           for(var i = 0;i < options3.length;i++){
               options3.eq(i).text(sheng[num1].next[num2].next[i]);
           }
       });

       s2.change(function(){
           var options2 = $("#s2 option");
           var options3 = $("#s3 option");

           var num1 = s1.get(0).selectedIndex;
           var num2 = s2.get(0).selectedIndex;

           for(var i = 0;i < options2.length;i++){
               options2.eq(i).text(sheng[num1].next[i].shi);
           }

           for(var i = 0;i < options3.length;i++){
               options3.eq(i).text(sheng[num1].next[num2].next[i]);
           }
       });
   </script>
</html>