【每日一练】183—用ChatGPT3.5写了一个登录效果

每日一练1年前 (2023)发布 admin

1,469 0 5

写在前面

今天这个练习，我是用Visual Studio Code里的Chat-GPT中文版里的3.5模型直接实现，我没有修改一行代码，我唯一做的事情，就是把这个代码复制到了html文件里，于是就得到了如下效果：

我今天做这个实线，主要是想尝试一下，AI写代码到底好不好用。

其实，它写小组件这种的话，还是挺在行的，以下是我与ChatGPT的对话截图：
【每日一练】183—用ChatGPT3.5写了一个登录效果

但是，它写稍微复杂点的页面就没有那么友好了，如果您想要ChatGPT来实现一个完整的网页，就是稍微有点复制的话，你需要不断地跟其提问，提问还要描述准确，不然，你会得不到你想要地结果。

其次，如果你用它来写一些稍微复杂地效果，你依然需要有点编程知识，至少是能够看得明白它给出的代码，不然它给你写出来，你一样也无从下手。

接着，我又让尝试让它再写一个注册登录效果，结果在一个页面里就出现了如下情况：

我想，没有谁在写页面的时候，是这样写的吧？

虽然效果是实现了，如果你想要用它写的代码，你需要做一定的处理。

总之，大家有兴趣去学习使用AI写代码的话，可以自己去试试。

另外，我也把我今天用AI写的代码分享给大家，大家自行感受一下。

在这里，我对HTML与CSS代码做了一个文件分离，但是里面代码一行没有修改，

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>【每日一练】183—用ChatGPT3.5写了一个登录效果——Login Page</title>
</head>
<body>
<form>
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username” placeholder=”Enter your username”>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” placeholder=”Enter your password”>
<input type=”submit” value=”Login”>
</form>
</body>
</html>

CSS代码：

body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
form {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
padding: 20px;
width: 300px;
margin: 50px auto;
}
input[type=”text”], input[type=”password”] {
border: none;
border-radius: 3px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
}
input[type=”submit”] {
background-color: #4CAF50;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
}
input[type=”submit”]:hover {
background-color: #3e8e41;
}

最后，我在放一个完整的ChatGPT写的代码：

<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
form {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
padding: 20px;
width: 300px;
margin: 50px auto;
}
input[type=”text”], input[type=”password”] {
border: none;
border-radius: 3px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
}
input[type=”submit”] {
background-color: #4CAF50;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: block;
margin: 10px 0;
padding: 10px;
width: 100%;
}
input[type=”submit”]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username” placeholder=”Enter your username”>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” placeholder=”Enter your password”>
<input type=”submit” value=”Login”>
</form>
</body>
</html>