Question

我正在尝试在我正在建设的网站上放一个小的复活节彩蛋，如果用户点击链接x次会触发弹出窗口，我猜这会是某种JS或者JQuery，但我不知道从哪里开始或者甚至可能。我想我真正想要的是像Android“关于手机”页面中内置的复活节彩蛋，它在5秒内大约7次点击后打开一个新页面。有没有办法在浏览器中执行此操作？

可能是一个OnClick命令，它向计数器添加1并在计数器达到指定数字时执行操作，但每10秒将计数器重置为0？（我不想让它太容易找到！）

由于

Answer 1

使用jQuery尝试这个：

HTML：

<a id='lnkEgg' data-clicks='0'>Click for surprise</a>

脚本：

$(function(){
    $("#lnkEgg").on("click",function(){
        var c=$(this).data("click");
        if(c==7){
            //if it equals to whatever number you are chasing
            //open the popup
        }else{
            $(this).data("clicks",c++);
        }
    });
});

Answer 2

如果点击事件不符合您的要求，请使用 setTimeout （每次都清除）和 preventDefault 。

(function (node) { // IIFE to keep our namespace clean :)
    var timer,
        count = 0;
    function timeup() {
        count = 0;
    }
    function handler(e) {
        clearTimeout(timer);
        timer = setTimeout(timeup, 5e3); // 5 seconds
        ++count;
        if (count < 7) // number of clicks
            e.preventDefault();
    }
    node.addEventLister('click', handler);
}(document.getElementById('myLink'))); // passing the <a> into the IIFE

此代码必须在目标元素存在之后运行

Answer 3

@ TheVillageIdiot的技术是要走的路。在这里，我将使用相同的技术展示一些方法：

$(function(){
    var egg = $('#lnkEgg');
    egg.on('click', function() {
        //increment and check if magic clicks has been reached
        if( ++$(this).data().clicks == 7 ) {
            console.log( "You've now clicked the required number of times");
            //do some more operations
            $(this).data('complete', true);
            console.log( $(this).data() );
        };
    });
    //Reset counter every 10 seconds
    setInterval(function() {
        egg.data().clicks = 0;
    }, 10000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="lnkEgg" data-clicks="0">Click for surprise</a>

我可以创建仅在几次点击后才能生效的链接

3 个答案: