人生倒计时web小组件 可显示进度条及文字过去几小时,几周,几月,几小时

模仿博客的人生倒计时小组件,为你的网站添加一些色彩吧! |ω・）
它可以显示 ：

• 今日已经过去几小时
• 这周已经过去几天
• 本月已经过去几周
• 今年已经过去几个月。

主要特点

1. 实时更新：小组件会实时更新当前的时间进度，确保数据的准确性。
2. 可视化展示：通过颜色条的形式展示时间进度，一目了然。
3. 多维度统计：不仅显示今日的时间进度，还涵盖了本周、本月和今年的时间进度，帮助用户从多个角度了解时间的利用情况。
4. 简洁易用：界面设计简洁明了，用户可以轻松查看所需信息。

演示地址

https://lgnb.asia/admin/demo/95-countdown_life

人生倒计时演示图片

---

演示

html

  <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">      
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
<div class="Countdownlife_life-counter">
  <div class="Countdownlife_header">
    <img src="https://lgnb.asia/admin/demo/95-countdown_life/daoji.svg" alt="倒计时图标" class="Countdownlife_icon">
    <h2>人生倒计时</h2>
    <div class="Countdownlife_badge-container">
      <span class="layui-badge-dot"></span>
      <span class="layui-badge-dot layui-bg-orange"></span>
      <span class="layui-badge-dot layui-bg-green"></span>
    </div>
  </div>

  <!-- Today -->
  <div class="Countdownlife_counter-item" data-progress="today">
    <div class="Countdownlife_counter-title">今日已经过去</div>
    <div class="Countdownlife_counter-value">0 小时</div>
    <div class="layui-progress layui-progress-big Countdownlife_progress">
      <div class="layui-progress-bar" lay-showpercent="true" lay-percent="0%"></div>
    </div>
  </div>

  <!-- This Week -->
  <hr class="ws-space-16">
  <div class="Countdownlife_counter-item" data-progress="week">
    <div class="Countdownlife_counter-title">这周已经过去</div>
    <div class="Countdownlife_counter-value">0 天</div>
    <div class="layui-progress layui-progress-big Countdownlife_progress">
      <div class="layui-progress-bar layui-bg-orange" lay-showpercent="true" lay-percent="0%"></div>
    </div>
  </div>

  <!-- This Month -->
  <hr class="ws-space-16">
  <div class="Countdownlife_counter-item" data-progress="month">
    <div class="Countdownlife_counter-title">本月已经过去</div>
    <div class="Countdownlife_counter-value">0 天</div>
    <div class="layui-progress layui-progress-big Countdownlife_progress">
      <div class="layui-progress-bar layui-bg-red" lay-showpercent="true" lay-percent="0%"></div>
    </div>
  </div>

  <!-- This Year -->
  <hr class="ws-space-16">
  <div class="Countdownlife_counter-item" data-progress="year">
    <div class="Countdownlife_counter-title">今年已经过去</div>
    <div class="Countdownlife_counter-value">0 个月</div>
    <div class="layui-progress layui-progress-big Countdownlife_progress">
      <div class="layui-progress-bar layui-bg-green" lay-showpercent="true" lay-percent="0%"></div>
    </div>
  </div>
</div>

css

.Countdownlife_life-counter {
  width: 300px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 20px;
}
.Countdownlife_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}
.Countdownlife_icon {
  width: 24px; /* 设置图标的宽度 */
  height: 24px; /* 设置图标的高度 */
  margin-right: 10px; /* 给图标和标题之间增加一些间距 */
}
.Countdownlife_header h2 {
  margin: 0;
  font-size: 24px;
}
.Countdownlife_badge-container {
  display: flex;
  gap: 5px; /* 使三个layui颜色圆点更紧凑 */
}
.Countdownlife_counter-item {
  margin-bottom: 20px;
}
.Countdownlife_counter-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}
.Countdownlife_counter-value {
  font-size: 18px;
  color: #31bdec;
  margin-bottom: 10px;
}
.Countdownlife_progress .layui-progress-bar {
  border-radius: 10px;
}
.Countdownlife_progress .layui-progress-bar.layui-bg-red {
  background-color: #F44336;
}
.Countdownlife_progress .layui-progress-bar.layui-bg-orange {
  background-color: #FF9800;
}
.Countdownlife_progress .layui-progress-bar.layui-bg-green {
  background-color: #4CAF50;
}

JavaScript

function updateLifeCounter() {
  const now = new Date();
  
  // 更新今日进度
  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const tomorrowStart = new Date(todayStart);
  tomorrowStart.setDate(todayStart.getDate() + 1);
  const todayProgress = ((now - todayStart) / (tomorrowStart - todayStart)) * 100;
  updateProgress('today', Math.floor(todayProgress / (100/24)), todayProgress.toFixed(2));

  // 更新本周进度
  const weekStart = new Date(now.getFullYear(), now.getMonth(), now.getDate() - ((now.getDay() + 6) % 7)); // Get Monday of this week
  const daysPassedInWeek = Math.ceil((now - weekStart) / (1000 * 60 * 60 * 24));
  const nextWeekStart = new Date(weekStart);
  nextWeekStart.setDate(weekStart.getDate() + 7);
  const weekProgress = ((now - weekStart) / (nextWeekStart - weekStart)) * 100;
  updateProgress('week', daysPassedInWeek, weekProgress.toFixed(2));

  // 更新本月进度
  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
  const daysPassedInMonth = now.getDate(); // Directly get the day of the month
  const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
  const monthProgress = ((now - monthStart) / (daysInMonth * 24 * 60 * 60 * 1000)) * 100;
  updateProgress('month', daysPassedInMonth, monthProgress.toFixed(2));

  // 更新今年进度
  const yearStart = new Date(now.getFullYear(), 0, 1);
  const monthsPassed = now.getMonth() + 1; // Months are zero-indexed in JavaScript
  const yearProgress = ((now - yearStart) / (new Date(now.getFullYear() + 1, 0, 1) - yearStart)) * 100;
  updateProgress('year', monthsPassed, yearProgress.toFixed(2));
}

function updateProgress(timeUnit, value, percent) {
  const counterValueElement = document.querySelector(`.Countdownlife_counter-item[data-progress="${timeUnit}"] .Countdownlife_counter-value`);
  const progressBarElement = document.querySelector(`.Countdownlife_counter-item[data-progress="${timeUnit}"] .layui-progress-bar`);

  if (counterValueElement && progressBarElement) {
    counterValueElement.textContent = `${value} ${timeUnit === 'today' ? '小时' : timeUnit === 'week' ? '天' : timeUnit === 'month' ? '天' : '个月'}`;
    progressBarElement.setAttribute('lay-percent', percent + '%');
  } else {
    console.error(`Elements for ${timeUnit} not found.`);
  }
}

// 初始化时更新一次
updateLifeCounter();
// 每秒更新一次
setInterval(updateLifeCounter, 1000);

// Debugging: Log current date and calculated values to ensure correctness
console.log("Current date:", new Date().toISOString());

以上就是完整代码。

或者你可以选择完整的HTML代码(包含CSS和JS)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人生倒计时web小组件演示</title>
      <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">    
    <style>
        .Countdownlife_life-counter {
  width: 300px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 20px;
}
.Countdownlife_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
}
.Countdownlife_icon {
  width: 24px; /* 设置图标的宽度 */
  height: 24px; /* 设置图标的高度 */
  margin-right: 10px; /* 给图标和标题之间增加一些间距 */
}
.Countdownlife_header h2 {
  margin: 0;
  font-size: 24px;
}
.Countdownlife_badge-container {
  display: flex;
  gap: 5px; /* 使三个layui颜色圆点更紧凑 */
}
.Countdownlife_counter-item {
  margin-bottom: 20px;
}
.Countdownlife_counter-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}
.Countdownlife_counter-value {
  font-size: 18px;
  color: #31bdec;
  margin-bottom: 10px;
}
.Countdownlife_progress .layui-progress-bar {
  border-radius: 10px;
}
.Countdownlife_progress .layui-progress-bar.layui-bg-red {
  background-color: #F44336;
}
.Countdownlife_progress .layui-progress-bar.layui-bg-orange {
  background-color: #FF9800;
}
.Countdownlife_progress .layui-progress-bar.layui-bg-green {
  background-color: #4CAF50;
}
    </style>
</head>

<body>

       <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
       <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <div class="Countdownlife_life-counter">
        <div class="Countdownlife_header">
            <img src="https://lgnb.asia/admin/demo/95-countdown_life/daoji.svg" alt="倒计时图标" class="Countdownlife_icon">
            <h2>人生倒计时</h2>
            <div class="Countdownlife_badge-container">
                <span class="layui-badge-dot"></span>
                <span class="layui-badge-dot layui-bg-orange"></span>
                <span class="layui-badge-dot layui-bg-green"></span>
            </div>
        </div>

        <!-- Today -->
        <div class="Countdownlife_counter-item" data-progress="today">
            <div class="Countdownlife_counter-title">今日已经过去</div>
            <div class="Countdownlife_counter-value">0 小时</div>
            <div class="layui-progress layui-progress-big Countdownlife_progress">
                <div class="layui-progress-bar" lay-showpercent="true" lay-percent="0%"></div>
            </div>
        </div>

        <!-- This Week -->
        <hr class="ws-space-16">
        <div class="Countdownlife_counter-item" data-progress="week">
            <div class="Countdownlife_counter-title">这周已经过去</div>
            <div class="Countdownlife_counter-value">0 天</div>
            <div class="layui-progress layui-progress-big Countdownlife_progress">
                <div class="layui-progress-bar layui-bg-orange" lay-showpercent="true" lay-percent="0%"></div>
            </div>
        </div>

        <!-- This Month -->
        <hr class="ws-space-16">
        <div class="Countdownlife_counter-item" data-progress="month">
            <div class="Countdownlife_counter-title">本月已经过去</div>
            <div class="Countdownlife_counter-value">0 天</div>
            <div class="layui-progress layui-progress-big Countdownlife_progress">
                <div class="layui-progress-bar layui-bg-red" lay-showpercent="true" lay-percent="0%"></div>
            </div>
        </div>

        <!-- This Year -->
        <hr class="ws-space-16">
        <div class="Countdownlife_counter-item" data-progress="year">
            <div class="Countdownlife_counter-title">今年已经过去</div>
            <div class="Countdownlife_counter-value">0 个月</div>
            <div class="layui-progress layui-progress-big Countdownlife_progress">
                <div class="layui-progress-bar layui-bg-green" lay-showpercent="true" lay-percent="0%"></div>
            </div>
        </div>
    </div>

    <script>
        function updateLifeCounter() {
          const now = new Date();
          
          // 更新今日进度
          const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
          const tomorrowStart = new Date(todayStart);
          tomorrowStart.setDate(todayStart.getDate() + 1);
          const todayProgress = ((now - todayStart) / (tomorrowStart - todayStart)) * 100;
          updateProgress('today', Math.floor(todayProgress / (100/24)), todayProgress.toFixed(2));
        
          // 更新本周进度
          const weekStart = new Date(now.getFullYear(), now.getMonth(), now.getDate() - ((now.getDay() + 6) % 7)); // Get Monday of this week
          const daysPassedInWeek = Math.ceil((now - weekStart) / (1000 * 60 * 60 * 24));
          const nextWeekStart = new Date(weekStart);
          nextWeekStart.setDate(weekStart.getDate() + 7);
          const weekProgress = ((now - weekStart) / (nextWeekStart - weekStart)) * 100;
          updateProgress('week', daysPassedInWeek, weekProgress.toFixed(2));
        
          // 更新本月进度
          const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
          const daysPassedInMonth = now.getDate(); // Directly get the day of the month
          const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
          const monthProgress = ((now - monthStart) / (daysInMonth * 24 * 60 * 60 * 1000)) * 100;
          updateProgress('month', daysPassedInMonth, monthProgress.toFixed(2));
        
          // 更新今年进度
          const yearStart = new Date(now.getFullYear(), 0, 1);
          const monthsPassed = now.getMonth() + 1; // Months are zero-indexed in JavaScript
          const yearProgress = ((now - yearStart) / (new Date(now.getFullYear() + 1, 0, 1) - yearStart)) * 100;
          updateProgress('year', monthsPassed, yearProgress.toFixed(2));
        }
        
        function updateProgress(timeUnit, value, percent) {
          const counterValueElement = document.querySelector(`.Countdownlife_counter-item[data-progress="${timeUnit}"] .Countdownlife_counter-value`);
          const progressBarElement = document.querySelector(`.Countdownlife_counter-item[data-progress="${timeUnit}"] .layui-progress-bar`);
        
          if (counterValueElement && progressBarElement) {
         counterValueElement.textContent = `${value} ${timeUnit === 'today' ? '小时' : timeUnit === 'week' ? '天' : timeUnit === 'month' ? '天' : '个月'}`;
         progressBarElement.setAttribute('lay-percent', percent + '%');
          } else {
         console.error(`Elements for ${timeUnit} not found.`);
          }
        }
        
        // 初始化时更新一次
        updateLifeCounter();
        // 每秒更新一次
        setInterval(updateLifeCounter, 1000);
        
        // Debugging: Log current date and calculated values to ensure correctness
        console.log("Current date:", new Date().toISOString());
    </script>
</body>

</html>