让GPT3.5用HTML、JS、CSS编写不用任何第三方库一个浏览器起始页！

本文链接：https://blog.csdn.net/weixin_72008748/article/details/132229615

求关注，也许还能看到其他这样的文章！

<h1>第一次编写<h1/>

<h2>HTML<h2/>

<!DOCTYPE html>
<html>
<head>
  <title>My Browser Start Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <header>
    <h1>Welcome to my Browser Start Page</h1>
  </header>
  
  <main>
    <div class="search-container">
      <input type="text" id="search-input" placeholder="Search...">
      <button id="search-button">Search</button>
    </div>
  
    <div id="weather">
      <h2>Loading weather...</h2>
    </div>
  
    <div id="quote">
      <h2>Loading quote...</h2>
    </div>
  </main>
</body>
</html>

<h2>CSS<h2/>

body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
}

main {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-container {
  margin-bottom: 20px;
}

#search-input {
  width: 70%;
  padding: 10px;
}

#search-button {
  padding: 10px;
}

#weather, #quote {
  margin-bottom: 10px;
}

h2 {
  font-size: 16px;
}

<h2>JS<h2/>

document.addEventListener('DOMContentLoaded', function() {
  fetchWeather();
  fetchQuote();
  
  document.getElementById('search-button').addEventListener('click', function() {
    var query = document.getElementById('search-input').value;
    search(query);
  });
});

function fetchWeather() {
  // Simulating API call to fetch weather data
  setTimeout(function() {
    var weatherData = "Sunny";
    document.getElementById('weather').innerHTML = '<h2>' + weatherData + '</h2>';
  }, 1500);
}

function fetchQuote() {
  // Simulating API call to fetch quote
  setTimeout(function() {
    var quote = "Life is either a daring adventure or nothing at all.";
    document.getElementById('quote').innerHTML = '<h2>' + quote + '</h2>';
  }, 2000);
}

function search(query) {
  // Simulating search functionality
  alert('Searching for: ' + query);
}

<h2>文件地址和第二次编写の导语<h2/>

我们打开起始页就会发现根本不行！当你搜索后就会发现写什么就回复什么。于是又开始了第二次

<h1>第二次编写<h1/>

<h2>HTML<h2/>

<!DOCTYPE html>
<html>
<head>
  <title>My Browser Start Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <header>
    <h1>Welcome to my Browser Start Page</h1>
  </header>
  
  <main>
    <div class="search-container">
      <input type="text" id="search-input" placeholder="Search...">
      <button id="search-button">Search</button>
    </div>
  
    <div id="weather">
      <h2>Loading weather...</h2>
    </div>
  
    <div id="quote">
      <h2>Loading quote...</h2>
    </div>
  </main>
</body>
</html>

<h2>CSS<h2/>

body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
}

main {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-container {
  margin-bottom: 20px;
}

#search-input {
  width: 70%;
  padding: 10px;
}

#search-button {
  padding: 10px;
}

#weather, #quote {
  margin-bottom: 10px;
}

h2 {
  font-size: 16px;
}

<h2>JS<h2/>

document.addEventListener('DOMContentLoaded', function() {
  fetchWeather();
  fetchQuote();
  
  document.getElementById('search-button').addEventListener('click', function() {
    var query = document.getElementById('search-input').value;
    search(query);
  });
});

function fetchWeather() {
  // Simulating API call to fetch weather data
  setTimeout(function() {
    var weatherData = "Sunny";
    document.getElementById('weather').innerHTML = '<h2>' + weatherData + '</h2>';
  }, 1500);
}

function fetchQuote() {
  // Simulating API call to fetch quote
  setTimeout(function() {
    var quote = "Life is either a daring adventure or nothing at all.";
    document.getElementById('quote').innerHTML = '<h2>' + quote + '</h2>';
  }, 2000);
}

function search(query) {
  // Redirect to Baidu search with the query
  window.location.href = 'https://www.baidu.com/s?wd=' + encodeURIComponent(query);
}