树苗认养流程前端示例代码 - 轻松打造交互式体验 - 常规

以下是一个简单的前端示例代码，用于展示树苗认养的流程：

<!DOCTYPE html>
<html>
<head>
  <title>树苗认养流程示例</title>
  <style>
    .step {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .step span {
      font-weight: bold;
      margin-right: 10px;
    }
    
    .step .status {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ccc;
      background-color: #fff;
      margin-right: 10px;
    }
    
    .step.completed .status {
      border-color: #3bd16f;
      background-color: #3bd16f;
    }
    
    .step.active .status {
      border-color: #ff8a00;
      background-color: #ff8a00;
    }
    
    .step .title {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class='progress'>
    <div class='step completed'>
      <span class='status'></span>
      <span class='title'>选择树苗</span>
    </div>
    <div class='step active'>
      <span class='status'></span>
      <span class='title'>填写认养信息</span>
    </div>
    <div class='step'>
      <span class='status'></span>
      <span class='title'>支付认养费用</span>
    </div>
    <div class='step'>
      <span class='status'></span>
      <span class='title'>认养成功</span>
    </div>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const steps = document.querySelectorAll('.step');
      steps.forEach(function(step, index) {
        step.addEventListener('click', function() {
          // 将当前步骤标记为已完成
          step.classList.add('completed');
          
          // 将下一个步骤标记为进行中
          if (index < steps.length - 1) {
            steps[index + 1].classList.add('active');
          }
        });
      });
    });
  </script>
</body>
</html>

这段代码使用了HTML和CSS来构建一个简单的树苗认养流程示例。每个步骤都有一个状态标记和标题，用户可以点击每个步骤来标记其完成状态，并将下一个步骤标记为进行中。点击每个步骤后，会通过JavaScript动态添加相应的CSS类来实现状态的改变。