집 > 기사 > 웹 프론트엔드 > html 및 js에서 카운트다운 기능 구현

html 및 js에서 카운트다운 기능 구현

炎欲天舞원래의: 2017-08-04 15:44:492074검색

카운트다운에 사용되는 주요 지식 포인트: 1. 시간 간격을 설정하는 setInterval은clearInterval로 취소할 수 있습니다.　　　　　　　　　

다음은 js의 함수입니다

var shijian=3600;
    var time=null;
    function start(){
         time=setInterval("count()",1000);//返回值time只是为了需要暂停的时候clearInterval(time)清除时间间隔
    }
    
    function count(){
        if(shijian<0){
            alert("time out");
            pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。
        }else{
            $("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式
            shijian--;
            console.info(time);
        }
    }
    function pause(){
        clearInterval(time);
    }
    function goOn(){
        time = setInterval("count()",1000);//重新设置时间间隔
    }

두 번째는 html 리소스의 편의를 위해 html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="1.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
    <style type="text/css">
        input{
            background-color: #9fc5f1;
            width: 100px; 
            height: 30px; 
            line-height: 30px; 
            text-align: center; 
            color: #fff; 
            font-size:14px; 
            font-weight: bold;
        }
        #time p{
            color: #1f6dc2;
            font-size: 48px; 
            font-weight: bold;
            margin-left:90px;
            margin-bottom:0px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="time">
    <p>00:00</p>
    <input type="button" value="开始" onclick="start()"/>
    <input type="button" value="暂停" onclick="pause()"/>
    <input type="button" value="继续" onclick="goOn()"/>
</div>
</body>
</html>

에 CSS를 직접 작성했습니다.

위 내용은 html 및 js에서 카운트다운 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：프론트엔드 개발을 처음부터 배우는 방법다음 기사：프론트엔드 개발을 처음부터 배우는 방법