前端悬浮按钮代码示例 - 简单易用 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>Floating Button</title>
	<style type="text/css">
		.btn {
			width: 50px;
			height: 50px;
			background-color: #f00;
			color: #fff;
			text-align: center;
			font-size: 30px;
			border-radius: 50%;
			position: fixed;
			bottom: 20px;
			right: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class='btn'>+</div>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
	var btn = document.querySelector('.btn');

	btn.addEventListener('click', function() {
		// do something when the button is clicked
		alert('Button clicked!');
	});
&lt;/script&gt;
</code></pre>
</body>
</html>
<p>这个示例创建了一个红色的圆形按钮，大小为50x50像素，显示的是一个'+'符号。按钮使用了固定定位，位于屏幕右下角。当点击按钮时，会弹出一个警示框，显示'Button clicked!'。</p>
<p>你可以根据需要修改按钮的样式和功能。</p>