Javascript 我做错了什么？使用JS和CSS为StreamLabs/Twitch警报创建HTML进度条

让我先说声谢谢

我在这个名为StreamLabs for twitch streamers的网站上，他们介绍了一种使用自定义HTML、CSS和JS定制外观的方法

他们有一个叫做“流老板”的东西，可以对用户的跟踪、代理和/或捐赠做出反应

这个进度条进来了。代码如下：

HTML:

JS：“这里最重要的是：所有值都是通过twitch和streamlabs api预先确定的”

现在，让我们来看看我想做什么

这段基本代码根本没有进度条，但您有创建进度条的值和工具

我想做的是创建一个进度条，使用“当前健康状况和总健康状况”的值

另外，我不知道如何在JS中设置html进度条的最大值

我的代码：

HTML: 注意：boss的当前HP为295/300。预定的

<!-- All html objects will be wrapped in the #wrap div -->
      <div class='boss_cont'>
        <div id='username'></div>
        <div class='user_pic_cont'>
          <img id='user_pic' src=''>
        </div>
        <div id='user_hp_cont'>
          <span id='current_health'>0</span>/<span id='total_health'>0</span>
          <progress id='health' value="100" max="100"></progress>
        </div>
        <div id='message'>
        </div>
      </div>

我也试过设置

// Sets a percentage value as a whole integer from 0 - 100
var health = val.(obj.detail.boss.current_health/obj.detail.total_health) * 100;
$('.progress').val(health);

在凸台损坏之后

所有这些都可以通过激活测试捐赠、follow和/或subs进行测试

另一个问题是“是”或“否”。

---

有没有办法将该百分比值设置为宽度的css样式？

希望我能理解这里的第一个问题

进度条的最大值应始终为100。然后使用CurrentHealth/TotalHealth*100确定要填充多少条。您将填充部分的宽度设置为百分比CurrentHealth/TotalHealth*100，这将为您提供一个进度条。我来拉小提琴

var totalHealth = 300;
var currentHealth = 295;
var healthProgress = currentHealth/totalHealth*100;

现在我们需要将healthProgress设置为元素的宽度百分比

这是一个原型

---

很抱歉，我没有直接使用您的html/js，我想这样会更清晰一些。

希望我能理解这里的第一个问题

进度条的最大值应始终为100。然后使用CurrentHealth/TotalHealth*100确定要填充多少条。您将填充部分的宽度设置为百分比CurrentHealth/TotalHealth*100，这将为您提供一个进度条。我来拉小提琴

var totalHealth = 300;
var currentHealth = 295;
var healthProgress = currentHealth/totalHealth*100;

现在我们需要将healthProgress设置为元素的宽度百分比

这是一个原型

---

很抱歉，我没有直接使用您的html/js，我想这样会更清晰一些。

要回答您的最后一个问题，您可以使用百分比来表示CSS中的位置和大小。它把它作为父母的一个百分比（这就是我做进度条的方式）。这就是我试图做的。并将该数字插入CSS样式的“宽度”栏中。要回答您的最后一个问题，您可以使用CSS中的位置和大小百分比。它把它作为父母的一个百分比（这就是我做进度条的方式）。这就是我试图做的。并将该数字插入CSS样式的“宽度”栏中。我肯定这就是答案，但我就是不能让它对我正常工作。参考上面的代码，我的JS就是这样结束的：

$（'#current_health'）.text（obj.detail.boss.current_health）；函数calculateHealth（）{return$（'#current_health'）.val（obj.detail.boss.current_health）/$（'#total_health'）.val（obj.detail.total_health）*100；}函数setBossHealth（）{document getElementById（“bossHealth”）.style.width=calculateHealth+“%”               });

我还尝试了

返回obj.detail.boss.current_health/obj.detail.total_health*100我把这个函数放在了当老板受到“攻击”时的函数中，所有的代码都会在原始评论中发布。这就是为什么我发布了他们默认显示的内容，然后是我的编辑。我找到了答案，谢谢
$（'.progress bar'）.css（{“width”：Math.round（obj.detail.boss.current\u health/obj.detail.boss.total\u health*100）+“%”）我肯定这是答案，但我就是不能让它对我正常工作。参考上面的代码，我的JS就是这样结束的：
$（'#current_health'）.text（obj.detail.boss.current_health）；函数calculateHealth（）{return$（'#current_health'）.val（obj.detail.boss.current_health）/$（'#total_health'）.val（obj.detail.total_health）*100；}函数setBossHealth（）{document getElementById（“bossHealth”）.style.width=calculateHealth+“%”               });
我还尝试了
返回obj.detail.boss.current_health/obj.detail.total_health*100我把这个函数放在了当老板受到“攻击”时的函数中，所有的代码都会在原始评论中发布。这就是为什么我发布了他们默认显示的内容，然后是我的编辑。我找到了答案，谢谢<代码>$（'.progress bar'）.css（{“width”：Math.round（obj.detail.boss.current_-health/obj.detail.boss.total_-health*100）+“%”}）
// Events will be sent when the boss is damaged or killed.
          // Please use event listeners to run functions.
          document.addEventListener('bossLoad', function(obj) {
          // obj.detail will contain information about the current boss
          // this will fire only once when the widget loads
          console.log(obj.detail);
          $('#user_pic').attr('src', obj.detail.boss_img);
          $('#current_health').text(obj.detail.current_health);
          $('#total_health').text(obj.detail.total_health);
          $('#username').text(obj.detail.boss_name);
          });
          document.addEventListener('bossDamaged', function(obj) {
          // obj.detail will contain information about the boss and a
          // custom message
          console.log(obj.detail);
          $('#current_health').text(obj.detail.boss.current_health);
          $('#user_hp_cont progress').val(obj.detail.boss.current_health);
          });
          // Similarly for for when a boss is killed
          document.addEventListener('bossKilled', function(obj) {
          console.log(obj.detail);
          $('#username').text(obj.detail.boss.boss_name);
          $('#user_pic').attr('src', obj.detail.boss.boss_img);
          $('#current_health').text(obj.detail.boss.current_health);
          $('#total_health').text(obj.detail.boss.total_health);
      });

// Sets a percentage value as a whole integer from 0 - 100
var health = val.(obj.detail.boss.current_health/obj.detail.total_health) * 100;
$('.progress').val(health);

var totalHealth = 300;
var currentHealth = 295;
var healthProgress = currentHealth/totalHealth*100;