Javascript 当条满时如何让div可见[JS]

我的名字是丹尼尔，我正在为学校做一个饮酒游戏，我想让一个div在酒吧满的时候出现（这样你就知道酒吧满了，你就赢了比赛），但我不知道怎么做

你能帮我吗

HTML:

<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
</div>
</div>

JS:

#bar {
  background-color: #F8F8F8 ;
  width: 340px;
  height: 24px;
  margin-right: auto;
  margin-left: auto;
}
#bar > div {
    margin-top: 30px;
  max-width: 334px;
  width: 100%;
  height: 16px;
  background: #9d3349;
  position: relative;
  top: 4px;
  left: 3px;
  transition: width 500ms;
}

var jumpsize = 2.77, // %
  body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
  px
) {
  return 100 * px / container.width();
}), (set = function(pcnt) {
  bar.css({ width: pcnt + "%" });
});

body
  .on("click", ".card1, .card2, .card3, .card4", function() {
    set(topcnt(bar.width()) + jumpsize);
  });

set(0);

---

当您达到目标时，您需要删除Display=none的CSS样式

W3学校页面提供一些有用的信息，帮助您了解更多信息

当您达到要显示的目标时，下面插入的行应使条形图出现

document.getElementById("hiddenText").style.display = "block";

---

您使用jQuery的速度将更快：

$('#hiddenText').show();

编辑： 苏欧

---

如您所见，带有进度条的div的最大od为334 px。检查是否有，如果有，则显示文本。将其放入该单击事件中

我不确定您是否需要此项，但请尝试以下操作：

var jumpsize=2.77，//%
宽度=0，
正文=$（“正文”）；
（container=$（“#bar”），（bar=container.children（“div”），（topcnt=function(
二甲苯
) {
返回100*px/容器宽度（）；
})，（设置=功能（pcnt）{
css（{宽度：pcnt+“%”}）；
如果（pcnt>=100）{$（'hiddenText'）.show（）；}
});
身体
.on（“单击“，”.card1、.card2、.card3、.card4”，函数（）{
宽度+=跳线尺寸；
设置（顶部CNT（宽度））；
});
组（0）
#条{
背景色：#F8；
宽度：340px；
高度：24px；
右边距：自动；
左边距：自动；
}
#条形图>div{
边缘顶部：30px；
最大宽度：334px；
宽度：100%；
高度：16px；
背景#9d3349；
位置：相对位置；
顶部：4px；
左：3px；
过渡段：宽度500ms；
}

单击我
在我看来，百分比计算有点过于复杂了。我只需要为从0开始的条的宽度添加一个变量，并在每次单击时随jumpsize的增加而增加。一旦这个新变量超过或等于100，就显示隐藏的div

HTML

<div class="col-xs-12" id="hiddenText">
  <div id="bar" class="animated bounceInUp">
    <div></div>
  </div>
</div>
<button id="button">Click me</button>
<div id="showOnComplete">Show me when the bar is full!</div>

JS

#bar {
  width: 340px;
  height: 24px;
  padding: 4px 3px;
  margin: 30px auto 0;
  background-color: #f8f8f8;
}

#bar > div {
  position: relative;
  float: left;
  height: 100%;
  width: 0;
  max-width: 100%;
  background: #9d3349;
  transition: width 500ms;
}

#button {
  margin: 20px auto;
  display: block;
}

#showOnComplete {
  width: 400px;
  padding: 20px;
  margin: 20px auto;
  background: blue;
  color: #fff;
  text-align: center;
  display: none;
}

(function($) {
  var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often
      barWidth = 0,
      $bar,
      $showOnComplete;

  $(function() {
    $bar = $("#bar").children("div");
    $showOnComplete = $("#showOnComplete");

    $(document).on("click", "#button", function() {
      barWidth += jumpSize;
      $bar.width(barWidth + "%");
      if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar
    });
  });
})(jQuery);

我把它弄得一团糟。
它不起作用的原因是你忘了在单击时运行的函数中放入if语句。因此if语句只运行一次。在第一次加载时，它将导致错误。要修复代码，请在Body.onclick中移动if语句

下次，最好包含与函数相关的完整javascript

通过查看在线代码，我找到了问题所在

希望这能解决你的问题

~Yannick
这不是我想要的。。。我会把你链接到这个网站，这样你就能更好地了解我在做什么。。点击卡片来填满吧台，但是我希望当吧台满的时候会发生一些事情，这不是我想要的。。。我会把你链接到这个网站，这样你就能更好地了解我在做什么。。点击卡片来填满吧台，但是我希望当吧台满的时候会发生一些事情，这不是我想要的。。。我会把你链接到这个网站，这样你就能更好地了解我在做什么。。点击卡片填充栏，但我希望在栏满时发生一些事情。我现在做了这个：当栏满时需要显示，如果（$（'#bar'）.children（'div'）.width（）>=334）{$（'#hiddenText5'）.show（）}这不起作用…老实说，现在我不知道你想展示哪个div？这也让你更容易确定jumpsize。如果您希望在单击20次后显示div，则jumpsize将仅为100/20=5。
(function($) {
  var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often
      barWidth = 0,
      $bar,
      $showOnComplete;

  $(function() {
    $bar = $("#bar").children("div");
    $showOnComplete = $("#showOnComplete");

    $(document).on("click", "#button", function() {
      barWidth += jumpSize;
      $bar.width(barWidth + "%");
      if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar
    });
  });
})(jQuery);