Question

首先让我先说谢谢你！

我在这个名为StreamLabs的网站上为抽搐的飘带而且他们已经介绍了一种使用自定义HTML，CSS和＆amp;的方法。 JS定制你的外观。

他们有一个名为“Stream boss”的东西，可以对用户进行跟踪，分发和/或捐赠。

进入这个进度条。这是代码：

HTML：

C:\ProgramData\Anaconda2\python.exe: can't open file 
'/cygdrive/c/ProgramData/Anaconda2/Scripts/aws': [Errno 2] No such file or 
directory
setup_p2.sh: line 7: [: =: unary operator expected
setup_p2.sh: line 9: [: =: unary operator expected
setup_p2.sh: line 11: [: =: unary operator expected
Only us-west-2 (Oregon), eu-west-1 (Ireland), and us-east-1 (Virginia) are 
currently supported

CSS：“此时此刻无关紧要”

      <!-- 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>
        </div>
        <div id='message'>
        </div>
      </div>

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

 /* All html objects will be wrapped in the #wrap div */
      .boss_cont {
          color:white;
          background:black;
      }

现在，让我们来看看我想要做的事情。

这个基本代码根本没有进度条，但你有值和工具来创建一个。

我要做的是创建一个使用“current_health和total_health”值的进度条

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

我的代码：

HTML： 注意：老板当前的HP为295/300。预定的。

          // 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);
          });
          // 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);
      });

JS：

<!-- 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>

我也尝试过设置

// 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);
      });

老板受损后。

所有这些都可以通过激活测试捐赠，跟随和/或潜在测试来进行测试。

另一个问题是快速是或否。有没有办法将该百分比值设置为宽度的css样式？

Answer 1

希望我在这里理解第一个问题。

进度条的最大值应始终为100.然后使用CurrentHealth / TotalHealth * 100来确定要填充的条数。您可以将填充部分的宽度设置为CurrentHealth / TotalHealth * 100作为百分比，将为您提供进度条。生病了。

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

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

这是一个原型 https://jsfiddle.net/2Lsvxegs/5/

抱歉，我没有直接使用你的html / js，认为这样会更加清晰。

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

1 个答案: