-4

我将如何使用 html 和 javascript 将这种情况放入代码中？

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

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

4

1 回答 1

2

目前还不清楚您实际上想要做什么，但我猜您希望在用户到达页面后的前 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>类元素，但仅限于前 10 秒：foo

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

id "banner"同样，这将仅在前 10 秒显示带有 的横幅：

body.notfirst10 #banner {
    display: none;
}

完整示例：Live Copy | 直播源

<!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-22T10:21:16.693 回答