Skip to content
当前页导航

ChatGPT 编写代码

使用 ChatGPT 编写代码

使用 ChatGPT 编写代码就像有一位经验丰富的程序员在帮助您一样。

如果您知道如何提问,ChatGPT 可以为您节省大量编码时间!

定义任务

在使用生成式 AI 来帮助您之前,请为您的代码设定明确的目标。

目标示例:

  • 创建特定函数
  • 调试现有代码

一般来说,在使用生成式人工智能时,清晰度和上下文很重要,但在使用它们编写代码时,它甚至更重要!

例如,编写“创建一个函数来倒计时直到下周六的天数和小时数”。而不是“编写代码来查找最近的星期六”

选择编程语言

为了更具体,请指定您需要的编程语言。

如果您不确定使用哪种编程语言,您可以询问 ChatGPT:

输入

我应该使用哪种编程语言为网页创建下周六的倒计时?

输出

您可以使用HTML、CSS和JavaScript来为网页创建下周六的倒计时。HTML用于创建网页的结构,CSS用于样式化网页,而JavaScript可以实现倒计时功能。

chat-24.jpg

现在我们可以进一步明确我们的任务:“创建一个 JavaScript 函数,用于倒计时直到下周六的天数和小时数。”

向 ChatGPT 寻求帮助

现在,我们可以使用 ChatGPT 来编写我们的代码。

假设您有以下网页:

html
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>The weekend is only <span id="weekend_coundown"></span>from now!</p>

</body>
</html>

请ChatGPT 编写代码:

输入

对于以下网页:
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>The weekend is only <span id="weekend_coundown"></span>from now!</p>

</body>
</html>

创建一个JavaScript函数,倒数到下周六的天数和小时数。

输出

您可以在以上的HTML代码中添加以下JavaScript代码,来实现倒数到下周六的天数和小时数:


<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>The weekend is only <span id="weekend_countdown"></span> from now!</p>

<script>
  function countdownToNextSaturday() {
    const now = new Date();
    const targetDate = new Date();

    // 获取当前日期是星期几(0表示星期日,1表示星期一,依次类推)
    const currentDay = now.getDay();

    // 设置目标日期为下周六(星期六对应的数字是6)
    targetDate.setDate(now.getDate() + (6 - currentDay + 7) % 7 + 7);

    // 设置目标日期的时、分、秒为0,以确保只计算到日期的差异
    targetDate.setHours(0, 0, 0, 0);

    const timeLeft = targetDate.getTime() - now.getTime();

    const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    document.getElementById("weekend_countdown").innerHTML = `${days} 天 ${hours} 小时`;
  }

  // 每秒钟更新一次倒计时
  setInterval(countdownToNextSaturday, 1000);

  // 页面加载时立即计算倒计时并显示
  countdownToNextSaturday();
</script>

</body>
</html>


在上述代码中,我们创建了一个名为`countdownToNextSaturday`的JavaScript函数,用于计算距离下周六的天数和小时数。该函数与之前提供的代码实现类似,通过`Date`对象计算距离下周六的时间差,并将结果展示在网页上的`<span>`标签内。然后,使用`setInterval`函数每秒钟更新一次倒计时,并在页面加载时立即计算并显示倒计时。

当您将以上代码保存为HTML文件并在浏览器中打开时,您将看到一个简单的倒数到下周六的天数和小时数的效果。

chat-25.jpg

迭代和开发

您可以继续使用 ChatGPT 来改进您的代码:

输入

如果当天是周六,添加代码以显示“周末已经到来”而不是倒计时

输出

如果当天是周六,我们可以在JavaScript代码中添加条件语句来判断当前日期是否为周六,并根据判断结果显示相应的信息。如果是周六,则显示"周末已经到来",否则显示倒计时。

下面是修改后的JavaScript代码:


<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p id="weekend_message"></p>

<script>
  function countdownOrWeekendMessage() {
    const now = new Date();
    const targetDate = new Date();

    // 获取当前日期是星期几(0表示星期日,1表示星期一,依次类推)
    const currentDay = now.getDay();

    // 设置目标日期为下周六(星期六对应的数字是6)
    targetDate.setDate(now.getDate() + (6 - currentDay + 7) % 7 + 7);

    // 设置目标日期的时、分、秒为0,以确保只计算到日期的差异
    targetDate.setHours(0, 0, 0, 0);

    // 判断当前日期是否为周六
    if (currentDay === 6) {
      document.getElementById("weekend_message").innerHTML = "周末已经到来!";
    } else {
      const timeLeft = targetDate.getTime() - now.getTime();

      const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

      document.getElementById("weekend_message").innerHTML = `周末还有 ${days} 天 ${hours} 小时`;
    }
  }

  // 每秒钟更新一次倒计时或周末消息
  setInterval(countdownOrWeekendMessage, 1000);

  // 页面加载时立即计算倒计时或显示周末消息
  countdownOrWeekendMessage();
</script>

</body>
</html>


在上述代码中,我们添加了一个名为`countdownOrWeekendMessage`的JavaScript函数,该函数在判断当前日期是否为周六后,显示相应的信息。如果是周六,则显示"周末已经到来",否则显示倒计时。通过`setInterval`函数每秒钟更新一次消息,并在页面加载时立即计算并显示相应信息。

这样,当当天是周六时,您将在页面上看到显示"周末已经到来"的消息,而在其他日期时,将继续显示倒计时信息。