내가 뭘 잘못 했니? StreamLabs/Twitch 알리미를 위해 JS 및 CSS를 사용하여 HTML의 진행 표시 줄 만들기

Question

미리 감사드립니다.

나는이 사이트에서 트위터 깃발을위한 StreamLabs를 사용하고 있으며 사용자 정의 HTML, CSS, & JS를 사용하여 모양을 사용자 정의하는 방법을 소개했습니다.

그들은 "스트림 보스 (Stream Boss)"라고 불리는 것을 가지고 있는데, 이는 다음, 하위 및/또는 기부자에게 반응합니다.

이 진행률 표시 줄이 나타납니다.

이

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 :

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

JS "이 순간에 좀 무관": "여기서 중요한 것은 모든 값은 트와 미리 결정하는이 API를 streamlabs 여기 코드는 "

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

이제 내가하려는 일에 대해 알아 보겠습니다.

이 기본 코드에는 진행률 표시 줄이 전혀 없지만 만들려면 값과 도구가 있어야합니다.

가 난 할 노력하고있어하면의 값 "current_health 및 total_health"을 사용하여 진행률 표시 줄을 만드는 것입니다 또한

, 나는 HTML 진행률 표시 줄의 최대 값을 설정하는 방법을 모른다 JS.

내 코드 :

HTML : 참고 : 보스의 현재 HP가 300분의 295입니다. 미리 결정됨.

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

또한 상사가 손상된 후

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

설정을 시도했습니다.

이 모두는 시험 기증, 다음 시험 및/또는 보조 시험으로 시험 할 수 있습니다.

또 다른 질문은 예 또는 아니오입니다. 해당 백분율 값을 너비의 CSS 스타일로 설정하는 방법이 있습니까?

Answer 1

여기서 첫 번째 질문을 이해하기 바랍니다.

진행률 막대의 최대 값은 항상 100이어야합니다. 그런 다음 해당 CurrentHealth/TotalHealth * 100을 사용하여 채울 부분의 양을 결정합니다. 채워진 부분의 너비를 CurrentHealth로 설정합니다/TotalHealth * 100을 백분율로 입력하면 진행률 표시 줄이 나타납니다. 나쁘게 바이올린을 만들어라.

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

이제 healthProgress를 요소의 너비 비율로 설정해야합니다.

여기 미안 직접 HTML을 /를 JS를 사용하지 않은, 그것은이 같은 작은 명확 것이라고 생각 https://jsfiddle.net/2Lsvxegs/5/

프로토 타입을합니다.