Question

我有一个HTML5 / CSS页面，我希望隐藏/禁用/锁定内容，直到某个日期为止。

是否有人知道任何HTML5 / JS方法，并且可能会在查看之前显示消息。

请询问您是否需要进一步澄清该功能。

提前致谢

Answer 1

感谢您的评论。您可以使用此HTML，CSS和JavaScript来使这件事工作。

将<div> - 和<script> - 元素作为<body> - 元素的第一个子元素。通过这种方式，确保在日期正确时首先将其删除。如果您等待加载库或将脚本放在页面底部，用户可能会看到它闪烁一段时间。

这样做的缺点仍然是，用户必须加载整个页面，即使他看不到它。关于你说这是一个iOS应用程序，你可以引入一个只需要加载锁定屏幕的解决方案，以避免不必要的流量。

HTML + JavaScript

<div class="locked" id="locked"></div>
<script>    
    var end = new Date('2013-01-01');
    var now = new Date();
    if (end - now <= 0) {
        var e = document.getElementById('locked');
        e.parentElement.removeChild(e);
    }
</script>

<强> CSS

div.locked {
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
}

<强>演示

Try before buy

Answer 2

对于HTML <input>控件（制作不可编辑的表单），您可以在应用程序代码或JS的输入中设置disabled或readonly属性。

对于其他内容，您应该按照您希望的方式在页面中呈现它（从服务器）。如果有人想要，页面中的所有内容都是可见的/或可黑客的。

所以把锁放在提供它的服务器上，不要指望保证页面上的任何锁定。

Answer 3

http://jsfiddle.net/SKUJj/ 这个小提琴将页面锁定10秒钟，然后锁定隐藏。你应该为100％的宽度和高度创建溢出的div。

另外要知道解锁时间，你应该把它存放在某个地方。然后再做

 setTimeout(function(){
  //unlock the screen;
 },timeStored-Date.now())

timeStored-Date.now()等待解锁的时间是毫秒

HTML / JS“锁定/隐藏”内容直到日期设置

3 个答案: