纯JS实现一个计时器，使用setInterval()

最新推荐文章于 2022-12-07 10:28:41 发布

又燃又丧

最新推荐文章于 2022-12-07 10:28:41 发布

阅读量710

点赞数

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_43440852/article/details/111319901

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

就刚开始学，想实现一个什么，就计时器，很简陋，分享一下，代码是可以运行的。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time</title>
    <link rel = "Shortcut Icon" type = "image/x-icon" href = "image/3.jpg" >
    <link rel = "stylesheet" type = "text/css" href="time.css">
    <script type = "text/javascript" src = "time.js"></script>
</head>
<body>
<div id = "container">
    <div id = "screen">0 分 0 秒</div>
    <div id = "bt">
        <button id = "reset" onclick = "reset()"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3670287676,3572230959&fm=26&gp=0.jpg" alt="重置"></button>
        <div id = "bt1" onclick = "start()">开始计时</div>
        <button id="cl" onclick = "record()"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1480412124,1226384140&fm=26&gp=0.jpg" alt="计时"></button>
    </div>
    <div id="tc">
        <ul>
            <li id = "c1"> </li>
            <li id = "c2"> </li>
            <li id = "c3"> </li>
            <li id = "c4"> </li>
            <li id = "c5"> </li>
        </ul>
    </div>
</div>
<div id="copyright">
    Copyright &copy 2020-2020 阿冯的计时器
</div>

</body>
</html>

CSS:

*{
    margin: 0 auto;
    padding: 0 auto;
}
body{
    background-color: #e0e0e0;
}
#container{
    width:100%;
}
#screen{
    margin:0 auto;
    margin-top:100px;
    padding: 0 auto;
    padding-top: 40px;
    height: 100px;
    width:100% ;
    background-color: black;
    color: white;
    text-align: center;
    font-size: 50px;
    vertical-align:middle;
    -webkit-box-shadow: 2px 2px 1px white;
    -moz-box-shadow: 2px 2px 1px white;
    box-shadow: 2px 2px 1px white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#bt{
    margin:0 auto;
    padding:0 auto;
    width: 800px;
    height: 200px;
}

img{
    width: 60px;
    height: 60px;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

div #reset{
    margin: 0 auto;
    padding: 0 auto;
    margin-left: 160px;
    margin-top: 100px;
    display: inline-block;
    float: left;
    background-color: white;
    border: 1px solid white;
    -webkit-box-shadow: 3px 3px 3px #a5e014;
    -moz-box-shadow: 3px 3px 3px #a5e014;
    box-shadow: 3px 3px 3px #a5e014;
}

div #bt1{
    margin:0 auto;
    padding:0 auto;
    padding-top: 15px;
    position: relative;
    margin-left: 80px;
    margin-top: 100px;
    height: 55px;
    width: 200px;
    font-size: 25px;
    background-color: #a5e014;
    color: white;
    -webkit-box-shadow:  1px 1px 0 inset;
    -moz-box-shadow:  1px 1px 0 inset;
    box-shadow:  1px 1px 0 inset;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}
div #cl{
    margin: 0 auto;
    padding: 0 auto;
    margin-right:160px;
    margin-top: 100px;
    display: inline-block;
    float: right;
    background-color: white;
    border: 1px solid white;
    -webkit-box-shadow: 3px 3px 3px #a5e014;
    -moz-box-shadow: 3px 3px 3px #a5e014;
    box-shadow: 3px 3px 3px #a5e014;
}
div #tc{
    padding: 0 auto;
    margin: 0 auto;
    width: 50%;
    height:260px ;
    font-size: 25px;
    padding-right: 40px;
    text-align: center;
    color: black;
    border: 2px solid white;
    -webkit-box-shadow: 1px 1px 1px  #a5e014;
    -moz-box-shadow: 1px 1px 1px  #a5e014;
    box-shadow: 1px 1px 1px #a5e014;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}
ul{
    list-style-type: none;
    line-height: 2em;
}
#copyright{
    width:100%;
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #ff908b;
}

JS:

var pause = true;
var time = 0;
var t = 0;
var cArray =  new Array(5);
cArray[0] = "c1";
cArray[1] = "c2";
cArray[2] = "c3";
cArray[3] = "c4";
cArray[4] = "c5";

function timer() {   //此函数每秒钟运行一次
    time += 1; //一秒钟加一，单位是秒
    var min = parseInt(time / 60); //把秒转换为分钟，一分钟60秒，取商就是分钟
    var sec = time % 60; //取余就是秒
    document.getElementById('screen').innerHTML = min + ' 分 ' + sec +' 秒 '; //然后把时间更新显示出来
}

function start(){
    if(pause){
        document.getElementById("bt1").innerHTML = "点击会暂停";
        pause = false;
        set_timer = setInterval(timer, 1000);   //每一秒运行一次timer函数
    }
    else {
        document.getElementById("bt1").innerHTML = "开始计时";
        pause = true;
        clearInterval(set_timer);
    }
}

//点击重置之后，不会自动开始计时
// function reset(){
//     time = 0;
//     document.getElementById('screen').innerHTML = ' 0 分 0 秒 ';
// }

//点击重置之后，1、会自动重新开始计时，2、按钮会显示为可暂停
function reset(){
    alert("重新开始了哦~");
    time = 0;
    if(pause){
        start();
    }
    for(var i = 0; i<5; i++ ){
        document.getElementById(cArray[i]).innerHTML = "";
    }

}


function record(){
    var c = document.getElementById("screen");
        t = t % 5;
        document.getElementById(cArray[t]).innerHTML = c.innerHTML;
        t += 1;
}

嘿嘿嘿，图标啥的自己放个图片就好啦，或者删掉那个就好啦~

又燃又丧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯JS实现一个计时器，使用setInterval()

就刚开始学，想实现一个什么，就计时器，很简陋，分享一下，代码是可以运行的。HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>time</title> <link rel = "Shortcut Icon" type = "image/x-icon" href = "image/3.jpg" >
复制链接

扫一扫