javascript-如何在HTML页面上隐藏/显示图像

前端之家收集整理的这篇文章主要介绍了javascript-如何在HTML页面上隐藏/显示图像 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用动态HTML表,因为我的数据量很大,所以我在其中显示数据的方式就像在HTML表中一样,所以我正在做的事情是显示将固定在一个屏幕上的数据量,所以这里我显示12行一次,然后在5秒钟后刷新页面,然后刷新下12个页面,依此类推,当到达最后一页时,我正在做的事情是再次调用JSON对象并再次执行整个过程,因为在我的代码中JSON数据将是动态的

我面临的问题

> 5秒钟后,我做了所有事情来刷新页面,并在到达最后一页时调用整个数据
>现在我想做的是,当它是最后一页时,比那之后要显示图像10秒,而不是再次调用整个过程
>现在,首先执行的整个过程将类似于表将显示12行,如果有更多数据,它将显示表的下12行,我想显示图像10秒钟,然后调用JSON再次反对再次经历整个过程
>在我的代码中,我评论了我在哪里做什么

var tableValue = [{
  "Item Name": "MANCHOW  V SOUP","SellingPrice": 100
},{
  "Item Name": "MANCHOW NV SOUP ","SellingPrice": 125
},{
  "Item Name": "CEASER SALAD V","SellingPrice": 175
},{
  "Item Name": "CEASER SALAD NV","SellingPrice": 230
},{
  "Item Name": "GAMBUS REBOZADAS","SellingPrice": 350
},{
  "Item Name": "PANCO FISH FINGER","SellingPrice": 270
},{
  "Item Name": "MUSHROOM DUPLEX","SellingPrice": 160
},{
  "Item Name": "FRENCH FRIES","SellingPrice": 99
},{
  "Item Name": "HONEY GARLIC PRAWN",{
  "Item Name": "CHICKEN MANCHURIAN","SellingPrice": 180
},{
  "Item Name": "MUSHROOM CHILLY","SellingPrice": 120
},{
  "Item Name": "SALT N PEPPER BABY CORN",{
  "Item Name": "SOUTHERN STYLE CHICKEN","SellingPrice": 210
},{
  "Item Name": "PANEER NAGGETS",{
  "Item Name": "HARA BHARA KEBAB",{
  "Item Name": "CHICKEN TIKKA",{
  "Item Name": "KALMI KEBAB","SellingPrice": 250
},{
  "Item Name": "PIZZA MARGARITTA","SellingPrice": 200
},{
  "Item Name": "PIZZA VEG FARMHOUSE",{
  "Item Name": "BBQ CHICKEN PIZZA","SellingPrice": 225
},{
  "Item Name": "CHICKEN TIKKA PIZZA",{
  "Item Name": "PESTO SAUCE",{
  "Item Name": "ARABIATA",{
  "Item Name": "PINK SAUCE",{
  "Item Name": "GARBANZO BEAN SALAD","SellingPrice": 90
},{
  "Item Name": "MASALA PAPAD","SellingPrice": 50
},{
  "Item Name": "PEANUT MASALA","SellingPrice": 60
},{
  "Item Name": "GAJAR KA HALWA",{
  "Item Name": "WATERMELON MARTINI","SellingPrice": 281
},{
  "Item Name": "Kiwi martini",{
  "Item Name": " Apple gin",{
  "Item Name": "Cucumber  cooler ",{
  "Item Name": "Martini",{
  "Item Name": "Pink lady",{
  "Item Name": " Bloody marry",{
  "Item Name": "Cosmopolitan",{
  "Item Name": "Sex on the beach",{
  "Item Name": "Bull frog","SellingPrice": 506
},{
  "Item Name": "Long  island iced tea ","SellingPrice": 393
},{
  "Item Name": "Pinacolada",{
  "Item Name": "Daiquiri",{
  "Item Name": "Mojito ",{
  "Item Name": "Whisky sour",{
  "Item Name": "Hot toddy",{
  "Item Name": "Margarita","SellingPrice": 337
},{
  "Item Name": "Tequila sunrise",{
  "Item Name": "Red sangria",{
  "Item Name": "White sangria","SellingPrice": 247
},{
  "Item Name": "Rose sangria",{
  "Item Name": "By chance special ","SellingPrice": 168
},{
  "Item Name": "Made in heaven",{
  "Item Name": "Strawberry delight",{
  "Item Name": "DRAGON",{
  "Item Name": "Mangochil ",{
  "Item Name": "Cucumber cola",{
  "Item Name": "Virgin mojito",{
  "Item Name": "Virgin mary",{
  "Item Name": "Virgin pinacolada",{
  "Item Name": "CORONA","SellingPrice": 438
},{
  "Item Name": "CRAFT BEERS",{
  "Item Name": "BIRA WHITE 330","SellingPrice": 157
},{
  "Item Name": "BIRA BLONDE 330","SellingPrice": 135
},{
  "Item Name": "BIRA STRONG 650","SellingPrice": 213
},{
  "Item Name": "KINGFISHER PREMIUM 330","SellingPrice": 123
},{
  "Item Name": "KINGFISHER PREMIUM 650","SellingPrice": 202
},{
  "Item Name": "KINGFISHER STRONG 330",{
  "Item Name": "KINGFISHER STRONG 650",{
  "Item Name": "KINGFISHER ULTRA 330","SellingPrice": 146
},{
  "Item Name": "KINGFISHER ULTRA 650",{
  "Item Name": "KINGFISHER ULTRA MAX 330",{
  "Item Name": "KINGFISHER ULTRA MAX 650",{
  "Item Name": "BUDWIESER 330",{
  "Item Name": "BUDWIESER 650",{
  "Item Name": "BUDWIESER MAGNUM 330",{
  "Item Name": "BUDWIESER MAGNUM 650",{
  "Item Name": "TUBORG 330",{
  "Item Name": "TUBORG 650","SellingPrice": 191
},{
  "Item Name": "TUBORG STRONG 330",{
  "Item Name": "TUBORG STRONG 650",{
  "Item Name": "CRANBERRY ",{
  "Item Name": "ORANGE",{
  "Item Name": "JAMICAN",{
  "Item Name": "BLACK BERRY",{
  "Item Name": "BLUE BERRY",{
  "Item Name": "MOET CHANDON","SellingPrice": 787
},{
  "Item Name": "SULA BRUT",{
  "Item Name": "MATEUS ROSE",{
  "Item Name": "HARDYS SIRAZ CABERNET 750","SellingPrice": 189
},{
  "Item Name": "HARDYS SIRAZ CABERNET BY GLASS","SellingPrice": 382
},{
  "Item Name": "JACOB CREEK SIRAZ 750",{
  "Item Name": "JACOB CREEK SIRAZ BY GLASS","SellingPrice": 360
},{
  "Item Name": "BIG BANAYAN CHENNIN BLANC 750","SellingPrice": 990
},{
  "Item Name": "BIG BANAYAN CHENNI",{
  "Item Name": "SULA CHENIN BLANC 750 ","SellingPrice": 129
},{
  "Item Name": "SULA CHENIN BLANC BY GLASS","SellingPrice": 258
},{
  "Item Name": "FOUR SEAZON CLASSIC","SellingPrice": 112
},{
  "Item Name": "FOUR SEAZON CLASSIC ",{
  "Item Name": "BIG BANAYAN CARBINET ",{
  "Item Name": "BIG BANAYAN CARBINE",{
  "Item Name": "SULA SATORI MERLOT 750",{
  "Item Name": "SULA SATORI MERLOT BY GLASS",{
  "Item Name": "GROVERS LA RESERVE 750",{
  "Item Name": "GROVERS LA RESERVE 100",{
  "Item Name": "GLENFIDDICH 12 YEARS 700 ","SellingPrice": 922
},{
  "Item Name": "GLENFIDDICH 12 YEARS 30","SellingPrice": 405
},{
  "Item Name": "TALISKER 750","SellingPrice": 877
},{
  "Item Name": "TALISKER 30",{
  "Item Name": "GLENNLIVET 750","SellingPrice": 888
},{
  "Item Name": "GLENNLIVET 30",{
  "Item Name": "THE SINGLETON 750","SellingPrice": 794
},{
  "Item Name": "THE SINGLETON 30","SellingPrice": 326
},{
  "Item Name": "AMRUT FUSION 750",{
  "Item Name": "AMRUT FUSION 30",{
  "Item Name": "JACK DANIELS 750","SellingPrice": 731
},{
  "Item Name": "JACK DANIELS 30","SellingPrice": 292
},{
  "Item Name": "JIM BEAM WHITE 750","SellingPrice": 409
},{
  "Item Name": "JIM BEAM WHITE 30",{
  "Item Name": "JAMESON 750","SellingPrice": 49
},{
  "Item Name": "JAMESON 30",{
  "Item Name": "JW BLACK LABEL 750","SellingPrice": 821
},{
  "Item Name": "JW BLACK LABEL 200","SellingPrice": 29
},{
  "Item Name": "JW BLACK LABEL 30",{
  "Item Name": "JW RED LABEL 200","SellingPrice": 115
},{
  "Item Name": "BALLENTINSE FINEST BLENDED 750","SellingPrice": 454
},{
  "Item Name": "BALLENTINSE FINEST BLENDED 30",{
  "Item Name": "BLACK \u0026 WHITE 375",{
  "Item Name": "BLACK \u0026 WHITE 180",{
  "Item Name": "BLACK \u0026 WHITE 60",{
  "Item Name": "BLACK \u0026 WHITE 30",{
  "Item Name": "100 PIPERS 180",{
  "Item Name": "100 PIPERS 60",{
  "Item Name": "100 PIPERS 30",{
  "Item Name": "VAT 69 180","SellingPrice": 675
},{
  "Item Name": "VAT 69 60",{
  "Item Name": "VAT 69 30",{
  "Item Name": "TEACHERS HIGHLAND 180",{
  "Item Name": "TEACHERS HIGHLAND 60",{
  "Item Name": "TEACHERS HIGHLAND 30",{
  "Item Name": "TEACHERS 50 60",{
  "Item Name": "TEACHERS 50 30",{
  "Item Name": "BLACK DOG TRIPPLE GOLD 180","SellingPrice": 121
},{
  "Item Name": "BLACK DOG TRIPPLE GOLD 30",{
  "Item Name": "BLACK DOG 8 YEARS 180",{
  "Item Name": "BLACK DOG 8 YEARS 60",{
  "Item Name": "BLACK DOG 8 YEARS 30",{
  "Item Name": "BLENDERS PRIDE 750","SellingPrice": 228
},{
  "Item Name": "BLENDERS PRIDE 375","SellingPrice": 114
},{
  "Item Name": "BLENDERS PRIDE 180","SellingPrice": 573
},{
  "Item Name": "BLENDERS PRIDE 60",{
  "Item Name": "BLENDERS PRIDE 30",{
  "Item Name": "SIGNATURE 180","SellingPrice": 450
},{
  "Item Name": "SIGNATURE 60",{
  "Item Name": "SIGNATURE 30",{
  "Item Name": "GREY GOOSE 750","SellingPrice": 819
},{
  "Item Name": "GREY GOOSE 30",{
  "Item Name": "BELVEDERE 700","SellingPrice": 812
},{
  "Item Name": "BELVEDERE 30",{
  "Item Name": "CIROC 750","SellingPrice": 742
},{
  "Item Name": "CIROC 30","SellingPrice": 303
},{
  "Item Name": "ABSOLUT 750","SellingPrice": 455
},{
  "Item Name": "ABSOLUT 30",{
  "Item Name": "SMIRNOFF RED 180","SellingPrice": 551
},{
  "Item Name": "SMIRNOFF RED 60",{
  "Item Name": "SMIRNOFF RED30","SellingPrice": 101
},{
  "Item Name": "SMIRNOFF ORANGE 180",{
  "Item Name": "SMIRNOFF ORANGE 60",{
  "Item Name": "SMINOFF ORANGE30",{
  "Item Name": "SMIRNOFF GREEN APPLE 180",{
  "Item Name": "SMIRNOFF GREEN APPLE 60",{
  "Item Name": "SMIRNOFF GREEN APPLE30",{
  "Item Name": "BOMBAY SAPHIRE 750","SellingPrice": 472
},{
  "Item Name": "BOMBAY SAPHIRE 30",{
  "Item Name": "BLUE RIBBAND 750",{
  "Item Name": "BLUE RIBBAND 60","SellingPrice": 78
},{
  "Item Name": "BACCARDI WHITE 750","SellingPrice": 248
},{
  "Item Name": "BACCARDI WHITE 180","SellingPrice": 585
},{
  "Item Name": "BACCARDI WHITE 60",{
  "Item Name": "BACCARDI WHITE 30",{
  "Item Name": "BACCARDI LEMON 180",{
  "Item Name": "BACCARDI LEMON 60",{
  "Item Name": "BACCARDI LEMON 30",{
  "Item Name": "BACCARDI ORANGE 180",{
  "Item Name": "BACCARDI ORANGE 60",{
  "Item Name": "BACCARDI BLACK 180",{
  "Item Name": "BACCARDI BLACK 30","SellingPrice": 67
},{
  "Item Name": "BACCARDI GOLD 180",{
  "Item Name": "BACCARDI GOLD30",{
  "Item Name": "OLD MONK 180",{
  "Item Name": "OLD MONK 90",{
  "Item Name": "OLD MONK 60",{
  "Item Name": "OLD MONK 30 ","SellingPrice": 45
},{
  "Item Name": "DON ANGEL 750","SellingPrice": 466
},{
  "Item Name": "DON ANGEL 30",{
  "Item Name": "SAUZA SILVER 700","SellingPrice": 615
},{
  "Item Name": "SAUZA SILVER 30",{
  "Item Name": "JAGERBOMB",{
  "Item Name": "KAMAKAZI",{
  "Item Name": "JAGERMASTER",{
  "Item Name": "COINTTRAEU",{
  "Item Name": "SAMBUCA",{
  "Item Name": "KHALUA",{
  "Item Name": "MARTINI BLANCO",{
  "Item Name": "MARTINI ROSSO",{
  "Item Name": "HENESSY VS 700",{
  "Item Name": "HENESSY VS 30","SellingPrice": 348
},{
  "Item Name": "MORPHEUS 750","SellingPrice": 218
},{
  "Item Name": "MORPHEUS 180","SellingPrice": 540
},{
  "Item Name": "MORPHEUS 60",{
  "Item Name": "MORPHEUS 30",{
  "Item Name": "MANSION HOUSE 180",{
  "Item Name": "MANSION HOUSE 90",{
  "Item Name": "MANSION HOUSE 60",{
  "Item Name": "MC BRANDY 60",{
  "Item Name": "RED BULL ",{
  "Item Name": "COKE",{
  "Item Name": "SPRITE",{
  "Item Name": "SODA","SellingPrice": 33
},{
  "Item Name": "DIET COKE","SellingPrice": 56
},{
  "Item Name": "TONIC WATER",{
  "Item Name": "GINGER ALE",{
  "Item Name": "LIME SODA",{
  "Item Name": "LIME WATER",{
  "Item Name": "PACKEGED WATER 1L","SellingPrice": 39
},{
  "Item Name": "MANSION HOUSE 650","SellingPrice": 900
},{
  "Item Name": "Chole Kulche","SellingPrice": 80
},{
  "Item Name": "Butter Nan","SellingPrice": 65
},{
  "Item Name": "Dhai","SellingPrice": 20
},{
  "Item Name": "Rice","SellingPrice": 55
},{
  "Item Name": "Plain rice","SellingPrice": 30
},"SellingPrice": 30
}]

interval = '';

function initTable(tableValue) {
  addTable(tableValue)
  interval = window.setInterval(showRows,3000);
}

initTable(tableValue);


function hideImage() {
  //  5000 = 5 seconds
  window.setInterval(doHide,3000);
}

function doHide() {
  $("#displayImage").show() //this is here I am trying to show image
}




function showRows() {
  // Any TRs that are not hidden and not already shown get "already-shown" applies
  if ($(".hidden:lt(12)").length > 0) { //checking is it is the last page or not
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
  } else { // if it is the last row
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

    hideImage();
    //
    clearInterval(interval); //if last then clearing time interval and calling the function again 
    initTable(tableValue);
  }

  $(".hidden:lt(12)").removeClass("hidden"); // this one is to hide prevIoUs  rows and show next 
}

function addTable(tableValue) {
  var $tbl = $("<table />",{
      "class": "table fixed"
    }),$tb = $("<tbody/>"),$trh = $("<tr/>");

  var split = Math.round(tableValue.length / 4);
  for (i = 0; i < split; i++) {
    $tr = $("<tr/>",{
      class: "hidden "
    });

    for (j = 0; j < 4; j++) {
      $.each(tableValue[split * j + i],function(key,value) {
        if (typeof(value) === "number") {
          $("<td/>",{
            "class": "text-right color" + (j + 1)
          }).html(value).appendTo($tr);
        } else {
          $("<td/>",{
            "class": "text-left color" + (j + 1)
          }).html(value).appendTo($tr);
        }

      });
    }
    $tr.appendTo($tb);
  }
  $tbl.append($tb);
  $("#DisplayTable").html($tbl);
}
tbody>tr>td {
  white-space: normal;
  border-collapse: collapse;
  font-family: Verdana;
  font-weight: bold;
  font-size: .9em;
}

td:nth-child(2),td:nth-child(4),td:nth-child(6),td:nth-child(8) {
  width: 85px;
  max-width: 85px;
  height: 63px
}

.fixed {
  table-layout: fixed;
}

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

.hidden,.already-shown {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display: none">

  <img src="myImage.jpg" alt="Some Image" width="460" height="345">
</div>

编辑/更新

我已经编辑了我的代码段,并显示了一些代码图像,该图像显示在表格下方而不是最后一页之后,并且一旦显示便没有隐藏起来,然后仅显示出来

最佳答案
试试这个代码.我已经更新了您的隐藏图片代码.

var tableValue = [{
  "Item Name": "MANCHOW  V SOUP",{
  "Item Name": "the beach",3000);
}

initTable(tableValue);


function hideImage() {
    $("#displayImage").show(); //this is here I am trying to show image
  $("#DisplayTable").hide();
  
  setTimeout(function(){
    initTable(tableValue);
  },10000);
}





function showRows() {
  // Any TRs that are not hidden and not already shown get "already-shown" applies
  if ($(".hidden:lt(12)").length > 0) { //checking is it is the last page or not
  $("#displayImage").hide(); //this is here I am trying to show image
  $("#DisplayTable").show();
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
  } else { // if it is the last row
    $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");

    hideImage();
    //
    clearInterval(interval); //if last then clearing time interval and calling the function again 
  }

  $(".hidden:lt(12)").removeClass("hidden"); // this one is to hide prevIoUs  rows and show next 
}

function addTable(tableValue) {
  var $tbl = $("<table />",.already-shown {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>
<div id="displayImage" style="display: none">

  <img src="myImage.jpg" alt="Some Image" width="460" height="345">
</div>

猜你在找的HTML相关文章