计数器

下面是一个快速的演示计数器元素。

它使您能够非常容易地在您的网站上的任何页面上添加计数器。

要添加这个，只需搜索“counter”并将“counter”元素拖到画布上。

计数器设置

点击计数器选项卡。

然后你会看到以下选项:

这些是下面的选项设置：

• 基本字体大小-设置用于Counter元素的基本字体大小。
• 宽度&最大宽度-设置计数器元素的宽度和最大宽度。
• 号开始&结束-您可以设置计数器的开始和结束数字。默认情况下，开始小于结束但你可以让开始比结束更大，以达到倒计时的效果。
• 前缀&后缀在本文开头的动画示例中，“客户服务”为后缀值。实际上，你会使用其中一种。但是，在需要时也可以同时使用这两种方法。
• 效果持续时间-设置计数器运行的长度。你可以使用这两个单位中的任何一个:年代(秒)；女士(毫秒)。

上面的文字&下面的设置有这个选项:

• 以上&下面的文本-你可以转动这个在或从．当转在，新增两个字段:以上文本而且下面文本．两者都是可选的。

如果以上&下面是文本在时，会出现三个额外选项:

这些选项允许您设置上方和下方文本的外观。

柜台设计设置

让我们来看看计数器的设计设置。

柜台边

Counter Margin布局控件包括:

• 联系方-链接边允许你在边距控制内链接每个选项，这样当你改变一个值时，所有值都会改变。或者，您可以解除边的链接，并分别设置每个边距选项。
• 前—设置顶部边距。
• 正确的-设置右边边距。
• Bttm—设置底部边距
• 左—设置左侧空白。

柜台号码设置

您可以配置数量伴随着它前缀而且后缀看起来就像。以下是可以帮助实现这一目标的设置:

保证金数量

使用此选项可设置计数器号的边距。您可以更改计数器数的所有边的设置或单独修改它们。

数字文本格式

您可以使用此控制组来设置计数器编号文本的格式。

• 字体—设置计数器号文本的字体。
• 字体粗细-使用此选项设置字体的粗细。这些值可能会根据所选字体以及所选字体是否支持权重而有所不同。
• 字体大小—设置字体大小。
• 字符间距—设置字母间距。
• 行高-使用此选项设置每行之间的间距。

数字文本样式

可以使用此控制组设置计数器编号文本中主要文本的样式。

• 字体样式-使用此选项决定是否要有一个正常的或斜体风格。
• 文本对齐-使用此选项设置文本的对齐方式。可能的值是左，中心，正确的,证明．
• 文本装饰—强制下划线或linethrough风格。
• 文本转换—使用该选项设置文本的大小写。可用的选项有大写字母，驼峰式大小写,小写字母．
• 文本颜色-使用此选项设置文本的颜色。

数字文本阴影

数字文本阴影控制组包含为计数器数字文本设置文本阴影的设置。

• x-使用此选项设置文本阴影的X偏移量。
• y-使用此选项设置文本阴影的Y偏移量。
• 模糊-使用此选项设置文本阴影中模糊效果的强度。
• 颜色-使用此选项设置文本阴影的颜色。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看计数器元素的现场演示，请单击在这里．

总结

这样你就有了一个简单的方法来为你的网站添加“计数器”功能!