使用JavaScript添加動態數字到CSS地圖Pin

Question

如何在此引腳的中心添加一個動態數字，例如倒計時？

CODEPEN

<div class='pin'></div> 
<div class='pulse'></div> 

@import "nib" 

body 
html 
    height 100% 

body 
    background #2F2F2F 

.pin 
    width 100px 
    height 100px 
    border-radius 50% 50% 50% 0 
    background #89849b 
    position absolute 
    transform rotate(-45deg) 
    left 46.4% 
    top 42% 
    margin -20px 0 0 -20px 
    animation-name bounce 
    animation-fill-mode both 
    animation-duration 1s 
    &:after 
    content '' 
    width 72px 
    height 72px 
    margin 14px 0 0 14px 
    background #2F2F2F 
    position absolute 
    border-radius 50% 

.pulse 
    background rgba(0,0,0,0.2) 
    border-radius 50% 
    height 14px 
    width 14px 
    position absolute 
    left 50% 
    top 50% 
    margin 11px 0px 0px -12px 
    transform rotateX(55deg) 
    z-index -2 
    &:after 
    content "" 
    border-radius 50% 
    height 40px 
    width 40px 
    position absolute 
    margin -13px 0 0 -13px 
    animation pulsate 1s ease-out 
    animation-iteration-count 1 
    opacity 0.0 
    box-shadow 0 0 1px 2px #89849b 
    animation-delay 1.1s 

@keyframes bounce 
    0% 
    opacity 0 
    transform translateY(-2000px) rotate(-45deg) 
    60% 
    opacity 1 
    transform translateY(30px) rotate(-45deg) 
    80% 
    transform translateY(-10px) rotate(-45deg) 
    100% 
    transform translateY(0) rotate(-45deg) 

Answer 1

看看這對你的作品。

在您的javascript代碼中將INT更改爲您的變量。

Code Pen Counter

你必須調整爲個位數和兩位數等等與間距的數字。

<div class='pin'> 
    <div class="pin-num"> 
    <div id="pinNum"></div> 
    </div> 
</div> 
<div class='pulse'></div> 

.pin-num 
    height: 72px; 
    position: absolute; 
    left: 14px; 
    z-index: 2000; 
    top: 14px; 
    border-radius: 50%; 
    width: 72px; 
    background-color: blue; 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Safari */ 
    transform: rotate(45deg); 
    font-size: 45px; 

#pinNum 
    position: relative; 
    top: 12px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 22px; 

function countDown(num) { 
    var int = setInterval(function() { 
    document.getElementById("pinNum").innerHTML = num; 
    num-- || clearInterval(int); 
    }, 1000); 
} 
countDown(5);