[HTML]Web前端开发技术26（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页
以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。
<!DOCTYPE html>
<html>
<head>
<title>喵喵画网</title>
<style>
body {
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
.container {
width: 600px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.title {
text-align: center;
color: #333;
padding: 20px;
}
.input-container {
text-align: center;
padding: 20px 0;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 0 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="button"] {
padding: 10px 20px;
background-color: #5883d3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #3d66a7;
}
#poem {
text-align: center;
padding: 20px;
color: #333;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">喵喵画网</div>
<div class="input-container">
<input type="text" id="text" placeholder="请输入内容" />
<input type="button" value="生成喵喵" onclick="generatePoem()" />
</div>
<div id="poem"></div>
</div>
<script>
function generatePoem() {
var text = document.getElementById('text').value;
var poem = text.split('').join('<br>') + '<br>哞哞哞';
document.getElementById('poem').innerHTML = poem;
}
</script>
</body>
</html>这段代码展示了如何使用JavaScript获取用户输入，并通过简单的字符串操作生成“喵喵”（即通过换行分隔每个字符来模拟），最后将生成的喵喵和用户输入的内容显示在网页上。这个示例简单易懂，适合作为学习前端开发的入门项目。
评论已关闭