懒鸟飞：帝国cms模板专业分享平台，新域名：lanniaofei.com
网站有时候添加的广告会误触效果。例如在广告上添加了某些广告联盟的广告，然后访客在手机端访问时，并没有点击这个广告，而是误触这个广告上下滑动页面，也会触发这广告，如果每一次客户都误触跳转广告，访客的感受会很差，这时候，我们就可以给广告添加一个js判断，当点击或滑动了这个广告，该广告在1天内就不再显示，其实这种容易误触的广告，1天内也只记录你一次ip，如果你重复点击广告，也不会增加广告费。呵呵。
要实现访客在手机端访问时，点击或滑动广告后该广告在1天内不再显示，可以结合使用localStorage或cookies来记录用户的交互行为，并检测用户的设备类型。以下是使用localStorage和JavaScript检测触摸事件的实现示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>响应式广告示例</title>
<style>
#ad {
width: 100%;
max-width: 300px;
height: 250px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 20px auto;
border: 1px solid #ccc;
touch-action: pan-y; /* 允许垂直滑动 */
}
</style>
</head>
<body>
<div id="ad">
<p>点击或滑动关闭广告，24小时内不再显示</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const ad = document.getElementById('ad');
const adClickedKey = 'adClicked';
const oneDay = 24 * 60 * 60 * 1000; // 24小时的毫秒数
// 检测是否为触摸设备
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
if (isTouchDevice) {
// 添加点击事件监听器
ad.addEventListener('click', handleClick);
// 添加滑动事件监听器
let touchStartX = 0;
ad.addEventListener('touchstart', function(e) {
touchStartX = e.touches[0].clientX;
}, false);
ad.addEventListener('touchend', function(e) {
const touchEndX = e.changedTouches[0].clientX;
const deltaX = touchEndX - touchStartX;
// 定义滑动的阈值
const swipeThreshold = 50;
if (Math.abs(deltaX) > swipeThreshold) {
handleClick();
}
}, false);
} else {
// 非触摸设备只添加点击事件
ad.addEventListener('click', handleClick);
}
function handleClick() {
ad.style.display = 'none';
const now = new Date().getTime();
localStorage.setItem(adClickedKey, now.toString());
}
// 检查是否已点击广告并在24小时内
const now = new Date().getTime();
if (localStorage.getItem(adClickedKey)) {
const clickTime = parseInt(localStorage.getItem(adClickedKey), 10);
if (now - clickTime < oneDay) {
ad.style.display = 'none';
}
}
});
</script>
</body>
</html>
上一篇：AutoScreenshot 屏幕定时截图小工具、开源
下一篇：返回列表
淘宝店
