js定時器做倒計時

最近有個需求,要求此靜態頁面實現倒計時功能
先上圖:
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
分析需求:
這種肯定是用到定時器了,選用了setTime間隔1秒調用自身函數,每次更改文本的值

<span>00</span>天<span id="jq_hour">0</span>小時<span id="jq_minute">1</span>分<span id="jq_second">1</span>秒

這裏我是用了jq插件所以直接獲取了文本的值了

                                         		var hour=$('#jq_hour').text()
                                        		var minute=$('#jq_minute').text()
                                        		var second=$('#jq_second').text()
                                            	 getTime()
                                            function getTime(){
                                         			//時間到底終止
                                                    if(hour=="0"&&minute=="0"&&second=="0"){
                                        				return false
                                        			}
                                            		if(second=="0"){
                                            			//秒到底分就減一,並且重新恢復60
                                            			//前置條件
                                            			if(minute>0){
                                            				minute--
                                            				second=60
                                            			}
                                            		}
                                            		if(minute=="0"){
                                            			//前置條件
                                            			if(hour>0){
                                            				hour--
                                            				minute=60
                                            			}
                                            		}
                                            		second--
                                            		//每次調用更新文本值
                                            		$('#jq_hour').text(hour)
                                            		$('#jq_minute').text(minute)
                                            		$('#jq_second').text(second)
                                            		setTimeout(getTime,1000);
                                            }
                                             })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章