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

Question

Let me start by saying thank you in advance!

I'm on this site called StreamLabs for twitch streamers and they've introduced a way to use custom HTML, CSS, & JS to customize your look.

They have a thing called "Stream boss" that reacts to users following, sub, and/or donating.

In comes this progress bar. Here's the code:

HTML:

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

CSS: "kinda irrelevant at this moment"

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

JS: "the important thing here: all values are predetermined with twitch and streamlabs api"

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

Now, let's get to what I'm trying to do.

This basic code DOES NOT have a progress bar at all, but you have the values and tools to create one.

What I'm trying to do is create a progress bar that uses the values of the "current_health and total_health"

Also, i don't know how to set the max value of an html progress bar in JS.

My code:

HTML: NOTE: The current HP of the boss is 295/300. Predetermined.

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

JS:

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

I've also tried setting

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

after the boss is damaged.

All of this can be tested with activating test donations, follows, and/or subs.

Another question is quick yes or no. Is there a way to set that percentage value into a css style for the width?

Answer 1

Hopefully I understand the first question here.

The max value for your progress bar should be always be 100. Then you use that CurrentHealth/TotalHealth*100 to determine how much of that bar to fill in. You'll set your width of the filled in portion to CurrentHealth/TotalHealth*100 as a percentage and that will give you a progress bar. Ill make a fiddle.

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

Now we need to set healthProgress as a width percentage on our element.

Here's a prototype https://jsfiddle.net/2Lsvxegs/5/

Sorry I didn't directly use your html/js, thought it would be a little clearer like this.