AI 프로그래밍 및 작업 분할

2년 전 사이트에 코드 영역 복사 기능을 추가하려고 했는데, 반쯤 날로 붙들여 놓은 듯했고, 렌더링 효과도 만족스럽지 않았습니다. 반쪽짜리 프론트엔드 개발자였으니 개선할 생각도 없이 그냥 쓰고 있었는데, 올해 __INLINE_CODE_0__으로 미니 프로그램을 개발하면서 프론트엔드 개발에 더 익숙해졌고, AI를 활용하여 다시 디자인했습니다.

깨달음: 임무 분해, 여러 소임들, 이탤릭 강조 굵게 표시_ 또 다른 소임들_

전문

죄송합니다, 번역할 중국어 텍스트가 제공되지 않았습니다. 텍스트를 제공해 주시면 번역해 드리겠습니다.

본문

promot: CSS 및 JavaScript 코드를 설계하여, 클래스가 “highlight"인 웹 요소의 컨테이너 내에 복사 버튼을 추가하고 코드 복사 기능을 구현합니다

제공된 첫 번째 초안 코드에는 문제가 있어 보입니다. 다시 생성한 두 번째 초안은 기본적으로 사용 가능하지만, 복사된 내용이 정확하지 않고 불필요한 텍스트가 있습니다. 핵심 색상 디자인과 포함될 효과를 지정하여 추가 최적화를 유도합니다.

버튼 크기 및 색상에 대한 특정 요구 사항을 파악했습니다. 이러한 요구 사항에 맞게 버튼 스타일을 재설계할 수 있으며, 제공해주신 색상 구성표를 포함하고 버튼 크기를 최적화한 CSS 스타일이 아래와 같습니다.

.copy-btn {
  position: absolute;
  top: 2px; /* 调整位置 */
  right: 2px;
  padding: 3px 6px; /* 缩小尺寸 */
  font-size: 12px; /* 减小字体大小 */
  background-color: #8FD1E1; /* 按钮背景色 */
  color: #272822; /* 文字颜色 */
  border: 1px solid #272822; /* 边框颜色 */
  border-radius: 3px; /* 圆角 */
  cursor: pointer;
  opacity: 0.7; /* 默认半透明 */
  transition: opacity 0.3s ease, background-color 0.3s ease; /* 平滑过渡效果 */
}

.copy-btn:hover {
  opacity: 1; /* 鼠标悬停时不透明 */
  background-color: #A3D4E5; /* 鼠标悬停时的背景色 */
}

.highlight {
  position: relative;
}

이 스타일에서 버튼 크기와 글꼴 크기를 줄여 더욱 세련되게 만들었습니다. 또한, 버튼의 기본 상태는 반투명하며, 마우스가 올라오면 불투명해지고 배경색이 약간 밝아져 시각적인 피드백을 제공합니다. 이러한 디자인은 귀하의 색상 요구 사항을 충족하면서도 현대적이고 사용자 친화적인 특징을 유지합니다.

해당하는 더 간단한 ____이 제공되었습니다

document.addEventListener('DOMContentLoaded', function() {
  // 查找所有 .highlight 元素
  const highlights = document.querySelectorAll('.highlight');

  highlights.forEach(function(highlight) {
    // 创建复制按钮
    const copyBtn = document.createElement('button');
    copyBtn.textContent = '复制';
    copyBtn.classList.add('copy-btn');

    // 将按钮添加到每个 .highlight 元素中
    highlight.appendChild(copyBtn);

    // 添加点击事件监听器
    copyBtn.addEventListener('click', function() {
      // 假设 .highlight 下的第一个 <code> 元素包含要复制的代码
      const code = highlight.querySelector('code') ? highlight.querySelector('code').textContent : '';

      navigator.clipboard.writeText(code).then(() => {
        // 显示复制成功信息
        copyBtn.textContent = '已复制!';
        setTimeout(() => {
          copyBtn.textContent = '复制';
        }, 2000);
      }).catch(err => {
        console.error('复制失败: ', err);
      });
    });
  });
});

사후기

비록 코드 영역 오른쪽 상단에 복사 버튼을 추가하기를 더 바라지만, 프론트엔드에 대한 이해 부족으로 정확한 기능 설명을 위한 키워드를 제시하지 못했고, __INLINE_CODE_0__과 여러 차례 시도했음에도 기대했던 결과를 얻지 못했습니다

시간이 지남에 따라 AI이 프로그램 개발에 얼마나 영향을 미칠지 모르겠다