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

【问题标题】：How to change font color on text flipclock.js如何更改文本flipclock.js上的字体颜色
【发布时间】：2015-06-11 07:53:26
【问题描述】：

我在尝试将文本、小时、天、月、年更改为绿色时遇到了一些问题，我正在使用 Flipclock.js，有谁知道如何更改它，如果可以，请指导我方向正确。

【问题讨论】：

标签： flipclock

【解决方案1】：

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

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

.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;
        }

【讨论】：

【解决方案2】：

如果您使用的是新版本，它在 225 左右（css 文件）上线

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

颜色：绿色； }

【讨论】：

【解决方案3】：

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

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

这并不完美，因为在设置$clock-flip-font-size: 120px 时存在一些问题。此外，当分钟显示为 3 位数时，“分钟”文本不是 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
//

【讨论】：