加载页面超时

-3

如何将这个场景转换为使用html和javascript的代码？加载页面超时

如果自加载屏幕以来的时间少于10秒，请启用显示输入字段的css代码，否则如果自加载屏幕以来的时间大于10秒，请禁用显示输入字段的css代码？

基本上我想显示和输入字段十秒钟，然后使其消失。

来源

2013-06-22 user2511366

我会把一个更具描述性的标题，例如“加载页面超时” – Edorka

我可以建议一些[阅读]（http://stackoverflow.com/about）？ – ChiefTwoPencils

@Edorka对于标题感到抱歉，并不确定如何总结它 – user2511366

目前还不清楚你真正想做什么，但我猜你希望在用户到达页面后的前10秒内应用一些CSS，然后关闭。

一个简单的方法做到这一点是与body元件上的类开始了：

<body class="first10">

...然后在文档的末尾有这样的脚本：

<script> 
setTimeout(function() { 
    document.body.className = ""; // removes the class 
}, 10000); // 10000ms = 10 seconds 
</script>

setTimeout安排延迟后由JavaScript引擎运行的函数，以毫秒为单位表示。在这种情况下，我们的功能从body中删除全部类。如果您对body其他类，你可能想保留，你必须做一些稍微复杂一些：

document.body.className = document.body.className.replace(/\bfirst10\b/, '');

或者，它可能是更方便的同时拥有“first10”和“notfirst10”类：

<script> 
setTimeout(function() { 
    document.body.className = 
     document.body.className.replace(/\bfirst10\b/, '') + 
     " notfirst10"; 
}, 10000); // 10000ms = 10 seconds 
</script>

你想申请的第一个10秒的CSS规则将被定义，像这样：

body.first10 /* further selectors here */ { 
    /* ...rules here... */ 
}

因此，举例来说，这将打开文本<p>元件与类foo蓝，但只适用于前10秒：

body.first10 p.foo { 
    color: blue; 
}

类似地，这将显示与id"banner"的横幅为仅前10秒：

body.notfirst10 #banner { 
    display: none; 
}

完整示例：Live Copy | Live Source

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>First 10 seconds...</title> 
<style> 
    #banner { 
    background-color: blue; 
    color: white; 
    font-weight: bold; 
    } 

    body.first10 p.foo { 
     color: blue; 
    } 

    body.notfirst10 #banner { 
     display: none; 
    } 
</style> 
</head> 
<body class="first10"> 
    <div id="banner">This is the banner</div> 
    <p class="foo">This is a 'foo' paragraph</p> 
    <p>This is not a 'foo' paragraph</p> 
    <script> 
    setTimeout(function() { 
     document.body.className = 
      document.body.className.replace(/\bfirst10\b/, '') + 
      " notfirst10"; 
    }, 10000); // 10000ms = 10 seconds 
    </script> 
</body> 
</html>

来源

2013-06-22 10:21:16

+1，但只是一个问题如果他也有样式怎么办 – bugwheels94

@Ankit：对不起，我不太理解这个问题。 –

非常感谢您的先生，这帮了很多 – user2511366

加载页面超时

回答

相关问题