left-digit effect

研究表明,在购物时人们倾向于忽略价格标签上小数点后的数字,更多地关注价格最左侧的数字。这种现象被称为‘左位数效应’,它显著影响着消费者的购买决策。例如,定价为3.99美元的商品比4美元的商品更受欢迎。

去超市买东西的时候,标价2.99元的商品似乎总是比3元的商品受欢迎。市场销售圈的人管这叫“左位数效应”。说的是,人们购物时只关注价签最左侧的数字,只要这个数字在自己承受范围之内,后面的数字就不会太在意了。


A new study, published in the latest issue of the Journal of Consumer Research, shows that an occurrence known by marketers as the “left-digit effect” drastically influences the choices that people make while buying various items. Simple experiments have proven that too little attention is paid to the digit on the right hand side of a price tag. For instance, people would rather buy something that is priced at $3.99 than those priced at $4.00. In actual stores, this is encouraged, as producers and managers have the final two numbers of the price printed with much smaller fonts than the first one or two.


最新一期《消费者研究杂志》发表的一份研究显示,一种被市场推广人员称为“左位数效应”的现象很大程度上影响人们购物时的决定。实验证明,人们在购物时对价签上小数点右侧的数字并不是太在意。例如,人们更愿意购买标价为3.99美元的商品,而不选择4美元的商品。这种现象在实体商店中也得到进一步放大,商家打出的商品价格中,最后两位数字印得明显比前两位数字小很多。


“Shoppers pay a disproportionate amount of attention to the leftmost digits in prices and these leftmost digits impact whether a product's price is perceived to be relatively affordable or expensive,” the study says.


该研究指出:“消费者大部分的注意力都放在商品价格最左侧的数字上面,而这些数字决定了该商品价格是否在可承受范围之内。”

<template> <div> <Breadcrumb /> <SearchBox /> <div class="product-text">{{ model }}</div> <!-- Button Section --> <div class="button-container"> <a href="#" class="btn inquire">Inquire Now</a> <a href="#" class="btn add-basket">Add to basket</a> <a href="#" class="btn inquiry-basket">Inquire Now ({{ basketCount }})</a> </div> <!-- Image and Details Layout --> <div class="layout-container"> <!-- Left Side: Image Gallery with Navigation --> <div class="left-side"> <div class="image-container" @mousemove="handleMouseMove" @mouseleave="resetImage"> <img :src="currentImage" alt="Product Image" class="product-image" /> </div> <div class="image-thumbnails"> <button @click="prevImage" class="arrow-btn"><span class="material-icons">chevron_left</span></button> <div class="thumbnails"> <img v-for="(image, index) in images" :key="index" :src="image" @click="changeImage(image)" class="thumbnail" :class="{'active-thumbnail': image === currentImage}" /> </div> <button @click="nextImage" class="arrow-btn"><span class="material-icons">chevron_right</span></button> </div> </div> <!-- Right Side: Details Section --> <div class="right-side"> <div class="details-box"> <h3>Product Details</h3> <ul> <li><strong>Name:</strong> Example Product</li> <li><strong>Specification:</strong> 10 units</li> <li><strong>Model:</strong> XYZ123</li> <li><strong>Description:</strong> A brief description of the product...</li> <li><strong>Range:</strong> 100m</li> <li><strong>Battery Capacity:</strong> 2500mAh</li> <li><strong>Notes:</strong> Keep away from water</li> <li><strong>Name:</strong> Example Product</li> <li><strong>Specification:</strong> 10 units</li> <li><strong>Model:</strong> XYZ123</li> <li><strong>Description:</strong> A brief description of the product...</li> </ul> </div> </div> </div> <div style="background-color: #f9f9f9;padding-bottom: 30px;margin-top: 30px;"> <div style="text-align: center;font-weight: bold;font-size: 39px;margin: 20px;">Notes on usage and operation</div> <div style="width: 80%;margin-left: 10%;"> <div>IP66/67 waterproof rating</div> <div>Max/Min & Hold functions</div> <div>5-year battery life (10,000 hours)</div> <div>High accuracy to ±0.7°F (±0.4°C)</div> <div>Backlight for dimly lit areas</div> <div>Optional protective rubber boot</div> <div>Use with a variety of type K probes</div> <div>Includes NIST-Traceable calibration certificate</div> <div>Designed for wet workplaces, the Therma Waterproof survives harsh industrial use and offers top thermocouple performance. With an IP rating of IP66/67, this rugged meter can withstand an end-of-shift wash down and still outperform its closest competitor.</div> <div>The Therma Waterproof includes features you'll actually use with Max/Min, display Hold, and a convenient backlight. With a 10,000 hour battery rating you'll only need to change batteries every 5 years. Its large-digit, high-contrast LCD display makes it easy to view readings from a distance.</div> <div>For added protection and convenience, choose from three optional protective rubber boots. Choose our basic silicone boot to protect the Therma Waterproof from drops and bumps. For added convenience, a second boot includes a slot to slide your probe into for storage on the go and a third includes a flip-out stand with magnetic back for hands-free use in the lab or by the grill.</div> <div>We include a NIST-Traceable calibration certificate so you'll know that it's accurate. Tired of replacing handhelds every few months? Switch to the Therma Waterproof and you'll see why this is the workhorse of our Therma handheld series.</div> </div> </div> </div> </template> <script setup> import { useRoute } from 'vue-router' import Breadcrumb from '../../src/components/BreadcrumbModule.vue' import SearchBox from '../../src/components/SearchBoxModule.vue' import { ref,onMounted } from 'vue' const route = useRoute() const model = route.params.model const basketCount = 2 const product = ref(null) const images = ref([]) // Image Gallery Logic // const images = [ // '../../src/assets/device/12.jpg', // '../../src/assets/device/16.jpg', // '../../src/assets/device/15.jpg', // '../../src/assets/device/17.jpg', // '../../src/assets/device/19.jpg' // ] onMounted(() => { try { // 1. 从路由查询参数中获取产品数据字符串 const productStr = route.query.product console.log("productStr==",productStr) console.log("vv==",typeof(productStr)) if (productStr) { // 2. 解析JSON字符串为JavaScript对象 product.value = JSON.parse(productStr) // // 3. 提取图片列表 if (product.value.models.imageList) { images.value = product.value.models.imageList.map(img => img.imageUrl) } else { // 如果没有imageList,使用主图作为默认图片 images.value = [product.value.image || product.value.models.mainImageUrl] } } } catch (error) { console.error("解析产品数据出错:", error) } }) const currentImage = ref(images[0]) const changeImage = (image) => { currentImage.value = image } const prevImage = () => { const currentIndex = images.indexOf(currentImage.value) currentImage.value = images[(currentIndex - 1 + images.length) % images.length] } const nextImage = () => { const currentIndex = images.indexOf(currentImage.value) currentImage.value = images[(currentIndex + 1) % images.length] } const handleMouseMove = (event) => { const container = event.currentTarget; const image = container.querySelector('img'); const { left, top, width, height } = container.getBoundingClientRect(); const offsetX = event.clientX - left; const offsetY = event.clientY - top; const xPercentage = (offsetX / width) * 100; const yPercentage = (offsetY / height) * 100; // Set background position for the zoom effect image.style.transformOrigin = `${xPercentage}% ${yPercentage}%`; image.style.transform = 'scale(1.5)'; }; const resetImage = () => { const image = document.querySelector('.product-image'); image.style.transform = 'scale(1)'; }; </script> <style scoped> .product-text { font-size: 32px; margin: 20px; font-weight: bold; } .button-container { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; /* Aligns buttons to the right */ } .btn { padding: 3px 10px; text-decoration: none; border: 1px solid #cd0000; color: #cd0000; font-size: 16px; border-radius: 5px; text-align: center; } .inquire { border: 1px solid gray; color: #8B8682; } .add-basket { /* #F5F5F5 */ background-color: #cd0000; color: white; /* border: 1px solid gray; */ } .inquiry-basket { border: none; color: #8B8682; } .layout-container { display: flex; margin-top: 30px; gap: 10px; } .left-side, .right-side { width: 50%; height: 500px; } .image-container { height: 350px; width: 80%; margin-left: 10%; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; } .product-image { width: 100%; height: auto; object-fit: cover; transition: transform 0.2s ease; /* 添加过渡效果 */ } .image-container:hover .product-image { transform: scale(1.5); /* 放大效果 */ } .image-thumbnails { display: flex; justify-content: center; /* 中间对齐 */ align-items: center; gap: 20px; /* 让箭头和图片之间有适度的间距 */ margin-top: 60px; } .arrow-btn { font-size: 24px; background: transparent; border: none; cursor: pointer; } .thumbnail { width: 60px; height: 60px; margin-left: 5px; object-fit: cover; cursor: pointer; border: 1px solid #EEE9E9; } .thumbnail.active-thumbnail { border: 2px solid #ccc; /* 添加黑色外边框 */ } .thumbnail:first-child { margin-left: 10px; /* 使第一个图片和左箭头更紧密 */ } .thumbnail:last-child { margin-right: 10px; /* 使最后一个图片和右箭头更紧密 */ } .right-side { border: 1px solid #ccc; padding: 20px; overflow-y: auto; } .details-box h3 { margin-bottom: 15px; } .details-box ul { list-style: none; padding: 0; } .details-box li { margin-bottom: 10px; } @media (max-width: 768px) { .layout-container { flex-direction: column; } .left-side, .right-side { width: 100%; } .button-container { flex-direction: column; } } </style> currentImage默认没有显示第一个图片了
07-31
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Treasure</title> <link rel="stylesheet" href="./baoxiangimg/treasure.css"> </head> <body> <header class="headerImg"> <img src="./baoxiangimg/logo.svg" alt="logo"> </header> <div class="pgOct"> <img src="./baoxiangimg/pgOct.png" alt="pgOct"> </div> <canvas id="particle-background"></canvas> <!-- 动态背景元素 --> <div class="bg-element bg-element-1"></div> <div class="bg-element bg-element-2"></div> <div class="bg-element bg-element-4"></div> <div class="container"> <div class="treasure-container"> <div class="treasure-box" id="treasureBox"> <div class="treasure-base"></div> <div class="prize coupon" id="prize">¥50</div> </div> </div> <div class="countdown-container"> <h6>Contagem regressiva:</h6> <div class="digit-container"> <div class="digit" id="tens-digit">3</div> </div> <div class="digit-container"> <div class="digit" id="ones-digit">0</div> </div> </div> <div class="prize-list"> <div class="prize-item"> <img src="./baoxiangimg/coupon.png" /> <h3>🎟️ Pegue seu<br />cupom agora!</h3> </div> <div class="prize-item"> <img src="./baoxiangimg/money.png" /> <h3>💰 Ganhe recompensas<br />em dinheiro!</h3> </div> <div class=" prize-item"> <img src="./baoxiangimg/play.png" /> <h3>🎁 Receba prêmios<br />incríveis!</h3> </div> <div class="prize-item"> <img src="./baoxiangimg/exquisite.png" /> <h3>🧰 Abra o baú do<br /> seu amigo!</h3> </div> </div> <div class="particles" id="particles"></div> </div> <div class="winners-container"> <h2 class="winners-title">🎉 Lista de vencedores 🎉</h2> <div class="winners-list" id="winnersList"> <!-- 中奖名单将通过JavaScript动态生成 --> </div> </div> <div class="modal" id="prizeModal"> <div class="modal-content"> <h2>Congratulations!</h2> <p>Você ganhou o prêmio listado:</p> <div class="modal-prize" id="modalPrize">Cupom de R $50</div> <p>Prêmio enviado para sua conta. Confira!</p> <div class="countdown" id="countdown">Página redirecionará em 2 segundos...</div> </div><img class="pointerImg" src="bg.png"> </div> <script> // 初始化背景粒子 const canvas1 = document.getElementById('particle-background'); const ctxs = canvas1.getContext('2d'); function resizeCanvas() { canvas1.width = window.innerWidth; canvas1.height = window.innerHeight; } window.addEventListener('resize',resizeCanvas); resizeCanvas(); // 动画函数 // 生成粒子数组 const particlesArr = []; const particleCount = 100; for (let i = 0; i < particleCount; i++) { particlesArr.push({ x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, radius: Math.random() * 2 + 1, vx: (Math.random() - 0.5) * 0.7, vy: (Math.random() - 0.5) * 0.7 }); } function animateParticles() { ctxs.clearRect(0,0,canvas1.width,canvas1.height); particlesArr.forEach(p => { p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > canvas1.width) p.vx *= -1; if (p.y < 0 || p.y > canvas1.height) p.vy *= -1; ctxs.beginPath(); ctxs.arc(p.x,p.y,p.radius,0,Math.PI * 2); ctxs.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxs.fill(); }); for (let i = 0; i < particlesArr.length; i++) { for (let j = i + 1; j < particlesArr.length; j++) { const p1 = particlesArr[i]; const p2 = particlesArr[j]; const dx = p1.x - p2.x; const dy = p1.y - p2.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < 100) { ctxs.strokeStyle = `rgba(255, 255, 255, ${(100 - dist) / 100 * 0.2})`; ctxs.lineWidth = 1; ctxs.beginPath(); ctxs.moveTo(p1.x,p1.y); ctxs.lineTo(p2.x,p2.y); ctxs.stroke(); } } } requestAnimationFrame(animateParticles); } animateParticles(); document.addEventListener('DOMContentLoaded',function() { const particlesContainer = document.getElementById('particles'); const tensDigit = document.getElementById('tens-digit'); const onesDigit = document.getElementById('ones-digit'); const treasureBox = document.getElementById('treasureBox'); const prize = document.getElementById('prize'); const prizeModal = document.getElementById('prizeModal'); const modalPrize = document.getElementById('modalPrize'); const countdown = document.getElementById('countdown'); const winnersList = document.getElementById('winnersList'); // 配置跳转链接 const redirectUrl = "https://www.baidu.com"; // 修改为您需要跳转的链接 // 奖品列表 const prizes = [ { type: "coupon",name: "💰 Cupom de R $30",value: "💰 Cupom de R $30" }, { type: "coupon",name: "💰 Cupom de R $50元",value: "💰 Cupom de R $50" }, { type: "coupon",name: "💰 Cupom de R $100",value: "💰 Cupom de R $100" }, { type: "coupon",name: "💰 Cupom de R $500",value: "💰 Cupom de R $500" }, { type: "coupon",name: "💰 Cupom de R 1000",value: "💰 Cupom de R $1000" }, { type: "discount",name: "🎟️ 20% OFF",value: "🎟️ 20% OFF" }, { type: "discount",name: "🎟️ 30% OFF",value: "🎟️ 30% OFF" }, { type: "discount",name: "🎟️ 40% OFF",value: "🎟️ 40% OFF" }, { type: "discount",name: "🎟️ 50% OFF",value: "🎟️ 50% OFF" }, { type: "discount",name: "🧰 Tesouro do amigo!",value: "🧰 Tesouro do amigo!" }, { type: "gift",name: "🎁 Surpresa especial!",value: "🎁 Surpresa especial!" } ]; let isOpened = false; let countdowns = 30; let countdownInterval; let isRunning = false; if (localStorage.getItem('downsTime') && localStorage.getItem('downsTime') > 0) { countdowns = localStorage.getItem('downsTime') document.querySelector(".countdown-container").style.display = 'flex' startCountdown() isOpened = true; isRunning = true; } else { document.querySelector(".countdown-container").style.display = 'none' countdowns = 30 } treasureBox.addEventListener('click',function() { if (isOpened) return; countdowns = 30 tensDigit.style.animation = ''; onesDigit.style.animation = ''; document.querySelector(".countdown-container").style.display = 'flex' isOpened = true; startCountdown() // 随机选择一个奖品 const randomPrize = prizes[Math.floor(Math.random() * prizes.length)]; document.querySelector('.treasure-base').classList.add('open') // 更新奖品显示 prize.textContent = randomPrize.value; prize.className = `prize ${randomPrize.type}`; // 显示奖品弹出动画 // 创建粒子效果 setTimeout(() => { prize.classList.add('show'); createConfetti(); setTimeout(() => { document.querySelector(".pointerImg").style.display = "block" },300) },800); // 显示弹窗 setTimeout(() => { modalPrize.textContent = randomPrize.name; prizeModal.style.display = 'flex'; // 开始倒计时 let seconds = 2; countdown.textContent = `Página redirecionará em ${seconds} segundos...`; const countdownInterval = setInterval(() => { seconds--; if (seconds > 0) { countdown.textContent = `Página redirecionará em ${seconds} segundos...`; } else { clearInterval(countdownInterval); prizeModal.style.display = 'none'; // 跳转到指定链接 // window.location.href = redirectUrl; } },1000); },1500); }); // 中奖名单数据 const winners = [ { name: "Lucas**",prize: "🎁",time: "recebeu um presente incrível há 1 minuto!" }, { name: "Mariana**",prize: "💸",time: "ganhou um bônus de 50 reais há 5 minutos!" }, { name: "Rafael**",prize: "📱",time: "ganhou um iPhone 14 há 10 minutos!" }, { name: "Camila**",prize: "🕹️",time: "recebeu itens de jogo incríveis há 23 minutos!" }, { name: "Gustavo**",prize: "🏆",time: "ganhou um prêmio de 1000 dólares há 38 minutos!" }, { name: "Gabriel**",prize: "💸",time: "ganhou um bônus de 100 reais há 44 minutos!" }, { name: "Marco**",prize: "🕹️",time: "recebeu itens de jogo incríveis há 56 minutos!" }, { name: "João**",prize: "🎁",time: "recebeu um presente incrível há 1 hora!" } ]; initWinnersList(); // 初始化中奖名单 function initWinnersList() { winnersList.innerHTML = ''; const container = document.createElement('div'); container.className = 'winner-items-container'; // 复制一份中奖名单,以实现更平滑的循环 const extendedWinners = [...winners,...winners]; extendedWinners.forEach(winner => { const winnerItem = document.createElement('div'); winnerItem.className = 'winner-item'; winnerItem.innerHTML = ` <div class="winner-prize">${winner.prize}</div> <div class="winner-name">${winner.name}</div> <div class="winner-time">${winner.time}</div> `; container.appendChild(winnerItem); }); winnersList.appendChild(container); } function createConfetti() { const colors = ['#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']; const container = document.querySelector('.treasure-container'); for (let i = 0; i < 100; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; // 随机颜色 const color = colors[Math.floor(Math.random() * colors.length)]; confetti.style.backgroundColor = color; // 随机位置 const startX = Math.random() * 200 - 100 + treasureBox.offsetLeft + treasureBox.offsetWidth / 2; const startY = treasureBox.offsetTop + 200; confetti.style.left = startX + 'px'; confetti.style.top = startY + 'px'; container.appendChild(confetti); // 随机动画参数 const angle = Math.random() * Math.PI * 2; const velocity = 2 + Math.random() * 3; const rotation = Math.random() * 720 - 360; const size = 5 + Math.random() * 10; confetti.style.width = size + 'px'; confetti.style.height = size + 'px'; // 动画 const animation = confetti.animate([ { transform: `translate(0, 0) rotate(0deg)`, opacity: 1 }, { transform: `translate(${Math.cos(angle) * 100}px, -${150 + Math.random() * 200}px) rotate(${rotation}deg)`, opacity: 0 } ],{ duration: 1000 + Math.random() * 1000, easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)' }); // 动画结束后移除元素 animation.onfinish = () => { confetti.remove(); }; } } // 创建粒子效果 function createParticles(x,y,count = 10) { for (let i = 0; i < count; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // 随机位置 const offsetX = (Math.random() - 0.5) * 100; const offsetY = (Math.random() - 0.5) * 100; particle.style.left = `${x + offsetX}px`; particle.style.top = `${y + offsetY}px`; // 随机动画参数 const size = Math.random() * 3 + 1; const duration = Math.random() * 1 + 0.5; const delay = Math.random() * 0.5; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.animation = `particleFloat ${duration}s ease-out ${delay}s forwards`; // 添加到容器 particlesContainer.appendChild(particle); // 移除粒子 setTimeout(() => { particle.remove(); },(duration + delay) * 1000); } } // 添加粒子浮动动画 const styleSheet = document.styleSheets[0]; styleSheet.insertRule(` @keyframes particleFloat { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * -100 - 50}px); opacity: 0; } } `,styleSheet.cssRules.length); // 更新数字显示 function updateDisplay() { const tens = Math.floor(countdowns / 10); const ones = countdowns % 10; // 添加翻转动画 if (tensDigit.textContent !== tens.toString()) { tensDigit.classList.remove('flip'); void tensDigit.offsetWidth; // 触发重排 tensDigit.classList.add('flip'); tensDigit.textContent = tens; // 在十位数变化时添加粒子效果 const rect = tensDigit.getBoundingClientRect(); createParticles(rect.left + rect.width / 2,rect.top + rect.height / 2,15); } if (onesDigit.textContent !== ones.toString()) { onesDigit.classList.remove('flip'); void onesDigit.offsetWidth; // 触发重排 onesDigit.classList.add('flip'); onesDigit.textContent = ones; // 在个位数变化时添加粒子效果 const rect = onesDigit.getBoundingClientRect(); createParticles(rect.left + rect.width / 2,rect.top + rect.height / 2,15); } } // 开始倒计时 function startCountdown() { if (isRunning) return; isRunning = true; countdownInterval = setInterval(() => { countdowns--; localStorage.setItem('downsTime',countdowns); updateDisplay(); isOpened = true; if (countdowns <= 1) { clearInterval(countdownInterval); isOpened = false; isRunning = false; // 倒计时结束效果 tensDigit.style.animation = 'pulse 0.5s infinite'; onesDigit.style.animation = 'pulse 0.5s infinite'; // 创建大量粒子 for (let i = 0; i < 50; i++) { setTimeout(() => { const rect1 = tensDigit.getBoundingClientRect(); const rect2 = onesDigit.getBoundingClientRect(); createParticles(rect1.left + rect1.width / 2,rect1.top + rect1.height / 2,5); createParticles(rect2.left + rect2.width / 2,rect2.top + rect2.height / 2,5); },i * 50); } setTimeout(() => { prize.classList.remove('show'); document.querySelector('.treasure-base').classList.remove('open') isOpened = false; isRunning = false; document.querySelector(".countdown-container").style.display = 'none' localStorage.setItem('downsTime',0); tensDigit.innerHTML = '3' onesDigit.innerHTML = '0' },1000) } },1000); } }); </script> </body> </html>当前代码如何优化
10-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值