power BI 倒计时+插件HTML Content，实现更新倒计时看板！

直接拿去玩吧，花了我两个小时。
搜了b站和百度都没找到像样的，就决定自己干一个了。

先看效果：

起个度量值，然后去power bi 插件那边搜索html Content，把这个放进html content插件的字段values即可。

HTML倒计时每周一18点循环版 = 
"
<div style='text-align:center; padding:20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);'>
  <div style='margin-bottom: 15px; font-family: Arial; color: #444;'>
    <span style='font-size: 18px;'>数据更新倒计时</span>
    <span id='countdown' style='font-size: 24px; margin-left: 10px; color: #d32f2f;'>00天 00时 00分 00秒</span>
  </div>
  <svg width='300' height='30' xmlns='http://www.w3.org/2000/svg' style='overflow: visible;'>
    <rect width='100%' height='20' rx='10' fill='#f0f0f0'></rect>
    <defs>
      <linearGradient id='barGradient' x1='0%' y1='0%' x2='100%' y2='0%' gradientUnits='userSpaceOnUse'>
        <stop id='gradientStart' offset='0%' stop-color='#ff6b6b'/>
        <stop id='gradientEnd' offset='100%' stop-color='#d32f2f'/>
      </linearGradient>
    </defs>
    <path id='progress' d='M10,10 L290,10' stroke='url(#barGradient)' stroke-width='20'
          stroke-linecap='round' fill='none' stroke-dasharray='0 280'/>
  </svg>
</div>

<script>
  // 计算下一个周一 18:00
  function getNextMonday6PM() {
    var now = new Date();
    var day = now.getDay();           
    var offset = (1 - day + 7) % 7;   
    if(offset === 0 && now.getHours() >= 18) {
      offset = 7;
    }
    var target = new Date(now);
    target.setDate(now.getDate() + offset);
    target.setHours(18,0,0,0);
    return target;
  }

  var pathLength = 280;
  var elements = {
    progressBar: document.getElementById('progress'),
    gradientStart: document.getElementById('gradientStart'),
    gradientEnd: document.getElementById('gradientEnd'),
    countdown: document.getElementById('countdown')
  };

  var targetTime = getNextMonday6PM();
  var initialSeconds = Math.round((targetTime - new Date()) / 1000);

  function formatCountdown(sec) {
    var days = Math.floor(sec / 86400),
        hrs  = Math.floor((sec % 86400) / 3600),
        mins = Math.floor((sec % 3600) / 60),
        secs = sec % 60;
    var d = days < 10 ? '0' + days : days;
    var h = hrs   < 10 ? '0' + hrs   : hrs;
    var m = mins  < 10 ? '0' + mins  : mins;
    var s = secs  < 10 ? '0' + secs  : secs;
    return d + '天 ' + h + '时 ' + m + '分 ' + s + '秒';
  }

  function updateProgress() {
    var now = new Date();
    if(now >= targetTime) {
      targetTime = getNextMonday6PM();
      initialSeconds = Math.round((targetTime - now) / 1000);
    }
    var remaining = Math.round((targetTime - now) / 1000);
    var progress  = (initialSeconds - remaining) / initialSeconds * pathLength;

    elements.progressBar.setAttribute('stroke-dasharray', progress + ' ' + pathLength);
    elements.countdown.textContent = formatCountdown(remaining);

    var pct = remaining / initialSeconds;
    elements.gradientStart.setAttribute('stop-color',
      'hsl(0,' + (80 + 20 * (1 - pct)) + '%,60%)');
    elements.gradientEnd.setAttribute('stop-color',
      'hsl(0,' + (60 + 40 * (1 - pct)) + '%,40%)');
  }

  // 立刻执行并开始每秒更新
  updateProgress();
  setInterval(updateProgress, 1000);
</script>

<style>
  /* 1s 线性过渡，同步每秒步进，消除闪烁 */
  #progress {
    transition: stroke-dasharray 1s linear !important;
    will-change: stroke-dasharray;
  }
</style>
"