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

JavaScript018

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 创建无缝的客户机 - 服务器通信。

逻辑如下：

1、先判断两个时间的时间差，当然如果得到的时间是13位时间戳的话你需要转化一下

2、判断时间够一天显示天数，够一小时显示小时数

相关代码：

//获取时间，时间戳转换，不是则不转

var mydate1 = new Date(parseInt(time1.replace("/Date(", "").replace(")/", "")))

var mydate2 = new Date(parseInt(time2.replace("/Date(", "").replace(")/", ""))) 

//获取剩余秒数 

var timerc =dateDiff(mydate, '2015/05/19 10:00:00') / 1000

function dateDiff(date1, date2) {

            var dt1 = new Date(Date.parse(date1))

            var dt2 = new Date(Date.parse(date2))

            try {

                return Math.round((dt2.getTime() - dt1.getTime()))

            }

            catch (e) {

                return e.message

            }

        } 

//循环调用倒计时

  function add() { //加时函数

            --timerc //时间变量自减1

            var day = parseInt(timerc / 86400)

            var hour = parseInt((timerc % 86400) / 3600)

            var min = parseInt((timerc % 3600) / 60)

            var sec = Number(parseInt(timerc % 60 / 10)).toString() + Number(parseInt((timerc % 10))).toString()

            if (day > 0) { //如果不到5分钟

                $("#day").html(day + '天') //写入天数

                $("#hour").html(hour + '时') //写入小时数

                $("#min").html(min + '分') //写入分钟数

                $("#sec").html(sec + '秒') //写入秒数（两位）

            }

            else if (hour > 0) {

                $("#hour").html(hour + '时') //写入小时数

                $("#min").html(min + '分') //写入分钟数

                $("#sec").html(sec + '秒') //写入秒数（两位）

            }

            else if (min > 0) {

                $("#min").html(min + '分') //写入分钟数

                $("#sec").html(sec + '秒') //写入秒数（两位）

            }

            else if (sec != '00') {

                $("#sec").html(sec + '秒') //写入秒数（两位）

            }

            else {

                tiao(activity) return true//时间到0调用函数

            }

            setTimeout("add()", 1000) //设置1000毫秒以后执行一次本函数

        }

望采纳！

点击按钮出现60秒倒计时的简单js代码(推荐)

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=utf-8"

/>

<title>点击按钮出现60秒倒计时的简单js代码(推荐)</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

=

60

}

else

{

val.setAttribute("disabled",

true)

val.value="重新发送("

+

countdown

+

")"

countdown--

}

setTimeout(function()

{

settime(val)

},1000)

}

</script>

</body>

</html>

以上这篇点击按钮出现60秒倒计时的简单js代码(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。