HTML 代码：随机位置红色圆形按钮，点击显示标题
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('map.jpg');
background-size: cover;
}
<pre><code> .btn {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</code></pre>
</head>
<body>
<div class="btn" id="btn1" onclick="showCode('Button 1')">Button 1</div>
<div class="btn" id="btn2" onclick="showCode('Button 2')">Button 2</div>
<div class="btn" id="btn3" onclick="showCode('Button 3')">Button 3</div>
<pre><code><script>
function showCode(title) {
alert('HTML code: <div>' + title + '</div>');
}
var buttons = document.getElementsByClassName("btn");
for (var i = 0; i < buttons.length; i++) {
var posX = Math.floor(Math.random() * window.innerWidth);
var posY = Math.floor(Math.random() * window.innerHeight);
buttons[i].style.left = posX + "px";
buttons[i].style.top = posY + "px";
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ph9g 著作权归作者所有。请勿转载和采集!