html設定封面計時的方法:先建立一個HTML範例檔案;然後定義計時函數jishi(),用來計算停留時間;接著定義一個停止計時的程式stopjishi() ;最後新增停止計時按鈕和計時顯示的文字方塊即可。
本文操作環境:Windows7系統、HTML5、Dell G3電腦。
HTML網頁設計怎麼顯示計時存取網頁時間
開啟文字編輯器或記事本後,輸入基本html標籤
<html> <head></head> <body></body> </html>
點選頭標籤
,在後面輸入<script>標籤,並且宣告幾個變數b、c、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="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(&#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="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"><body onLoad="jishi()"></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"><form> <input type="button" value="停止计时!" onClick="stopjishi()"> <br><br></pre><p>您已經停留<input id="xs">分鐘<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="html怎麼設定封面計時"/><p>再增加一些文字說明,計時程式完成。儲存編好的程式碼為html格式,開啟網頁看下效果吧! <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="html怎麼設定封面計時"/>#</script>以上是html怎麼設定封面計時的詳細內容。更多資訊請關注PHP中文網其他相關文章!