在網頁上實作倒數計時讓使用者知道多久會被導向到另一個網站，這個功能常會用在網站改網址或者是要告知一些重要事項。作法如下：

jQuery: jquery-1.11.1.min.js

jquery.countdown: jquery.countdown.min.js

下載上面兩個 java script，然後再寫一個網頁 index.html，內容如下即可。請修改紅色標示的地方。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META HTTP-EQUIV="Refresh" CONTENT="15;URL=https://bpm.polinwei.com">
<title>Welcome BPM (Business Process Management, BPM) 企業流程管理系統</title>

<link href="style.css" rel="stylesheet" type="text/css">

<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.countdown.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    val = 15 * 1000;
    selectedDate = new Date().valueOf() + val;
    $('.clock').countdown(selectedDate, function(event) {
           $(this).html(event.strftime('%S'));
         });
});    

</script>

<style type="text/css">
<!--
body {
    background-color: #e1dbcd;
    margin: 0px;    
    background-repeat: repeat-x;
}
-->
</style>

</head>
<body>


<div id="content">
    <p><span class="text_black"> Attention</span></p>
    
    <span class="text_bold">eSystem New URL</span>? ?<br>
    <p><span class="text">
    esystem's URL will be changed to <a href="https://bpm.polinwei.com"> https://bpm.polinwei.com</a> in 2015/11/16 , Please noted.
    </span></p>
    <p><span class="text_bold_nounderline">This page will redirect to new page in <span class="clock"></span> sec.</p>
    <p> PS: BPM - Business Process Management </p>
    
    <br/>
    <p><span class="text_black"> 請注意 </span></p>
    <p><span class="text_bold">eSystem 網址即將變更</span>? ?</p>
    <p><span class="text">
    esystem 網址將於2015/11/16更新為 <a href="https://bpm.polinwei.com">https://bpm.polinwei.com</a>，請將該網址加到你的最愛。
    </span></p>   
    <p><span class="text_bold_nounderline">該網頁將於<span class="clock"></span>秒後自動轉址。</span></p>
    <p> 註: 企業流程管理 BPM（Business Process Management, BPM）</p>
    
</div>

</body>
</html>
arrow
arrow
    文章標籤
    jquery countdown
    全站熱搜
    創作者介紹
    創作者 MIS 的頭像
    MIS

    MISTECH 技術手抄本

    MIS 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄