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

每日一练2年前 (2023)发布 admin
1,790 0

写在前面

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

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

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

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

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

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

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

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

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

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

总之,大家有兴趣去学习使用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>

写在最后

虽然,人工智能可以干很多事情,但是,我还是希望不要过度依赖它,请把它当成一个工具来使用,让它为我们的工作生活提供便捷,而不是让它来影响我们的工作生活。

今天的每日一练内容就先跟大家分享到这里,希望对你有用。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...