js怎么做倒計時

在網頁設計中，有時辰為了設計的需要，當用戶在點擊某個按鈕的時辰就會倒計時進行計時。那么在網頁中若何用javascript做倒計時呢？下面就隨我一路進行現實操作吧。

東西/原料

軟件：Adobe Dreamweaver cs4
演示瀏覽器：IE11.0瀏覽器

方式/步調

1
第一步：打開Adobe Dreamweaver玩也設計軟件后，點擊新建一個HTML網頁文件。
2
第二步：點擊“代碼”視圖后，就可以看到HTML的代碼，因為要在網頁中展示倒計時，所以需要先寫一個結構對象<div>標簽。
<body>
<div id="daojishi">將在這里顯示倒計時</div>
</body>
3
第三步：為了在瀏覽器中不雅看比力便利，我們給這個div標簽設置一個樣式，讓其居中在瀏覽器屏幕上顯示。
<style>
#daojishi{ width:200px; height:200px; border: 1px solid #C03; margin: 300px auto; line-height:200px; text-align:center;}

</style>
4
第四步：此時起頭編寫js語句，起首在<body></body>標簽的中心寫上js劇本標簽<script type="text/javascript"></script>
5
第五步：起首界說一個全局變量保留倒計時的數，再自界說一個函數：test()，
<script type="text/javascript">
var d = 10; //10秒倒計時
function test(){

}
</script>
6
第六步：在函數內部先獲取要在網頁中顯示倒計時的標簽：
<script type="text/javascript">
var d = 10;
function test(){
document.getElementById("daojishi").innerHTML="倒計時"+d+"秒";
}

</script>
7
第七步：起頭寫判定語句，若是倒計時小于0了，那么就要做出響應的反饋信息。
<script type="text/javascript">
var d = 10;
function test(){
document.getElementById("daojishi").innerHTML="倒計時"+d+"秒";
d--;
if(d<0){
document.getElementById("daojishi").innerHTML="時候到";
}
}
</script>
8
第八步：因為倒計時是動態轉變的，所有需要每秒種都挪用一次所界說的函數，是以需要寫上：
<script type="text/javascript">
var d = 10;
function test(){
document.getElementById("daojishi").innerHTML="倒計時"+d+"秒";
d--;
if(d<0){
document.getElementById("daojishi").innerHTML="時候到";
}
}
setInterval("test()",1000)；
</script>
9
第九步：保留該網頁文件，在瀏覽器中打開進行預覽。當倒計不時間到之后就會按照設置的信息顯示“時候到”。
10
總結：
1、新建一個HTML文件后，在代碼窗口中起首要編寫一個標簽用來顯示到倒計時
2、給該標簽寫上響應的樣式，以便在瀏覽器中進行不雅看
3、在<body>標簽的中心寫上劇本標簽<script>
4、在劇本標簽中起首界說一個全局變量來保留倒計時原始數，再自界說一個函數
5、起首挪用再網頁中需要顯示倒計時的標簽
6、經由過程inner HTML屬性進行內容的輸出
7、對全局變量進行判定，若是倒計時小于0，那么就應該做出響應的反饋信息
8、因為是動態顯示倒計時，是以需要每秒種挪用一次該函數,方式是寫上setInterval();

發表于 2019-12-01 20:28
閱讀 ( 936 )
分類：其他類型

js怎么做倒計時

東西/原料

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章