-4

html と javascript を使用して、このシナリオをコードにどのように配置しますか?

画面の読み込みからの時間が 10 秒未満の場合は、入力フィールドを表示する CSS コードを有効にしますか? 画面の読み込みからの時間が 10 秒を超える場合は、入力フィールドを表示する CSS コードを無効にしますか?

基本的には、フィールドを10秒間表示して入力した後、非表示にします。

4

1 に答える 1

2

実際に何をしたいのかは不明ですが、ユーザーがページに到着してから最初の 10 秒間は CSS を適用し、その後はオフにする必要があると思います。

bodyこれを行う簡単な方法の 1 つは、要素のクラスから始めることです。

<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>クラスが blue の要素のテキストをfoo最初の 10 秒間だけにします。

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

同様に、これはid "banner"最初の 10 秒間だけのバナーを表示します。

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>
于 2013-06-22T10:21:16.693 に答える