Home > Article > Web Front-end > How to set cover timing in html

How to set cover timing in html

藏色散人Original: 2021-02-25 10:54:173369browse

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>

How to set cover timing in 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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What should I do if the introduction of js into html does not take effect?Next article：What should I do if the introduction of js into html does not take effect?

See more

How to set cover timing in html

Related articles