Javascript 加载页面超时_Javascript_Html_Css

Javascript 加载页面超时

javascript html css

Javascript 加载页面超时,javascript,html,css,Javascript,Html,Css,我将如何使用html和javascript将此场景转化为代码如果加载屏幕后的时间小于10秒，启用显示输入字段的css代码，否则如果加载屏幕后的时间大于10秒，禁用显示输入字段的css代码基本上，我希望显示和输入字段10秒钟，然后使其消失。不清楚您实际想做什么，但我猜您希望在用户到达页面后的前10秒钟应用一些CSS，然后在这之后关闭一种简单的方法是从body元素上的类开始： <body class="first10"> 或者，同时拥有“first10”和“notfirst10”

我将如何使用html和javascript将此场景转化为代码

如果加载屏幕后的时间小于10秒，启用显示输入字段的css代码，否则如果加载屏幕后的时间大于10秒，禁用显示输入字段的css代码

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

不清楚您实际想做什么，但我猜您希望在用户到达页面后的前10秒钟应用一些CSS，然后在这之后关闭

一种简单的方法是从

body

元素上的类开始：

<body class="first10">

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

例如，这将使类为foo的

元素中的文本变为蓝色，但仅在前10秒：

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

body.notfirst10 #banner {
    display: none;
}

类似地，这将仅在前10秒显示带有

id

“banner”

的横幅：

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

body.notfirst10 #banner {
    display: none;
}

完整示例：|


前10秒。。。
#横幅{
背景颜色：蓝色；
颜色：白色；
字体大小：粗体；
}
body.first10 p.foo{
颜色：蓝色；
}
body.notfirst10#横幅{
显示：无；
}
这是横幅
这是一个“foo”段落
这不是一个“foo”段落
setTimeout（函数（）{
document.body.className=
document.body.className.replace（/\bfirst10\b/，“”）+
“非前10名”；
}, 10000); // 10000毫秒=10秒

我想用一个更具描述性的标题，比如“加载页面超时”，我可以推荐一些吗？@Edorka很抱歉这个标题，我不太确定如何总结它。你能展示一下你到目前为止做了什么吗？请更改标题。问题的标题有误导性。+1但问题是如果他有风格怎么办too@Ankit：对不起，我不太明白这个问题。非常感谢，先生，这对我很有帮助lot@user2511366：很高兴这有帮助！不要从你的问题所吸引的评论中得到错误的想法。人们似乎很难做到这一点，但事实上，他们只是在试图帮助您从堆栈溢出中获得最好的结果（因此，从您那里获得最好的结果）。你会掌握窍门的。最好的，我猜他的意思是如果加载时间大于10秒。

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

body.notfirst10 #banner {
    display: none;
}

<!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>