javascript - 如何在 10 秒后使 anchor 不可点击?

标签 javascript html css function

<html>
    <head>
    <style>
    .inactiveLink {
        pointer-events: none;
        cursor: default;
    }
    </style>
    </head>
    <body>
    <p> You have won a prize. Click <a href="https://www.google.com/" target="_blank">here</a> within <div id='clock'></div> seconds ...</p>
    <script>

    var time = 10;
    var f = function counttime(){document.getElementById('clock').innerHTML--;}
    function stoptime(){cleatInterval(f);}

    if(time){
        document.getElementById('clock').innerHTML = time;
        var h = setInterval(f,1000);
        setTimeout(function(){clearInterval(h);
                    document.getElementById('clock').innetHTML = "Time's up!";
                    }, time*1000);
    }


    </script>
    </body>
</html>

我正在尝试创建一个基本网页,打开时会显示“您赢得了奖品。请在 10 秒内单击此处……”。您有 10 秒的时间点击“此处”领取奖品。 10 秒后,“此处”应该无法点击。我添加了一个关于不可点击的 CSS 部分,称为“inactiveLink”。我不知道我应该如何在 10 秒后将 anchor 标记更改为 JS。 (我在考虑 10 秒后,HTML 中的 a 应该更改为 ID 为 inactiveLink 的 a)

最佳答案

你快到了:)

我会使用一个使用 CSS 规则 pointer-events: none 的类,然后在 10 秒后使用 JS 将该类添加到链接中:

const a = document.getElementById('a');

setTimeout(() => a.className = 'unclickable', 10000);
.unclickable { pointer-events: none; }
<a id="a" href="">Hurry up</a>

关于javascript - 如何在 10 秒后使 anchor 不可点击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59144851/

相关文章:

css - 如何在 Windows Phone 上为移动设备隐藏此特定图像?

javascript - 调整不同类型的图像

javascript - 新的 javascript ES6 模块术语中合格和不合格的导入有什么区别?

javascript - 如何通过 post 请求将形状像某些 JSON 对象数组的字符串传递给数组

html - CSS 在一行中拉伸(stretch)所有 div

javascript - 如何在不使用事件的情况下获取元素的 pageX 和 pageY

javascript - 为什么更新 MongoDb 时出错?

javascript - 如何检查两个对象是否具有同一组属性名称?

javascript - 更改 td 内容以选择,反之亦然

css - 无法使用顶部和左侧属性定位相对 div