当前位置：首页 > news >正文

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

news 来源：原创 2025/5/21 10:15:00

直接拿去玩吧，花了我两个小时。
搜了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:00function 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>
"