如何更改文本的字体颜色 flipclock.js

Question

我在尝试将文本、小时、天、月、年更改为绿色时遇到一些问题，我正在使用 flipclock.js，有谁知道如何更改它，如果是的话你能指引我正确的方向吗？

Answer 1

如果您使用的是新版本，它的上线时间约为 225（css 文件）

.flip-clock-divider .flip-clock-label {

color: green; }

Answer 2

问题已经回答，但我认为这对其他人有用：

简单 CSS 将 FlipClock.js 默认颜色反转为白色背景和黑色文本：

.flip-clock-wrapper ul {
        background: #fff;
    }

        .flip-clock-wrapper ul li a div.up:after {
            background-color: #fff;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .flip-clock-wrapper ul li a div div.inn {
            color: #111;
            text-shadow: 0 1px 1px #555;
            background-color: #ddd;
        }

Answer 3

如果您正在寻找更改其他颜色的高级解决方案，这里有一个已经发布的解决方案 here。

这是一个改编自 repo closed issue（未解决）之一的解决方案。开发者似乎承诺了一个新的 API 但那是 1 年多以前的事了。

它并不完美，因为在设置 $clock-flip-font-size: 120px 时存在一些问题。此外，当分钟显示为 3 位数字时，"Minutes" 文本不是 centered。

这是代码笔：https://codepen.io/jimasun/pen/PzAqVw/

// 
// ------------------------- FlipClock
// 
$clock-flip-font-size: 120px
$clock-flip-border-radius: 8px
$clock-digit-gap: 20px
$clock-dot-size: 20px

$clock-height: ($clock-flip-font-size * 1.2)
$clock-flip-width: ($clock-flip-font-size * 0.8)
$clock-flip-margin: ($clock-digit-gap / 2)
$clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin))

$clock-flip-bg: #607D8B
$clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7)
$clock-flip-font-color: #F44336
$clock-flip-font-shadow: 0 1px 2px #000

.countdown-wrapper
  left: 50%
  position: absolute
  top: 50%
  transform: translate(-50%, -50%)

.countdown.flip-clock-wrapper ul
  height: $clock-height
  margin: 0 $clock-flip-margin
  width: $clock-flip-width
  box-shadow: $clock-flip-shadow

.countdown.flip-clock-wrapper ul li
  line-height: $clock-height

.countdown.flip-clock-wrapper ul li a div div.inn
  background-color: $clock-flip-bg
  color: $clock-flip-font-color
  font-size: $clock-flip-font-size
  text-shadow: $clock-flip-font-shadow

.countdown.flip-clock-wrapper ul,
.countdown.flip-clock-wrapper ul li a div div.inn
  border-radius: $clock-flip-border-radius

.countdown.flip-clock-wrapper ul li a div.down
  border-bottom-left-radius: $clock-flip-border-radius
  border-bottom-right-radius: $clock-flip-border-radius

.countdown.flip-clock-wrapper ul li a div.up:after
  top: (($clock-height / 2) - 1px)

.countdown .flip-clock-dot.top
  top: ($clock-height / 2 - $clock-flip-font-size * 0.2 - $clock-dot-size / 2)

.countdown .flip-clock-dot.bottom
  top: ($clock-height / 2 + $clock-flip-font-size * 0.2 - $clock-dot-size / 2)

.countdown .flip-clock-dot
  height: $clock-dot-size
  left: $clock-dot-size
  width: $clock-dot-size
  background: $clock-flip-bg

.countdown .flip-clock-divider
  height: $clock-height
  width: ($clock-dot-size * 3)
  &:first-child
    width: 0

.countdown .flip-clock-divider.seconds .flip-clock-label,
.countdown .flip-clock-divider.minutes .flip-clock-label
  right: -1 * $clock-flip-section-width

.countdown .flip-clock-divider .flip-clock-label
  color: $clock-flip-font-color
  font-size: $clock-flip-font-size / 4
  width: 2 * $clock-flip-width + 4 * $clock-flip-margin
// 
// ------------------------- FlipClock
//

如何更改文本的字体颜色 flipclock.js

How to change font color on text flipclock.js

flipclock