<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 100px 50px 0;
border-color: transparent transparent transparent black;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>长按按钮示例</title>
<style>
#myButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#progressBarContainer {
position: relative;
width: 100px;
height: 20px;
}
#progressBar {
width: 100%;
height: 100%;
background-color: #f0f0f0;
position: absolute;
}
#progress {
height: 100%;
background-color: #4CAF50;
position: absolute;
top: 0;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #333;
}
</style>
</head>
<body>
<button id="myButton">点击或长按我</button>
<div id="progressBarContainer" style="display: none;">
<div id="progressBar">
<div id="progress"></div>
<div id="text">长按中...</div>
</div>
</div>
<script>
const button = document.getElementById('myButton');
const progressBarContainer = document.getElementById('progressBarContainer');
const progress = document.getElementById('progress');
const text = document.getElementById('text');
let pressStartTime = null;
let feedbackTimer = null;
const LONG_PRESS_THRESHOLD = 1000; // 长按阈值，单位：毫秒
function showVisualFeedback() {
if (!progressBarContainer.style.display || progressBarContainer.style.display === 'none') {
progressBarContainer.style.display = 'block';
}
}
function hideVisualFeedback() {
if (progressBarContainer.style.display === 'block') {
progressBarContainer.style.display = 'none';
}
}
function updateProgress() {
const currentTime = Date.now();
const pressDuration = currentTime - pressStartTime;
const progressPercentage = (pressDuration / LONG_PRESS_THRESHOLD) * 100;
if (progressPercentage > 100) {
progress.style.width = '100%';
text.textContent = '长按触发！';
} else {
progress.style.width = `${Math.min(progressPercentage, 100)}%`;
text.textContent = `按压中！（进度：${Math.min(Math.round(progressPercentage), 100)}%）`;
}
}
function handleLongPress() {
hideVisualFeedback();
console.log("长按触发！");
// 在这里添加长按时需要执行的操作
}
function handleClick() {
console.log("点击触发！");
// 在这里添加普通点击时需要执行的操作
}
button.addEventListener('mousedown', () => {
pressStartTime = Date.now();
showVisualFeedback();
updateProgress(); // 立即显示进度
feedbackTimer = setInterval(updateProgress, 50); // 每隔50毫秒更新一次进度
});
button.addEventListener('mouseup', () => {
clearInterval(feedbackTimer);
feedbackTimer = null;
if (pressStartTime !== null) {
const currentTime = Date.now();
const pressDuration = currentTime - pressStartTime;
if (pressDuration >= LONG_PRESS_THRESHOLD) {
handleLongPress();
} else {
handleClick();
}
}
hideVisualFeedback();
pressStartTime = null;
});
button.addEventListener('mouseleave', () => {
if (feedbackTimer) {
clearInterval(feedbackTimer);
feedbackTimer = null;
}
hideVisualFeedback();
pressStartTime = null;
});
</script>
</body>
</html>
