首頁  >  文章  >  web前端  >  html怎麼設定封面計時

html怎麼設定封面計時

藏色散人
藏色散人原創
2021-02-25 10:54:173368瀏覽

html設定封面計時的方法:先建立一個HTML範例檔案;然後定義計時函數jishi(),用來計算停留時間;接著定義一個停止計時的程式stopjishi() ;最後新增停止計時按鈕和計時顯示的文字方塊即可。

html怎麼設定封面計時

本文操作環境:Windows7系統、HTML5、Dell G3電腦。

HTML網頁設計怎麼顯示計時存取網頁時間

開啟文字編輯器或記事本後,輸入基本html標籤

<html>
<head></head>
<body></body>
</html>

html怎麼設定封面計時

點選頭標籤

,在後面輸入<script>標籤,並且宣告幾個變數b、c、t。 <pre class="brush:php;toolbar:false">&lt;script type=&quot;text/javascript&quot;&gt; var b=0 var c=0 var t &lt;/script&gt;</pre><p><img src="https://img.php.cn/upload/image/679/116/895/1614221404418222.png" title="1614221404418222.png" alt="html怎麼設定封面計時"/><p>定義計時函數jishi(),用來計算停留時間。設定setTimeout參數為1000毫秒。 【推薦:<a href="https://www.php.cn/course/list/11.html" target="_blank">HTML影片教學】<pre class="brush:php;toolbar:false"> function jishi() { document.getElementById(&amp;#39;tt&amp;#39;).value=c c=c+1 t=setTimeout(&quot;jishi()&quot;,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="html怎麼設定封面計時"/><p>#然後再定義一個停止計時的程式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="html怎麼設定封面計時"/> <p>點擊<body>標籤,讓網頁在開啟時開始計時<pre class="brush:php;toolbar:false">&lt;body onLoad=&quot;jishi()&quot;&gt;</pre><p><img src="https://img.php.cn/upload/image/329/778/298/1614221463392215.png" title="1614221463392215.png" alt="html怎麼設定封面計時"/><p>然後,在下面正文中加入停止計時按鈕和計時顯示的文字方塊。 <pre class="brush:php;toolbar:false">&lt;form&gt; &lt;input type=&quot;button&quot; value=&quot;停止计时!&quot; onClick=&quot;stopjishi()&quot;&gt; &lt;br&gt;&lt;br&gt;</pre><p>您已經停留<input id="xs">分鐘<pre class="brush:php;toolbar:false">&lt;input id=&quot;tt&quot;&gt;秒&lt;br&gt;&lt;br&gt; &lt;/form&gt;</pre><p><img src="https://img.php.cn/upload/image/906/316/292/1614221474621337.png" title="1614221474621337.png" alt="html怎麼設定封面計時"/><p>再增加一些文字說明,計時程式完成。儲存編好的程式碼為html格式,開啟網頁看下效果吧! <pre class="brush:php;toolbar:false">&lt;p&gt; 打开网页后开始从0计时。点击网页上的“停止计时”按钮可停止。 &lt;/p&gt;</pre><p><img src="https://img.php.cn/upload/image/742/891/717/1614221492207722.png" title="1614221492207722.png" alt="html怎麼設定封面計時"/>#</script>

以上是html怎麼設定封面計時的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn