使用 JavaScript 将动态数字添加到 CSS Map Pin [关闭]答案

【问题标题】：Add Dynamic Number Using JavaScript to CSS Map Pin [closed]使用 JavaScript 将动态数字添加到 CSS Map Pin [关闭]
【发布时间】：2015-07-21 20:05:14
【问题描述】：

如何在此图钉的中心添加动态数字，例如倒计时？

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 jquery html css dictionary

【解决方案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);

【讨论】：