10 Second Timer「NYU」
原创2022年11月25日大约 1 分钟...约 429 字
你好,我是悦创。
题目:https://bornforthis.cn/1v1/04-TommyTian/02-PROJECT-4-REVIEW-EXERCISES.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 Second Timer</title>
<style>
#timer {
display: block;
position: relative;
width: 200px;
margin: 5% auto;
padding: 5% auto;
text-align: center;
}
button {
display: block;
width: 100px;
height: 10%;
margin: 5% auto;
border: solid 3px black;
background-color: white;
font-size: 24px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 id="timer">Time's Up!</h1>
<button type="button" onclick="restart()">Restart</button>
<script>
let lefttime = 10;
let clear;
let start;
// 该setTimeout()方法在几毫秒后调用一个函数。
function restart() {
start = setTimeout(countdown, 1000);
if (lefttime <= 0) {
lefttime = 10;
start;
} else {
// lefttime--;
lefttime = lefttime - 1;
setTimeout(countdown, 1000)
}
}
function countdown() {
$("#timer").html(lefttime);
if (lefttime <= 0) {
$("#timer").html("Time's Up!");
} else {
lefttime = lefttime - 1;
setTimeout(countdown, 1000)
}
}
</script>
</body>
</html>
欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!
公众号:AI悦创【二维码】

AI悦创·编程一对一
AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Linux、」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh
C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh
方法一:QQ
方法二:微信:Jiabcdefh
