js定时器做倒计时

最近有个需求,要求此静态页面实现倒计时功能
先上图:
js定时器做倒计时_第1张图片
在这里插入图片描述
在这里插入图片描述
分析需求:
这种肯定是用到定时器了,选用了setTime间隔1秒调用自身函数,每次更改文本的值

000小时11

这里我是用了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);
                                            }
                                             })

你可能感兴趣的:(js,前端,jq)