JS 5秒倒计时的代码怎么写?时间要实时显示在屏幕上的。

JavaScript022

JS 5秒倒计时的代码怎么写?时间要实时显示在屏幕上的。,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>js实现倒计时60秒的简单代码(推荐)</title>

<script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />

<script type="text/javascript">

var countdown=60

function settime(val) {

if (countdown == 0) {

val.removeAttribute("disabled")

val.value="免费获取验证码"

countdown = 5

} else {

val.setAttribute("disabled", true)

val.value="重新发送(" + countdown + ")"

countdown--

setTimeout(function() {

settime(val)

},1000)

}

}

</script>

</body>

</html>

JavaScript简介

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 课外书

如果 JavaScript 教程学习完毕,并且需要更深入地学习这门语言,《JavaScript 高级教程》绝对是您最好的选择。本教程从 JavaScript 的历史开始讲起,直到当前它对 XML 和 Web 服务的支持。

将学习到如何扩展该语言,以使它适应特殊的需求。

还将学到如何使用 JavaScript 创建无缝的客户机 - 服务器通信。

前言

之前跟大家分享了关于

Android

原生实现验证码倒计时,地址是这里,现在公司使用

Ionic

开发的

App

也要实现类似的功能,现在也记录下来,供大家参考:

效果图:

正文

首先介绍下与本文相关的概念

$interval

$interval

window.setInterval

Angular

包装形式,函数如果在没有被取消的时候会无限执行。(取消使用

cancel(promise)

用法:

$interval(fn,delay,[count],[invokeApply],[Pass])

参数说明:

fn

:

无限执行的函数

必须参数,必传

delay

:

每次调用的间隔毫秒数值

必须参数,必传

count

:

循环次数的数值,如果没设置,则无限制循环

非必须参数,可不传

invokeApply

:

如果设置为false,则避开脏值检查,否则将调用$apply

非必须参数,可不传

Pass

:

函数的附加参数

非必须参数,可不传

方法:

1、cancel(promise)

promise:$interval函数的返回值。

具体实现

$scope.description

=

"获取验证码"

var

timerHandler

=

null

/**

*

倒计时

*

@param

time

控制循环次数

*/

var

countDown

=

function

(second,time)

{

timerHandler

=

$interval(function

()

{

if

(second

<=

0)

{

$interval.cancel(timerHandler)

second

=

59

$scope.description

=

"获取验证码"

}

else

{

$scope.description

=

second

+

"s

后可重发"

second--

}

},

1000,

time)

}

调用

countDown(59,60)

最后别忘了注入

$interval

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对脚本之家的支持。