C1任务04 - 计算机程序逻辑

最新推荐文章于 2021-07-14 00:34:50 发布

Fanx繁星

最新推荐文章于 2021-07-14 00:34:50 发布

阅读量304

点赞数 4

文章标签： js

该文章为 Fanx繁星原创文章，如需转载请注明来源

本文链接：https://blog.csdn.net/qq_32447361/article/details/116708754

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

任务一、生成广告图片

跟据数组动态生成

在这里插入图片描述

<html>
  <head>
    <style>
      img{
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="gg"></div>
    
  </body>
  <script>
    
    create();
    function create(){
      var imgs = ["https://img-blog.csdnimg.cn/images/2113349306210427024056251.png","https://img-blog.csdnimg.cn/images/2113349306210427024056251.png"]
      for(var i = 0;i< imgs.length;i++){
        var img = document.createElement("img");
        img.setAttribute("src",imgs[i]);
        img.style.marginLeft='40px';
        document.getElementById('gg').appendChild(img);
      }
     
    }
  </script>
</html>

2.轮播图

在这里插入图片描述

<html>
  <head>
    <style>
      img{
        width: 500px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="gg">
      <img id="im" />
    </div>
    
  </body>
  <script>
    a = 0;
    imgs = ["https://img-blog.csdnimg.cn/images/-951249055210419033355673.jpg","https://img-blog.csdnimg.cn/images/2113349306210427024056251.png"]
    img = document.getElementById("im")
    img.setAttribute("src",imgs[a]);
    a++;
    img.style.marginLeft='40px';
   
    var int=self.setInterval("create()",3000);
    function create(){
       img.setAttribute("src",imgs[a]);
      if(a == imgs.length - 1){
        a = 0
      }else{
        a++;
      }
        
    }
  </script>
</html>

拓展

在这里插入图片描述

<html>
  <head>
    <style>

    </style>
  </head>
  <body>
    <select id="s"  onchange="aChange()">
      <option value="-1">请选择省份</option>
    </select>
    <select id="c" onchange="cChange()">
      <option>请选择城市</option>
    </select>
    <select id="q">
      <option>请选择区县</option>
    </select>
    
  </body>
  <script>
    data = [
      {
        "name":"河南省",
        "next":[
          {
            "name":"安阳市",
            "next":[
              {
                "name":"安阳县",
                "next":[]
              }
            ]
          },
          {
            "name":"郑州市",
            "next":[
              {
                "name":"新郑市",
                "next":[]
              }
            ]
          }
        ]
      },
      {
        "name":"河北省",
        "next":[
          {
            "name":"石家庄市",
            "next":[
              {
                "name":"长安区",
                "next":[]
              }
            ]
          },
          {
            "name":"邯郸市",
            "next":[
              {
                "name":"峰峰矿区",
                "next":[]
              }
            ]
          }
        ]
      }
    ]
    
    var s = document.getElementById("s")
    create(s,data);
    
    function aChange(){
      var index =  document.getElementById("s").options[ document.getElementById("s").selectedIndex].value
      if(index > -1){
         create(document.getElementById("c"),data[index].next)
      }
      
      var index1 = document.getElementById("c").options[ document.getElementById("c").selectedIndex].value
      if(index1 > -1 && index > -1){
         create(document.getElementById("q"),data[index].next[index1].next)
      }
    }
    
    function cChange(){
      var index =  document.getElementById("s").options[ document.getElementById("s").selectedIndex].value
      var index1 = document.getElementById("c").options[ document.getElementById("c").selectedIndex].value
      if(index1 > -1 && index > -1){
         create(document.getElementById("q"),data[index].next[index1].next)
      }
    }
    
    
    // 创建方法
    function create(element,data){
      element.innerHTML = "";
      for(var i = 0; i < data.length;i++){
        var nr =  document.createElement("option")
        nr.setAttribute("value",i)
        nr.innerText = data[i].name
        element.appendChild(nr)
      }
    }
  
  </script>
</html>

Fanx繁星

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
C1任务04 - 计算机程序逻辑

任务一、生成广告图片跟据数组动态生成<html> <head> <style> img{ width: 100px; height: 100px; } </style> </head> <body> <div id="gg"></div> </body> <script>
复制链接

扫一扫

专栏目录