<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表情评价滑块</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.rating-container {
background-color: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 100%;
max-width: 500px;
text-align: center;
}
h2 {
color: #333;
margin-bottom: 20px;
font-size: 24px;
}
.emoji-container {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
position: relative;
}
.emoji {
font-size: 40px;
cursor: pointer;
transition: transform 0.3s ease;
position: relative;
z-index: 2;
}
.emoji:hover {
transform: scale(1.2);
}
.slider-container {
position: relative;
margin-bottom: 30px;
}
.slider-track {
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
position: relative;
}
.slider-progress {
height: 100%;
background: linear-gradient(to right, #ff5a5f, #ffcc00, #4caf50);
border-radius: 4px;
width: 0%;
}
.slider-thumb {
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
.rating-value {
font-size: 18px;
color: #666;
margin-bottom: 20px;
}
.submit-btn {
background-color: #4caf50;
color: white;
border: none;
padding: 12px 30px;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-bottom: 20px;
}
.submit-btn:hover {
background-color: #3d8b40;
}
.result {
display: none;
font-size: 20px;
color: #4caf50;
margin-top: 20px;
}
.ad-section {
margin-top: 30px;
padding: 15px;
background-color: #f0f0f0;
border-radius: 8px;
font-size: 14px;
}
.ad-section a {
color: #ff5a5f;
text-decoration: none;
font-weight: bold;
}
.ad-section a:hover {
text-decoration: underline;
}
.emoji.active {
transform: scale(1.3);
}
</style>
</head>
<body>
<div class="rating-container">
<h2>请评价您的体验</h2>
<div class="emoji-container">
<div class="emoji" data-value="1">😠</div>
<div class="emoji" data-value="2">😞</div>
<div class="emoji" data-value="3">😐</div>
<div class="emoji" data-value="4">😊</div>
<div class="emoji" data-value="5">😍</div>
</div>
<div class="slider-container">
<div class="slider-track">
<div class="slider-progress"></div>
<div class="slider-thumb"></div>
</div>
</div>
<div class="rating-value">评分: <span id="rating-text">3</span>/5</div>
<button class="submit-btn">提交评价</button>
<div class="result" id="result">
感谢您的评价！
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const emojis = document.querySelectorAll('.emoji');
const sliderThumb = document.querySelector('.slider-thumb');
const sliderTrack = document.querySelector('.slider-track');
const sliderProgress = document.querySelector('.slider-progress');
const ratingText = document.getElementById('rating-text');
const submitBtn = document.querySelector('.submit-btn');
const result = document.getElementById('result');
let isDragging = false;
let currentRating = 3;
// 初始化滑块位置
updateSliderPosition(currentRating);
// 表情点击事件
emojis.forEach(emoji => {
emoji.addEventListener('click', function() {
const value = parseInt(this.getAttribute('data-value'));
currentRating = value;
updateRating();
updateActiveEmoji();
});
});
// 滑块拖动事件
sliderThumb.addEventListener('mousedown', function(e) {
isDragging = true;
document.addEventListener('mousemove', handleDrag);
document.addEventListener('mouseup', stopDrag);
});
sliderThumb.addEventListener('touchstart', function(e) {
isDragging = true;
document.addEventListener('touchmove', handleDrag);
document.addEventListener('touchend', stopDrag);
});
function handleDrag(e) {
if (!isDragging) return;
let clientX;
if (e.type === 'mousemove') {
clientX = e.clientX;
} else if (e.type === 'touchmove') {
clientX = e.touches[0].clientX;
}
const trackRect = sliderTrack.getBoundingClientRect();
let position = (clientX - trackRect.left) / trackRect.width;
// 限制在轨道范围内
position = Math.max(0, Math.min(1, position));
// 计算评分 (1-5)
currentRating = Math.round(position * 4) + 1;
updateRating();
updateActiveEmoji();
}
function stopDrag() {
isDragging = false;
document.removeEventListener('mousemove', handleDrag);
document.removeEventListener('touchmove', handleDrag);
document.removeEventListener('mouseup', stopDrag);
document.removeEventListener('touchend', stopDrag);
}
// 点击轨道直接跳转
sliderTrack.addEventListener('click', function(e) {
const trackRect = this.getBoundingClientRect();
const position = (e.clientX - trackRect.left) / trackRect.width;
currentRating = Math.round(position * 4) + 1;
updateRating();
updateActiveEmoji();
});
function updateRating() {
ratingText.textContent = currentRating;
updateSliderPosition(currentRating);
}
function updateSliderPosition(rating) {
const position = (rating - 1) / 4;
const thumbPosition = position * 100;
sliderThumb.style.left = `${thumbPosition}%`;
sliderProgress.style.width = `${thumbPosition}%`;
}
function updateActiveEmoji() {
emojis.forEach(emoji => {
const value = parseInt(emoji.getAttribute('data-value'));
if (value === currentRating) {
emoji.classList.add('active');
} else {
emoji.classList.remove('active');
}
});
}
// 提交评价
submitBtn.addEventListener('click', function() {
result.style.display = 'block';
setTimeout(() => {
result.style.display = 'none';
}, 2000);
// 这里可以添加实际提交评价的代码
console.log('提交的评价:', currentRating);
});
});
</script>
</body>
</html>
扫一扫
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
