js简单倒计时

冷不防 2022-04-22 00:52 280阅读 0赞

涉及的知识点

setTime()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

**1.提示：** 1000 毫秒= 1 秒。

**2.提示：** 使用 [clearTimeout()][clearTimeout] 方法来阻止函数的执行。

效果图

![20181101104400904.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>点击按钮实现60秒到计时</title>
    	</head>
    	<body>
    	   <button onclick="time();">开始</button>
    	   <button onclick="stop();">停止</button>
    	   <input  value="60" id="txt"/>
    		<script>
    			var txt = document.getElementById("txt").value;
    			var out;
    			function time(){
    			   if(txt<=60&&txt>0){
    				   	txt--;
    				    document.getElementById("txt").value = txt;
    				     out= setTimeout(time,1000);	
    			   }else{
    			   	    document.getElementById("txt").value = 0;
    			   }
    			}
    			function stop(){
    				clearTimeout(out);
    			}	
    		</script>
    	</body>
    </html>

[clearTimeout]: http://www.runoob.com/jsref/met-win-cleartimeout.html
[20181101104400904.gif]: /images/20220422/77424aae6dd24f62b0657f3941d65a89.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关简单js代码实现教师节倒计时

![彩旗分割线][ee41d148b37769e8c80d6afd8e809df4.png] 教师节快乐 ![f98879774b1789905bdd698

骑猪看日落/ 2022年12月05日 15:13/ 0 赞/ 272 阅读

相关 js 天数倒计时时间倒计时

export function getOverTimeDown(endDateStr: string, outValue?: { value: string }, fn

àì夳堔傛蜴生んèń/ 2022年09月11日 12:10/ 0 赞/ 304 阅读

相关 js倒计时

//倒计时 function show_time() { //正数表达式 var re = /^\d+(?=\.{0,1}

我就是我/ 2022年08月05日 07:49/ 0 赞/ 259 阅读

相关 JS-实现秒表倒计时+缓存倒计时

实现秒表倒计时+缓存倒计时功能 <!DOCTYPE html> <html> <head> <meta ch

约定不等于承诺〃/ 2022年05月17日 12:38/ 0 赞/ 388 阅读

相关 js简单倒计时

涉及的知识点 setTime() setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 1.提示： 1000 毫秒= 1 秒。 2.提示

冷不防/ 2022年04月22日 00:52/ 0 赞/ 281 阅读

相关 js简单倒计时

不想每次用倒计时，都现写代码，比较烦，这里记一下，也顺便分享一些倒计时简单的逻辑。如果你有更简单方便的代码，可以分享给大家。 var method = {

忘是亡心i/ 2022年04月04日 20:27/ 0 赞/ 292 阅读

相关 js倒计时

倒计时 { padding: 0; margin: 0; box

亦凉/ 2022年01月30日 02:19/ 0 赞/ 283 阅读

相关 js倒计时

　　　　　　　　　　　　　　var startTime = Date.parse(new Date())/1000;//开始时间

太过爱你忘了你带给我的痛/ 2021年10月23日 10:55/ 0 赞/ 450 阅读

相关 js倒计时

![20190820151447888.png][] function tow(n) { return n >= 0 &&

- 日理万妓/ 2021年10月19日 09:52/ 0 赞/ 459 阅读

相关 JS 倒计时

经常遇到需要倒计时的地方，下面的JS可以简单实现倒计时，当然可以加上Css使得界面更加美观！ `<script type=` `"text/javascript"` `>`

约定不等于承诺〃/ 2021年09月29日 17:34/ 0 赞/ 560 阅读