HTML代码:随机位置的红色圆形按钮,点击显示文字
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('map.jpg');
background-size: cover;
}
<pre><code>.button {
position: absolute;
background-color: red;
border-radius: 50%;
width: 100px;
height: 100px;
}
</code></pre>
</style>
</head>
<body>
<pre><code><button class='button' style='top: 100px; left: 200px;' onclick='displayText('Button 1 clicked!')'>Button 1</button>
<button class='button' style='top: 300px; left: 500px;' onclick='displayText('Button 2 clicked!')'>Button 2</button>
<button class='button' style='top: 500px; left: 800px;' onclick='displayText('Button 3 clicked!')'>Button 3</button>
<script>
function displayText(text) {
alert(text);
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ph9x 著作权归作者所有。请勿转载和采集!