js定时器做倒计时

最新推荐文章于 2024-07-15 16:14:38 发布

吴小友

最新推荐文章于 2024-07-15 16:14:38 发布

阅读量1.2k

点赞数

分类专栏： js 前端 jq 文章标签：前端 javascript js jq

本文链接：https://blog.csdn.net/qq_42952147/article/details/100522961

版权

js 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

最近有个需求，要求此静态页面实现倒计时功能
先上图:
在这里插入图片描述

分析需求:
这种肯定是用到定时器了，选用了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);
                                            }
                                             })