javascript - 使用JavaScript向CSS映射图钉添加动态编号

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        4年前关闭。
                                                                                            
                
        
如何在此图钉的中心添加动态数字（例如倒数）？

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)

最佳答案

看看这是否适合您。

在您的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);