Home >Web Front-end >HTML Tutorial >How to set cover timing in html
htmlHow to set the cover timing: first create an HTML sample file; then define the timing function jishi() to calculate the dwell time; then define a stop timing program stopjishi(); finally add a stop timing button And the text box for timing display is enough.
The operating environment of this article: Windows 7 system, HTML5, Dell G3 computer.
How to display the time to access the web page in HTML web design
After opening the text editor or notepad, enter the basic html tag
<html> <head></head> <body></body> </html>
Click on the header tag
, enter the <script> tag afterwards, and declare several variables b, c, and t. <pre class="brush:php;toolbar:false"><script type="text/javascript"> var b=0 var c=0 var t </script></pre><p><img src="https://img.php.cn/upload/image/679/116/895/1614221404418222.png" title="1614221404418222.png" alt="How to set cover timing in html"/><p>Define the timing function jishi() to calculate the residence time. Set the setTimeout parameter to 1000 milliseconds. [Recommended: <a href="https://www.php.cn/course/list/11.html" target="_blank">HTML video tutorial]<pre class="brush:php;toolbar:false"> function jishi() { document.getElementById(&#39;tt&#39;).value=c c=c+1 t=setTimeout("jishi()",1000) if(c==60) { c=0; b=b+1; xs.value=b } }</pre><p><img src="https://img.php.cn/upload/image/637/161/268/1614221435178403.png" title="1614221435178403.png" alt="How to set cover timing in html"/><p>Then define a program to stop the timing stopjishi() <pre class="brush:php;toolbar:false">function stopjishi() { clearTimeout(t) }</pre><p><img src="https://img.php.cn/upload/image/941/160/923/1614221444748577.png" title="1614221444748577.png" alt="How to set cover timing in html"/> <p>Click the <body> tag to start timing when the web page is opened<pre class="brush:php;toolbar:false"><body onLoad="jishi()"></pre><p><img src="https://img.php.cn/upload/image/329/778/298/1614221463392215.png" title="1614221463392215.png" alt="How to set cover timing in html"/><p>Then, add a stop timing button and timing display in the text below Text box. <pre class="brush:php;toolbar:false"><form> <input type="button" value="停止计时!" onClick="stopjishi()"> <br><br></pre><p>You have stayed for <input id="xs">minutes<pre class="brush:php;toolbar:false"><input id="tt">秒<br><br> </form></pre><p><img src="https://img.php.cn/upload/image/906/316/292/1614221474621337.png" title="1614221474621337.png" alt="How to set cover timing in html"/><p>Add some text description and the timing process is completed. Save the compiled code in html format and open the web page to see the effect! <pre class="brush:php;toolbar:false"><p> 打开网页后开始从0计时。点击网页上的“停止计时”按钮可停止。 </p></pre><p><img src="https://img.php.cn/upload/image/742/891/717/1614221492207722.png" title="1614221492207722.png" alt="How to set cover timing in html"/></script>The above is the detailed content of How to set cover timing in html. For more information, please follow other related articles on the PHP Chinese website!