一个JavaScript的倒计时程序

最新推荐文章于 2023-01-26 11:45:58 发布

遗失灬念

最新推荐文章于 2023-01-26 11:45:58 发布

阅读量447

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_35035234/article/details/53495230

版权

这一段时间学校有个小比赛让我下载一个计时器去实现一个全屏的计时效果（为了能让选手也看见），在百度上下载的要不就是有广告要不就是有问题，还有的干脆有毒。于是就想用前段时间学的JavaScript写一个网页得了，反正全屏之后照样用。话不多说，下面是代码。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <script src="timeCount.js" type="text/javascript"></script>
    <link rel="stylesheet" href="tc.css">
</head>
<body scroll="no">
<form id="in">
    <input id="m" type="text" placeholder="请输入分钟数">分
    <input id="s" type="text" placeholder="请输入秒数">秒
</form>
<div class="time">
    <span id="sm">00</span><span>:</span><span id="ss">00</span>
</div>
<div class="b">
    <button οnclick="began()">开始</button>
    <button οnclick="timeClear()">结束</button>
</div>
</body>
</html>

css：

html{
    background: black;
}
form{
    color: white;
    position: relative;
    text-align: center;
    margin-top: 4%;
}
.time{
    position: relative;
    text-align: center;
    margin-top: 4%;
}
.time span{
    color:red;
    font-size: 20em;
}
.b{
    text-align: center;
    margin-top: 5%;
}
.b button{
    width: 80px;
    height: 40px;
    margin-left: 10em;
    margin-right: 10em;
}

js代码：

/**
 * Created by Administrator on 2016/12/5.
 */
//定义4个全局变量分别为m:分钟，s：秒，sum：总秒数，t: setTimeout（）函数对象，用来实现对定时器的操作。
var m,s,sum,t;
//当点击开始时：
function began(){
    //获取输入的分钟数
    m = document.getElementById("m").value;
    //获取输入的秒数
    s = document.getElementById("s").value;
    sum = Number(m*60)+Number(s);
    //当点击开始后使输入框隐藏。
    document.getElementById("in").style.display = "none";
    //调用timeCount()函数。
    timeCount();
}
function timeCount(){
    //当前秒数
    var ss = sum%60;
    //当前分钟数
    var sm = (sum-ss)/60;
    //如果为个位数，在前面补零。
    if(sm/10<1) document.getElementById("sm").innerText = "0" + sm;
    else document.getElementById("sm").innerText = sm;
    if(ss/10<1) document.getElementById("ss").innerText = "0" + ss;
    else document.getElementById("ss").innerText = ss;
    sum--;
    //每过一秒，调用自身
    t = setTimeout("timeCount()",1000);
    //时间用完时，使计数器停止。
    if(t<0) clearTimeout(t);
}
//点击清空时。
function timeClear(){
    document.getElementById("sm").innerText = "00";
    document.getElementById("ss").innerText = "00";
    clearTimeout(t);
    document.getElementById("in").style.display = "list-item";
}