javascript - Loading Page Timeouts -

How do I put this scenario into the code using html and javascript?

If the time after the screen load is less than 10 seconds then the CSS code is enabled which shows an input field, and if the loading screen is more than 10 seconds, then disable the CSS code which is the input field Shows?

Actually I want to display for 10 seconds and input field, then make it disappear.

It's unclear what you really want to do, but I think you want someone After the user arrives on a page, some CSS should be applied for some 10 seconds, and then close after that.

An easy way to do this is to start with a class on body element:

  & lt; Body class = "first10" & gt;   
 ... and then at the end of your document this script is:  
  & lt; Script & gt; SetTimeout (function () {document.body.className = ""; // removes class}}, 10000); // 10000ms = 10 seconds & lt; / Script & gt;   
  setTimeout  after a delay, schedules a function that is run by the JavaScript engine, which is expressed in milliseconds. In this situation, our task is     from all  sections, if you have other classes on  body , you may want to retain, to make you a bit more complicated Is:  
  document.body.className = document.body.className .replace (/ \ bfirst10 \ b /, '');   
 Or both can be more convenient for "first 10" and "non-first 10" sections:  
  & lt; Script & gt; SetTimeout (function () {document.body.className = document.body.className.replace (/ \ bfirst10 \ b /, '') + "notfirst10";}, 10000); // 10000ms = 10 seconds & lt; / Script & gt;   
 You want to apply those CSS rules to those first 10 seconds, such as:  
  body.first10 / * and more selectors here / / * ... Rule here ... * /}   
 For example, this  & lt; P & gt;  will change elements of the class  Foo  blue, but only for the first 10 seconds:  
  body.first10 p.foo {color: blue; }   
 Similarly, it will only show a banner with  id   "banner"  for the first 10 seconds:    body.notfirst10 # Banner {Display: None; }   
 
 Full example: |  
  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta charset = UTF-8 / & gt; & Lt; Title & gt; The first 10 seconds ... & lt; / Title & gt; & Lt; Style & gt; #Banner {background color: blue; White color; font-weight: bold; } Body.first10 p.foo {color: blue; } Body.notfirst10 # banner {display: none; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body class = "first10" & gt; & Lt; Div id = "banner" & gt; This banner is & lt; / Div & gt; & Lt; P class = "foo" & gt; This is a 'foo' paragraph & lt; / P & gt; & Lt; P & gt; This is not a 'foo' paragraph & lt; / P & gt; & Lt; Script & gt; SetTimeout (function () {document.body.className = document.body.className.replace (/ \ bfirst10 \ b /, '') + "notfirst10";}, 10000); // 10000ms = 10 seconds & lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;