前端精美小Demo之---可調倒計時實現

原創 萌主_iii 2020-06-08 03:30

可調倒計時實現

　　說明：完全通過HTML、CSS和JavaScript實現倒計時的動態可調，可控制倒計時的暫停和繼續，在倒計時進行期間不可對倒計時時間進行修改，任何時候都可以對倒計時進行重置；背景圖等都可調。
　　實現代碼：可到https://github.com/wangchengiii/Countdown-獲取。
　　下面爲可調倒計時的部分效果圖：
　　
　　這是簡單的界面
　　
　　以上是簡單的界面實現，圖中的所有按鈕，方框等都是通過HTML、CSS和JavaScript實現。
　　可通過點擊時、分、秒上下的三角形和小黑塊來手動調節時、分、秒的大小，都有對應的限制。
　　當我們自己設置好倒計時開始時間後點擊開始倒數即可開始倒數：
　　
　　

　　點擊開始導航後，顯示爲暫停，當點擊暫停則變爲繼續，顯示爲以上頁面，後面可以一直操作。
　　具體實現代碼：
　　
　　1>index.html頁面

<!--index.html頁面-->
<!DOCTYPE html>
<html>
<head>
    <title>可調倒計時</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>

    <!-- 外部的一些樣式和動作等 -->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="./countdown.css">
    <script type="text/javascript" src="./countdown.js"></script>
</head>
<body>
<div class="box">
    <div class="text">
        倒計時
    </div>
    <div class="shows">
        <div class="wrap" id="wrap"></div>

        <div class="hour" id="hour">
            00
        </div>
        <div class="up-down1">
            <div class="up" onclick="addHour()">
                <div class="triangle-up">   
                </div>
            </div>
            <div class="down" onclick="subHour()" id="down_hour">
                <div class="triangle-down"> 
                </div>
            </div>
        </div>

        <div class="colon">
            :
        </div>
        <div class="minute" id="minute">
            00
        </div>
        <div class="up-down2">
            <div class="up" onclick="addMinute()" id="up_minute">
                <div class="triangle-up">
                </div>
            </div>
            <div class="down" onclick="subMinute()" id="down_minute">
                <div class="triangle-down"> 
                </div>
            </div>
        </div>

        <div class="colon">
            :
        </div>
        <div class="second" id="second">
            00
        </div>
        <div class="up-down3">
            <div class="up" onclick="addSecond()" id="up_second">
                <div class="triangle-up">   
                </div>
            </div>
            <div class="down" onclick="subSecond()" id="down_second">
                <div class="triangle-down"> 
                </div>
            </div>
        </div>
        <div class="minsecond" id="minsecond">
            00
        </div>
    </div>
    <div class="but">
        <p>
            <button type="button" class="btn" onclick="starts()" id="start">開始倒數</button>
            <button type="button" class="btn" onclick="reset()">重置</button>
        </p>
    </div>
</div>
</body>
</html>

　　2>countdown.js頁面
　　

//countdown.js頁面具體代碼實現
function addHour(){
    var getHour = document.getElementById("hour");
    if(getHour.innerText >= 0 && getHour.innerText <= 8){
        getHour.innerText++;
        getHour.innerText = "0" + getHour.innerText; 
    }else{
        getHour.innerText++;
    }
    if(getHour.innerText >24){
        getHour.innerText = '00';
    }
}
function subHour(){
    var getHour = document.getElementById("hour");
    if(getHour.innerText <= 10 && getHour.innerText > 0){
        getHour.innerText--;
        getHour.innerText = "0" + getHour.innerText; 
    }else{
        getHour.innerText--;
    }
    if(getHour.innerText < 0){
        getHour.innerText = '24';
    }
}
function addMinute(){
    var getMinute = document.getElementById("minute");
    if(getMinute.innerText >= 0 && getMinute.innerText <= 8){
        getMinute.innerText++;
        getMinute.innerText = "0" + getMinute.innerText; 
    }else{
        getMinute.innerText++;
    }
    if(getMinute.innerText >60){
        getMinute.innerText = '00';
    }
}
function subMinute(){
    var getMinute = document.getElementById("minute");
    if(getMinute.innerText > 0 && getMinute.innerText <= 10){
        getMinute.innerText--;
        getMinute.innerText = "0" + getMinute.innerText; 
    }else{
        getMinute.innerText--;
    }
    if(getMinute.innerText < 0){
        getMinute.innerText = '60';
    }
}
function addSecond(){
    var getSecond = document.getElementById("second");
    if(getSecond.innerText >= 0 && getSecond.innerText <= 8){
        getSecond.innerText++;
        getSecond.innerText = "0" + getSecond.innerText; 
    }else{
        getSecond.innerText++;
    }
    if(getSecond.innerText > 60){
        getSecond.innerText = '00';
    }
}
function subSecond(){
    var getSecond = document.getElementById("second");
    if(getSecond.innerText > 0 && getSecond.innerText <= 10){
        getSecond.innerText--;
        getSecond.innerText = "0" + getSecond.innerText; 
    }else{
        getSecond.innerText--;
    }
    if(getSecond.innerText < 0){
        getSecond.innerText = '60';
    }
}
//重置函數的實現
function reset(){
    var start = document.getElementById('start');
    start.innerHTML = '開始倒數';
    document.getElementById("wrap").style.display = 'none';
    document.getElementById("hour").innerText = '00';
    document.getElementById("minute").innerText = '00';
    document.getElementById("second").innerText = '00';
    document.getElementById("minsecond").innerText = '00';
}
function starts(){
    var start = document.getElementById('start');
    var getHour = document.getElementById("hour");
    var getMinute = document.getElementById("minute");
    var getSecond = document.getElementById("second");
    var getMinsecond = document.getElementById("minsecond");
    var timer = window.setInterval(function(){
        document.getElementById("hour").innerText = getHour.innerText;
        document.getElementById("minute").innerText = getMinute.innerText;
        document.getElementById("second").innerText = getSecond.innerText;
        document.getElementById("minsecond").innerText = getMinsecond.innerText;
        if(getMinsecond.innerText == '00' && getSecond.innerText == '00'
            && getMinute.innerText == '00' && getHour.innerText == '00'){
            start.innerHTML = '開始倒數';
            document.getElementById("wrap").style.display = 'none';
        }else{
            document.getElementById("wrap").style.display = 'block';
            start.innerText = '暫停';
            if(start.innerText == '暫停'){
                start.onclick = function(){
                    start.innerText = '繼續';
                    clearInterval(timer);
                    stop();
                    if(start.innerText == '繼續'){
                        start.onclick = function(){
                            start.innerText = '暫停';
                            starts();
                        }
                    }
                }   
            }
        }

    if(getMinsecond.innerText <= 0){
        getMinsecond.innerText = '99';
        if(getSecond.innerText <= 0){
            if(getMinute.innerText <=0){
                if(getHour.innerText <=0){
                    start.innerHTML = '開始倒數';
                    clearInterval(timer) ;
                    getMinsecond.innerText = '00';
                    document.getElementById("wrap").style.display = 'none';
                }else{
                    getMinute.innerText = '59';
                    getSecond.innerText = '59'
                    getHour.innerText--;
                    if(getHour.innerText <=9){
                        getHour.innerText = "0" + getHour.innerText;
                    }
                }
            }else{
                getSecond.innerText = '59';
                getMinute.innerText--;
                if(getMinute.innerText <=9){
                getMinute.innerText = "0" + getMinute.innerText;
            }
        }
        }else{
            getSecond.innerText--;
            if(getSecond.innerText <=9){
                getSecond.innerText = "0" + getSecond.innerText;
            }
        }   
    }else{
        getMinsecond.innerText--;
        if (getMinsecond.innerText <= 9) 
            getMinsecond.innerText = "0" + getMinsecond.innerText;
    }
},10)
}
function stop(){
    var getHour = document.getElementById("hour");
    var getMinute = document.getElementById("minute");
    var getSecond = document.getElementById("second");
    var getMinsecond = document.getElementById("minsecond");
    document.getElementById("hour").innerText = getHour.innerText;
    document.getElementById("minute").innerText = getMinute.innerText;
    document.getElementById("second").innerText = getSecond.innerText;
    document.getElementById("minsecond").innerText = getMinsecond.innerText;
}

　　３>countdown.css頁面
　　

/*countdown.css代碼具體實現*/
html{
    background: url(./images/6.jpg) repeat-y center;
    height: 100%;
}
body{
    text-align: center;
}
.box{
    margin:150px auto;
    width: 400px;
    height: 260px;
    border:1px solid red;
    z-index:100;
}
.wrap{
    position: absolute;
    width:350px;
    height:100%;
    z-index:101;
    display: none;
}
.text{
    font-weight: 700;
    font-size: 3em;
    font-family: 楷體;
    letter-spacing: 1em;
    margin-left: 30px;
}
.shows{
    position: relative;
    border:1px solid black;
    margin: 50px auto;
    width: 350px;
    height: 100px;
    display: flex;
    min-height: 100px;
    align-items: center; 
　　justify-content: center;
}
.but{
    /*border:1px solid black;*/
    margin: -40px auto;
}
.btn{
    border-radius: 5px;
    border:1px solid #ccc;
    height: 40px;
    width: 120px;
    font-size: 20px;
    background-color: #ccc;
    font-family:楷體;
    color:#333;
    font-weight: 600;
    cursor:pointer;
}
.btn:hover{
    background-color: #aaa;
}
.colon{
    flex-basis: 10px;
    margin: 10px 1px;
    font-weight: 700;
    font-size: 5em;
/*border:1px solid red;*/
}
.hour,.minute,.second {
    position: relative;
    /*flex-basis: 20px;*/
    margin: 10px 3px;
    height: 47px;
    /*border-radius: 5px;*/
    border-left:1px solid black;
    border-right:1px solid black;
    font-weight: 700;
    font-size: 4em;
    display: flex;
    align-items: center; 
　　justify-content: center;
}
.hour{

}
.minute{

}
.second{

}
.minsecond{
    flex-basis: 40px;
    border-radius: 5px;
    margin: 50px 5px 15px 5px;
    line-height: 1em;
    border:2px solid black;
    font-weight: 500;
    font-size: 2em;
    display: flex;
    align-items: center; 
　　justify-content: center;
}
.up,.down{
    position: absolute;
    border:1px solid black;
    width:65.5px;
    height:12px;
    background-color: #111;
    margin-left: -1px;
}
.up{
    border-radius: 5px 5px 0 0;
}
.down{
    margin-top: 60px;
    border-radius:0 0 5px 5px ;
}
.triangle-up,.triangle-down{
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    margin: 0 auto;
}
.triangle-up{
    border-bottom: 12px solid white;
}
.triangle-down{
    border-top: 12px solid white;
}
.up-down1{
    clear:both;
    position: absolute;
    top: 13%;
    left: 1.2%;
}
.up-down2{
    clear:both;
    position: absolute;
    top: 13%;
    left: 34.6%;
}
.up-down3{
    clear:both;
    position: absolute;
    top: 13%;
    left: 68%;
}

　　GitHub路徑：https://github.com/wangchengiii/Countdown-。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端精美小Demo之---進制轉換器實現

萌主_iii 2018-08-28 23:11:31