用HTML5、css和JavaScript写一个功能
为您呈现一个简单的功能：点击按钮，随机生成一张猫咪的图片。
HTML5代码：
<!DOCTYPE html>
<html>
<head>
<title>随机猫咪图片生成器</title>
<style type="text/css">
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 1px solid #ccc;
padding: 10px;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>随机猫咪图片生成器</h1>
<button onclick="generateCat()">生成猫咪</button>
<img id="catImg" src="" alt="随机猫咪图片">
<script src="cat.js"></script>
</body>
</html>
CSS代码用来设置图片和按钮的样式，其中图片的样式包括将其居中显示、设置最大宽度和添加边框等。
JavaScript代码：
function generateCat() {
var img = document.createElement('img');
var div = document.getElementById('catImg');
img.src = 'https://source.unsplash.com/600x400/?cat';
div.appendChild(img);
}
JavaScript代码使用了createElement方法创建一个新的img元素，并使用getElementById方法获取到图片元素的div容器。然后，将随机生成的猫咪图片的URL赋值给img元素的src属性，并将其添加到div容器中。每次点击按钮，随机生成一张猫咪的图片。
完整的代码可以在本地创建一个名为cat.html的HTML文件，并将CSS代码保存在<style>标签中，将JavaScript代码保存在名为cat.js的文件中。然后，打开HTML文件，在浏览器中查看并点击按钮即可。
原文地址: https://www.cveoy.top/t/topic/MkM 著作权归作者所有。请勿转载和采集!