前端开发一个倒计时
摘要： 前端总体开发流程 前端开发程序流程图 业务前端开发流程 实现倒计时的思路： 1、设定一个未来的时间 2、获取当前的时间 3、设置一个定时器；每次更新当前时间 4、两者差值转换成时间 <!DOCTYPE h……
| 前端总体开发流程 |
| 前端开发程序流程图 |
| 业务前端开发流程 |
实现倒计时的思路：
1、设定一个未来的时间
2、获取当前的时间
3、设置一个定时器；每次更新当前时间
4、两者差值转换成时间
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>Document</title>
</head>
<body>
剩余时间：<span>00:00:00</span>
</body>
<script>
var time = document.querySelector(‘span’)
//设置未来的时间
var t = new Date(‘2018 3 12 12:12:12’)
t = t.getTime()
click()
var t1 = setInterval(click, 1000)
function click() {
var now = Date.now() //获取当前时间戳
var count = Math.round((t – now) / 1000) //获取两者差值
var h = ~~(count / 3600) //小时
var m = ~~((count – h * 3600) / 60) //分钟
var s = count % 60 //秒数
time.innerHTML = add(h) + ‘:’ + add(m) + ‘:’ + add(s)
}
function add(n) {
return n < 10 ? ‘0’ + n : n
}
</script>
</html>
| web前端开发业务流程 |
| 组件化的前端开发流程 |
| 前端开发业务流程 |
» 本文来自：前端开发者 » 《前端开发一个倒计时》
» 本文链接地址：https://www.rokub.com/7766.html
» 您也可以订阅本站：https://www.rokub.com
近期评论