是否是长按按钮判断

csharp 复制代码
<!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>
是否是长按按钮 判断

是否是长按按钮判断
