<!--
var maxtime = 60*60 //一个小时，按秒计算，自己调整!
function CountDown(){
if(maxtime>=0){
minutes = Math.floor(maxtime/60)
seconds = Math.floor(maxtime%60)
minutes = minutes>=10?minutes:'0'+minutes
seconds = seconds>=10?seconds:'0'+seconds
msg = "距离结束还有"+minutes+"分"+seconds+"秒"
document.all["timer"].innerHTML=msg
if(maxtime == 5*60) alert('注意，还有5分钟!')
--maxtime
}
else{
clearInterval(timer)
alert("时间到，结束!")
}
}
timer = setInterval("CountDown()",1000)
//-->
</SCRIPT>
<meta charset="utf-8">
<div id="timer" style="color:red"></div>
最近做next.js项目，项目中有个倒计时的需求，于是上github上找了找发现了一个挺好的插件react-countdown推荐给大家，github地址： https://github.com/ndresx/react-countdown
npm install react-countdown --save
yarn add react-countdown
import Countdown from 'react-countdown'
<Countdown date={Date.now() + 10000} />
这是一个倒计时为10秒的示例，以毫秒为单位显示总时间差。
如果不对显示做处理默认在页面中的显示是：00:00:00:00对应->天、小时、分、秒
插件提供了两个属性：
1、daysInHours
Boolean类型的值默认为false；设为true时，它可以将天数转化为小时表示
2、zeroPadTime
Number类型的值，设置时间显示几位数，不够的用0填充，不设置这个属性的话当小时或者秒为一位数时展示一位数
另外react-countdown还给我们提供了一个renderer属性，它接收一个方法，如果我们有特殊需求如倒计时完成后要显示什么内容可以通过renderer接收的方法中实现。
在项目倒计时中一般会进行时间差值来计算剩余时间，我在项目中进行差值计算时遇到一个bug，在chrome中倒计时正常显示但在safari中倒计时没有显示，查了资料发现safari浏览器在时间处理上有一些兼容性问题。后端返回的时间格式是:2020-3-14 00:00:00,用new Date()转化后结果是Invalid Date，再getTime()得到的是NaN。原来safari不支持这种格式，把时间格式中的"-"全部替换为"/"就可以获取到时间戳了。
react-countdown插件中还提供了很多属性，有兴趣的可以上github上自行查阅。
<!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 创建无缝的客户机 - 服务器通信。
