CN114611031A - 数字滚动显示方法、装置、设备及介质 - Google Patents

Abstract

本申请涉及计算机技术领域，本申请提供了一种数字滚动显示方法、装置、电子设备及计算机存储介质，所述方法包括获取待显示数字各个数位上的目标数字，确定各个所述目标数字在预设字符阵列中的当前位置，所述预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符以及用于显示所述目标数字的可视区域，根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域。本申请实施例实现按数位独立滚动显示数字。

Description

数字滚动显示方法、装置、设备及介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种数字滚动显示方法、装置、电子设备及计算机存储介质。

背景技术

目前，网页前端承担了越来越多的用户体验，是直面用户的第一者，一些前端的动画效果和交互能很好的提升用户体验，吸引用户，留住用户。同时，若一个页面打开或页面内容的动画加载过慢，用户也就失去了耐心。

相关技术中，有许多数字滚动显示方式，主要应用于显示天数或者金额。比如，各大公司给用户的电子年报，会告诉用户本年度存了xx钱，理财收益了xx钱，陪伴了xx天等等，这个时候就会选择数字滚动来吸引用户注意，例如显示用户存了10000万元，就会选择从1、2、3逐步滚动到10000。然而，在面对特别大的数字时，如果增加数字的滚动时长，将会导致动画效果过长，用户失去耐心；反之，如果在较短时间内滚动显示特别大的数字，将会导致数字滚动太快，用户眼花缭乱。

发明内容

本申请实施例的主要目的在于提出一种数字滚动显示方法、装置、电子设备及计算机存储介质，能够实现按数位的数字滚动显示。

为实现上述目的，本申请实施例的第一方面提出了一种数字滚动显示方法，所述方法包括：

获取待显示数字各个数位上的目标数字；

确定各个所述目标数字在预设字符阵列中的当前位置，所述预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符以及用于显示所述目标数字的可视区域；

根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域。

根据本发明一些实施例提供的数字滚动显示方法，所述方法还包括：

获取预设的各列所述待滚动字符的层叠样式表(Cascading Style Sheets，CSS)属性参数，所述CSS属性参数包括所述待滚动字符中的每个字符的CSS属性值；

针对每列所述待滚动字符，根据对应的所述CSS属性参数，对所述待滚动字符中的各个字符进行渲染处理，以使各个字符的显示样式与对应的所述CSS属性值相匹配。

根据本发明一些实施例提供的数字滚动显示方法，所述确定各个所述目标数字在预设字符阵列中的当前位置，包括：

确定各个所述目标数字在所述预设字符阵列中的当前列以及在对应的所述当前列中的行高度；

根据所述当前列和所述行高度，确定各个所述目标数字在所述预设字符阵列中的当前位置。

根据本发明一些实施例提供的数字滚动显示方法，所述确定各个所述目标数字在所述预设字符阵列中的当前列以及在对应的所述当前列中的行高度，包括：

根据各个所述目标数字所在的数位，确定各个所述目标数字在所述预设字符阵列中的当前列；

根据所述待滚动字符的背景高度，确定各个所述目标数字在对应的所述当前列中的行高度。

根据本发明一些实施例提供的数字滚动显示方法，所述根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域，包括：

根据各个所述目标数字的所述当前位置，确定各个所述目标数字在对应的所述当前列中的滚动距离；

同步将各列所述待滚动字符基于对应的所述滚动距离进行滚动，以使各个所述目标数字处于所述可视区域。

根据本发明一些实施例提供的数字滚动显示方法，所述同步将各列所述待滚动字符基于对应的所述滚动距离进行滚动，以使各个所述目标数字处于所述可视区域，包括：

获取预设的滚动时间；

根据所述滚动时间，确定各列所述待滚动字符基于对应的所述滚动距离的滚动速率；

同步将各列所述待滚动字符以对应的所述滚动速率进行滚动，以使各个所述目标数字在所述滚动时间内处于所述可视区域。

根据本发明一些实施例提供的数字滚动显示方法，所述同步将各列所述待滚动字符进行滚动，包括：

获取预设的触发时机信息；

在所述触发时机信息对应的条件达成的情况下，同步将各列所述待滚动字符进行滚动；

其中，所述触发时机信息包括如下之一：用户针对所述预设字符阵列的点击操作、用户将界面滑动至所述预设字符阵列的展示区域。

为实现上述目的，本申请实施例的第二方面提出了一种数字滚动显示装置，所述装置包括：

获取模块，用于获取待显示数字各个数位上的目标数字；

处理模块，用于确定各个所述目标数字在预设字符阵列中的当前位置，所述预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符以及用于显示所述目标数字的可视区域；

显示模块，用于根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域。

为实现上述目的，本申请实施例的第三方面提出了一种电子设备，所述电子设备包括存储器、处理器、存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现上述第一方面所述的方法。

为实现上述目的，本申请实施例的第四方面提出了一种存储介质，所述存储介质为计算机可读存储介质，用于计算机可读存储，所述存储介质存储有一个或者多个计算机程序，所述一个或者多个计算机程序可被一个或者多个处理器执行，以实现上述第一方面所述的方法。

本申请提出一种数字滚动显示方法、装置、设备及存储介质，本申请实施例通过获取待显示数字各个数位上的目标数字，确定各个目标数字在预设字符阵列中的当前位置，预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符，根据各个目标数字的当前位置，同步将各列待滚动字符进行滚动，以使各个目标数字处在用于显示目标数字的可视区域，实现了按数位独立滚动显示数字。

附图说明

图1是本申请实施例提供的一种数字滚动显示方法的流程示意图；

图2是本申请实施例提供的一种数字滚动显示方法的流程示意图；

图3是本申请实施例提供的一种数字滚动显示方法的流程示意图；

图4是本申请实施例提供的一种数字滚动显示方法的流程示意图；

图5是本申请实施例提供的预设字符阵列的示意图；

图6是本申请实施例提供的预设字符阵列的示意图；

图7是本申请实施例提供的预设字符阵列的示意图；

图8是本申请实施例提供的预设字符阵列的示意图；

图9是本申请实施例提供的预设字符阵列的示意图；

图10是本申请实施例提供的一种数字滚动显示装置的结构示意图；

图11是本申请实施例提供的电子设备的硬件结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

需要说明的是，除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

目前，网页前端承担了越来越多的用户体验，是直面用户的第一者，一些前端的动画效果和交互能很好的提升用户体验，吸引用户，留住用户。同时，若一个页面打开或页面内容的动画加载过慢，用户也就失去了耐心。

相关技术中，有许多数字滚动显示方式，主要应用于显示天数或者金额。比如，各大公司给用户的电子年报，会告诉用户本年度存了xx钱，理财收益了xx钱，陪伴了xx天等等，这个时候就会选择数字滚动来吸引用户注意，例如显示用户存了10000万元，就会选择从1、2、3逐步滚动到10000。然而，在面对特别大的数字时，如果增加数字的滚动时长，将会导致动画效果过长，用户失去耐心；反之，如果在较短时间内滚动显示特别大的数字，将会导致数字滚动太快，用户眼花缭乱。

基于此，本申请实施例提供了一种数字滚动显示方法、装置、电子设备及存储介质，旨在实现了数字按数位独立滚动显示。

本申请实施例提供的一种数字滚动显示方法、装置、电子设备及存储介质，具体通过如下实施例进行说明，首先描述本申请实施例中的数字滚动显示方法。

应理解，本申请实施例提供的数字滚动显示方法可以应用于包括显示屏的终端设备。终端设备具体可以为包括显示屏的便携式移动设备，例如但不限于移动或便携式计算设备(如智能手机)、个人计算机、服务器计算机、手持式设备(例如平板)或膝上型设备、多处理器***、游戏控制台或控制器、基于微处理器的***、机顶盒、可编程消费电子产品、移动电话、具有可穿戴或配件形状因子(例如，手表、眼镜、头戴式耳机或耳塞)的移动计算和/或通信设备、网络PC、小型计算机、大型计算机、包括上面的***或设备中的任何一种的分布式计算环境等等。

终端设备的显示屏用于显示图像，视频等。显示屏包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emitting diode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dotlight emitting diodes，QLED)等。

本申请实施例提供的数字滚动显示方法可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

请参见图1，图1示出了本申请实施例提供的一种数字滚动显示方法的流程示意图。如图1所示，该数字滚动显示方法包括但不限于以下步骤S110至S130。

步骤S110，获取待显示数字各个数位上的目标数字。

可以理解的是，在应用程序加载的时候访问***后台，获取待显示数字，将待显示数字按数位独立分开，得到待显示数字各个数位上的目标数字。

示例性的，待显示数字为“1998”，则待显示数字个位上的目标数字为“8”，十位上的目标数字为“9”，百位上的目标数字为“9”，千位上的目标数字为“1”。

示例性的，待显示数字为“1998.89”，则待显示数字个位上的目标数字为“8”，十位上的目标数字为“9”，百位上的目标数字为“9”，千位上的目标数字为“1”,十分位上的目标数字为“8”，百分位上的目标数字为“9”。

应了解，获取待显示数字各个数位上的目标数字，可通过数组或链表等数据结构存储，并回传到应用程序的前端页面。

步骤S120，确定各个所述目标数字在预设字符阵列中的当前位置，所述预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符以及用于显示所述目标数字的可视区域。

可以理解的是，通过移动预设字符阵列中各列待滚动字符，展示待显示数字各个数位上的目标数字，因此，各列待滚动字符应包括但不限于目标数字。同时，为了实现更好的用户体验，突出目标数字，预设字符阵列还具有用于显示目标数字的可视区域。

在一个具体实施例中，所述待滚动字符的列数对应所述待显示数字的位数，各列所述待滚动字符为按数值大小排列的数字0到9，所述可视区域对应于所述预设字符阵列的第一排。

可以理解的是，为了实现用户体检和节省显示空间，待滚动字符的列数对应待显示数字的位数。若待显示数字的位数为5，则待滚动字符的列数也为5，参照图5,图5示出了本申请实施例提供的一种预设字符阵列的示意图，如图5所示，待滚动字符的列数为5。同时，各列待滚动字符为按数值大小排列的数字0到9，可视区域V对应于预设字符阵列的第一排，也就是在预设字符阵列未开始滚动显示数字时，只有第一排的数字0可见，其他待滚动字符隐藏。如此设置，当待滚动字符开始滚动时，可以从数字0开始按数值顺序滚动显示，提高了用户体验。例如，当待显示数字个位上的目标数字为8时，预设字符阵列中的对应个位的数列，便从数字0、1、2、3……按数值顺序滚动到数字8。

在另一个具体实施例中，参照图8，图8示出了本申请实施例提供的一种预设字符阵列的示意图，如图8所示，各列待滚动字符则为数字{9、8、7、6、0、1、2、3、4、5}，可视区域V对应于预设字符阵列的第五排，也就是在预设字符阵列未开始滚动显示数字时，只有第一排的数字0可见，其他待滚动字符隐藏。如此设置，当目标数字为1至5时，待滚动数字可以从数字0开始按数值顺序滚动至5，当目标数字为6至9时，待滚动数字可以从数字0开始跳转至数字6，再从数字6开始按数值顺序滚动至9，进一步缩短了较长数字的滚动显示时间。提高用户体检。

在另一个具体实施例中，预设字符阵列中的各列待滚动字符包括按数值大小排列的数字0到9以及小数点。

可以理解的是，当待显示数字有小数部分时，各列待滚动字符除了包括按数值大小排列的数字0到9，还包括有小数点。

示例性的，参照图6,图6示出了本申请实施例提供的一种预设字符阵列的示意图，如图6所示，可视区域V对应于预设字符阵列的第一排，预设字符阵列中的待滚动字符一共有5列，左边为高数位，右边为低数位，通过在预设字符阵列的中间3列待滚动字符设置小数点，该预设字符阵列可以表示包括：

3位整数和1位小数的数字：{999.9-000.1}；

2位整数和2位小数的数字：{99.99-00.01}；

1位整数和3位小数的数字：{9.999-0.001}。

应了解，对于小数点，可以设置在预设字符阵列的每一列中，或者只设置在预设字符阵列的中间列，小数点在预设字符阵列中的列数及数量，决定该预设字符阵列能够显示的数字的小数长度，可以根据实际应用场景进行调整，在此不作限制。同时，在每列预设字符阵列中，数字0到9按数值大小排列，小数点可以设置在数字0前面，亦可以设置在数字9后面，在此亦不作具体限制。

在另一些实施例中，预设字符阵列中包括有多列按数值大小排列的数字0到9的待滚动字符，还包括有一列为小数点的待滚动字符。

可以理解的是，当待显示数字有小数部分时，各列待滚动字符除了包括按数值大小排列的数字0到9，还包括有小数点。

示例性的，参照图7，图7示出了本申请实施例提供的一种预设字符阵列的示意图，如图7所示，可视区域V对应于预设字符阵列的第一排，预设字符阵列中的待滚动字符一共有5列,其边为高数位，右边为低数位，其中，将预设字符阵列的左起第4列待滚动字符设置为小数点，该预设字符阵列可以表示：

3位整数和1位小数的数字：{999.9-000.1}；

应了解，可以将预设字符阵列中间任意一列待滚动字符设置为小数点，小数点设置在预设字符阵列的列数，决定该预设字符阵列能够显示的数字的小数长度，可以根据实际应用场景进行调整，在此不作限制。

在另一些实施例中，在预设字符阵列中加入千位分隔符等字符，从而实现以千位分割的形式滚动显示数字，具体步骤流程与上述实施例提供的方法相似，请参见上述实施例，在此不再赘述。

应了解，在上述实施例中，预设字符阵列可在执行本申请实施例提供的数字滚动显示方法之前，或者在获取待显示数字各个数位上的目标数字之后，通过JavaScript等脚本语言创建，在本申请实施例中不作此限。

需要说明的是，在预设字符阵列中各列待滚动字符为按数值大小排列的数字0到9的前提下，可视区域对应于预设字符阵列的第一排，是为了当待滚动字符开始滚动时，可以从数字0开始按数值大小滚动显示，提高了用户体验。也就是说，只要能显示并区分目标数字，实现待显示数字的滚动显示，可视区域的位置可以根据实际应用情况进行调整，本申请实施例对此不作具体限制。

在一些实施例中，本申请实施例提供的数字滚动显示方法还包括：

获取预设的各列所述待滚动字符的CSS属性参数，所述CSS属性参数包括所述待滚动字符中的每个字符的CSS属性值；

针对每列所述待滚动字符，根据对应的所述CSS属性参数，对所述待滚动字符中的各个字符进行渲染处理，以使各个字符的显示样式与对应的所述CSS属性值相匹配。

可以理解的是，所述CSS属性参数包括所述待滚动字符中的每个字符的CSS属性值，其中CSS属性值包括CSS属性及其对应的属性值。通过获取预设的CSS属性参数，对每列待滚动字符中的各个字符进行渲染处理，使得各个字符的显示样式与对应的CSS属性值相匹配。

示例性的，CSS属性值为{background-color：red}，其中“background-color”为CSS属性，用于设置背景颜色，“red”为对应的属性值，用于将背景颜色设置成红色。

需要说明的是，在上述实施例中，各个字符的显示样式包括字符的字体大小、字体颜色、背景图像或背景颜色等。

在实现数字按数位滚动显示的前提下，针对每列所述待滚动字符，通过CSS属性参数对待滚动字符中的各个字符进行渲染处理，增加按数位滚动显示数字时的显示效果，同时也加快加载速度，提高了用户体验。

在一些实施例中，参见图2，图2示出了本申请实施例提供的一种数字滚动显示方法的流程示意图，如图2所示，本申请实施例提供的数字滚动显示方法中步骤S120包括但不限于以下步骤S210和S220。

步骤S210，确定各个所述目标数字在所述预设字符阵列中的当前列以及在对应当前列中的行高度。

可以理解的是，确定各个所述目标数字在预设字符阵列中的当前位置，包括各个目标数字在预设字符阵列中的当前列以及在对应当前列中的行高度。

在一些实施例中，参见图3，图3示出了本申请实施例提供的一种数字滚动显示方法的流程示意图，如图3所示，本申请实施例提供的数字滚动显示方法中步骤S210包括但不限于步骤S310和S320。

步骤S310，根据各个所述目标数字所在的数位，确定各个所述目标数字在所述预设字符阵列中的当前列。

示例性的，若目标数字为{万位“1”，千位“1”，百位“9”，十位“9”，个位“8”}，如图5所示，预设字符阵列中的5列待滚动字符，从左到右分别对应数位中的万位、千位、百位、十位和个位，则可以确定万位上目标数字“1”在预设字符阵列中的左起第一列，千位上目标数字“1”在预设字符阵列中的左起第二列，百位上目标数字“9”在预设字符阵列中的左起第三列，十位上目标数字“9”在预设字符阵列中的左起第四列，个位上目标数字“8”在预设字符阵列中的左起第五列。

示例性的，若目标数字为{十位“9”，个位“8”，十分位“7，百分位“6”}，如图6所示，预设字符阵列中左边为高数位，右边为低数位，则可以确定十位上目标数字“9”在预设字符阵列中的左起第一列，个位上目标数字“8”在预设字符阵列中的左起第二列，十分位上目标数字“7”在预设字符阵列中的左起第四列，百分位上目标数字“6”在预设字符阵列中的左起第五列。

示例性的，若目标数字为{百位“9”，十位“9”，个位“8”，十分位“7”}，如图7所示，预设字符阵列中左边为高数位，右边为低数位，其中预设字符阵列中的左起第四列为小数点，则可以确定百位上目标数字“9”在预设字符阵列中的左起第一列，十位上目标数字“9”在预设字符阵列中的左起第二列，个位上目标数字“8”在预设字符阵列中的左起第三列，十分位上目标数字“7”在预设字符阵列中的左起第五列。

在一个具体实施例中，通过对预设字符阵列中的各列待滚动字符设置一个动态下标，利用动态下标确定目标数字与各列待滚动字符的对应关系。

示例性的，预设字符阵列中第一列待滚动字符的动态下标为{div-1}，则第n列待滚动字符的动态下标为{div-n}，其中n为整数，预设字符阵列左边为高数位，右边为低数位，则待显示数字最高位上的目标数字，也就是待显示数字上左起第一个数字，可以通过动态下标{div-1}找到预设字符阵列的第一列，以此类推。

当目标数字通过数组或链表等数据结构存储并回传到前端时，通过对预设字符阵列中的各列待滚动字符分别设置一个独立的动态下标，方便匹配数组或链表中存储的目标数字，从而确定各个目标数字在预设字符阵列中的当前列。

步骤S320，根据所述待滚动字符的背景高度，确定各个所述目标数字在对应的当前列中的行高度。

示例性的，如图5所示，预设字符阵列中待滚动字符的数字背景高度为30像素(pixel，px)，例如预设字符阵列中数字0和数字1之间的高度差为30px。预设字符阵列中的各列待滚动字符为按数值大小排列的数字0到9，可视区域V对应于预设字符阵列中的第一排，若目标数字为{万位“1”，千位“2”，百位“0”，十位“9”，个位“8”}，则可以确定万位上目标数字“1”在对应的当前列中的行高度为1*30px＝30px，千位上目标数字“2”在对应的当前列中的行高度为2*30px＝60px，百位上目标数字“0”在对应的当前列中的行高度为0*30px＝0px，十位上目标数字“9”在对应的当前列中的行高度为9*30px＝270px，个位上目标数字“8”在对应的当前列中的行高度为8*30px＝240px。

示例性的，如图7所示，预设字符阵列中待滚动字符的数字背景高度为50像素(pixel，px)，例如预设字符阵列中数字0和数字1之间的高度差为50px。预设字符阵列中的各列待滚动字符为按数值大小排列的数字0到9，其中，预设字符阵列中间三列为按数值大小排列的数字0到9以及小数点，可视区域V对应于预设字符阵列中的第一排，若目标数字为{百位“1”，十位“9”，个位“8”，十分位“7”}，则可以确定百位上目标数字“1”在对应的当前列中的行高度为1*50px＝50px，十位上目标数字“9”在对应的当前列中的行高度为9*50px＝450px，个位上目标数字“8”在对应的当前列中的行高度为8*50px＝400px，百分位上目标数字“7”在对应的当前列中的行高度为7*50px＝350px。

需要说明的是，在上述示例中，行高度是相对高度，具体地，可以是相对于预设字符阵列中位于可视区域的待滚动字符的高度。此外，可以通过行高度的正负定义方向。在上述实施例中，如图5至图7所示，可视区域V位于预设字符阵列的第一排，目标数字的行高度为50px，表示目标数字位于预设字符阵列的第一排下方50px处，目标数字的行高度为-50px，则表示目标数字位于预设字符阵列的第一排上方50px处；又或者，如图8所示，预设字符阵列的各列待滚动字符为数字{9、8、7、6、0、1、2、3、4、5}，可视区域V位于预设字符阵列的第五排，那么，目标数字的行高度为50px，表示目标数字位于预设字符阵列的第五排上方50px处，目标数字的行高度为-50px，则表示目标数字位于预设字符阵列的第五排下方50px处。

应了解，行高度的相对目标以及正负表示的方向，可以根据实际应用而定，在此不作限制。

步骤S220，根据所述当前列和所述行高度，确定各个所述目标数字在预设字符阵列中的当前位置。

可以理解的是，各个目标数字在预设字符阵列中的当前位置，包括当前列和行高度。

示例性的，若目标数字为{万位“1”，千位“2”，百位“0”，十位“9”，个位“8”}，目标数字对应的当前列为{万位“1”：左起第一列，千位“2”：左起第二列，百位“0”：左起第三列，十位“9”：左起第四列，个位“8”：左起第五列}，目标数字在对应的当前列中的行高度为{万位“1”：30px，千位“2”：60px，百位“0”：0px，十位“9”：270px，个位“8”：240px}，则可以确定各个所述目标数字在预设字符阵列中的当前位置：万位上目标数字“1”的当前位置为预设字符阵列中左起第一列且位于可视区域下方30px处、千位上目标数字“2”的当前位置为预设字符阵列中左起第二列且位于可视区域下方60px处，百位上目标数字“0”的当前位置为预设字符阵列中左起第三列且位于可视区域下方0px处，十位上目标数字“9”的当前位置为预设字符阵列中左起第四列且位于可视区域下方270px处、个位上目标数字“8”的当前位置为预设字符阵列中左起第五列且位于可视区域下方240px处。

步骤S130，根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域。

可以理解的是，各个目标数字在预设字符阵列中的当前位置，对应着与各个目标数字相同的待滚动字符，根据当前位置，将各列待滚动字符进行滚动，以使与各个目标数字相同的待滚动字符处于可视区域，也即是使得各个目标数字处于可视区域，实现按数位的数字滚动显示。

在一些实施例中，参见图4，图4示出了本申请实施例提供的一种数字滚动显示方法的流程示意图，如图4所示，本申请实施例提供的数字滚动显示方法中步骤S130包括但不限于步骤S410、S420。

步骤S410，根据各个所述目标数字的所述当前位置，确定各个所述目标数字在对应的当前列中的滚动距离；

可以理解的是，目标数字的当前位置包括了目标数字对应的当前列和在当前列中的行高度。

示例性的，如图5所示，待显示数字十位上目标数字“9”的当前位置为预设字符阵列中左起第四列且位于可视区域下方270px处，则可以确定目标数字“9”在预设字符阵列的左起第四列中的滚动距离为270px，表示向上滚动270px。

示例性的，如图8所示，待显示数字十位上目标数字“8”的当前位置为预设字符阵列中左起第四列且位于可视区域上方240px处，则可以确定目标数字“9”在预设字符阵列的左起第四列中的滚动距离为240px,表示向下滚动240px。待显示数字百位上目标数字“4”的当前位置为预设字符阵列中左起第三列且位于可视区域下方120px处，则可以确定目标数字“4”在预设字符阵列的左起第三列中的滚动距离为120px,表示向下滚动270px。

应了解，滚动距离的正负表示的滚动方向，可以根据实际应用进行调整，在此不作限定。

步骤S420，同步将各列所述待滚动字符基于对应的滚动距离进行滚动，以使各个所述目标数字处于所述可视区域。

根据滚动距离的绝对值以及数值正负，同步将各列待滚动字符进行滚动，以使各个目标数字处于可视区域。

示例性的，参照图9，图9示出了本申请实施例提供的一种预设字符阵列的示意图。目标数字为{万位“1”，千位“3”，百位“2”，十位“2”，个位“5”}，万位上目标数字“1”在预设字符阵列的左起第一列中的滚动距离为30px,表示向下滚动30px、千位上目标数字“3”在预设字符阵列的左起第二列中的滚动距离为90px,表示向下滚动90px、百位上目标数字“2”在预设字符阵列的左起第三列中的滚动距离为60px,表示向下滚动60px、十位上目标数字“2”在预设字符阵列的左起第四列中的滚动距离为60px,表示向下滚动60px、个位上目标数字“5”在预设字符阵列的左起第五列中的滚动距离为250px,表示向下滚动250px。如图9所示，同步将各列待滚动字符基于对应的滚动距离进行滚动，以使各个目标数字{1、3、2、2、5}处于可视区域V。

在一个具体实施例中，本申请实施例提供的数字滚动显示方法还包括，将预设字符阵列中包括有小数点的待滚动字符列进行滚动，以使小数点处于可视区域。

示例性的，若待显示数字为{98.76}，目标数字为{十位“9”，个位“8”，十分位“7，百分位“6”}，如图6所示，预设字符阵列中左边为高数位，右边为低数位，则可以确定十位上目标数字“9”在预设字符阵列中的左起第一列，个位上目标数字“8”在预设字符阵列中的左起第二列，十分位上目标数字“7”在预设字符阵列中的左起第四列，百分位上目标数字“6”在预设字符阵列中的左起第五列，则同步将预设字符阵列中的左起第三列待滚动字符进行滚动，以使小数点处于可视区域。

可以理解的是，同步指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系，在本申请实施例中，同步将各列待滚动字符进行滚动可以是：各列待滚动字符同时并以不同速率进行滚动、各列待滚动字符以相同速率进行滚动，各列所述待滚动字符同时并以相同速率进行滚动等。

在一些实施例中，本申请实施例提供的数字滚动显示方法中步骤S420还包括：

获取预设的滚动时间；

根据所述预设的滚动时间，确定所述各列所述待滚动字符基于对应的滚动距离的滚动速率；

同步将各列所述待滚动字符以对应的滚动速率进行滚动，以使各个所述目标数字在预设的滚动时间内处于所述可视区域。

可以理解的是，通过获取预设的滚动时间，根据预设的滚动时间和各列待滚动字符对应的滚动距离，确定各列待滚动字符的滚动速率，从而同步控制各列待滚动字符以对应的滚动速率进行滚动，在预设的滚动时间内，以使各个目标数字处于可视区域。也就是基于预设的滚动时间和对应的滚动距离，调整各列待滚动字符的滚动速率，若滚动距离越远，则该列待滚动字符的滚动速率越大，若滚动距离较近，则该列待滚动字符的滚动速率越小，从而使得每个目标数字都能在预设的滚动时间内处于可视区域。

需要说明的是，各个目标数字在预设的滚动时间内处于可视区域，包括：各个目标数字分别在预设的滚动时间内的多个时刻处于可视区域；或者，各个目标数字在预设的滚动时间内的同一个时刻处于可视区域。

在一些实施例中，本申请实施例提供的数字滚动显示方法中，同步将各列所述待滚动字符进行滚动，还包括：

获取预设的触发时机信息；

在所述触发时机信息对应的条件达成的情况下，同步将各列所述待滚动字符进行滚动；

其中，所述触发时机信息包括如下之一：用户针对所述预设字符阵列的点击操作、用户将界面滑动至所述预设字符阵列的展示区域。

可以理解的是，获取预设的触发时机信息，在触发时机信息对应的条件达成的情况下，也就是在用户点击预设字符阵列或用户滑动至预设字符阵列的展示区域的情况下，同步将各列待滚动字符进行滚动。如此，可以在用户点击预设字符阵列或界面滑动至预设字符阵列的展示区域时，才进行数字的滚动显示。

本申请提供的数字滚动显示方法，通过获取待显示数字各个数位上的目标数字，确定各个目标数字在预设字符阵列中的当前位置，预设字符阵列包括与待显示数字的数位对应的多列待滚动字符，根据各个目标数字的当前位置，同步将各列待滚动字符进行滚动，以使各个目标数字处在用于显示目标数字的可视区域，实现了按数位独立滚动显示数字。

进一步可以理解的是，本申请实施例中尽管在附图中以特定的顺序描述操作，但是不应将其理解为要求按照所示的特定顺序或是串行顺序来执行这些操作，或是要求执行全部所示的操作以得到期望的结果。在特定环境中，多任务和并行处理可能是有利的。

请参见图10，本申请实施例还提供了一种数字滚动显示装置100，包括：

获取模块110，用于获取待显示数字各个数位上的目标数字；

处理模块120，用于确定各个所述目标数字在预设字符阵列中的当前位置，所述预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符以及用于显示所述目标数字的可视区域；

显示模块130，用于根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域。

本申请提供的数字滚动显示方法，通过获取模块获取待显示数字各个数位上的目标数字，处理模块确定各个目标数字在预设字符阵列中的当前位置，预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符，显示模块根据各个目标数字的当前位置，同步将各列待滚动字符进行滚动，以使各个目标数字处在用于显示目标数字的可视区域，实现了按数位独立滚动显示数字。

需要说明的是，上述装置的模块之间的信息交互、执行过程等内容，由于与本申请方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

本申请实施例还提供了一种电子设备，电子设备包括：存储器、处理器、存储在存储器上并可在处理器上运行的程序以及用于实现处理器和存储器之间的连接通信的数据总线，程序被处理器执行时实现上述数字滚动显示方法。该电子设备可以为包括平板电脑、车载电脑等任意智能终端。

请参见图11，图11示意了另一实施例的电子设备的硬件结构，电子设备包括：

处理器210，可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集合成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集合成电路等方式实现，用于执行相关计算机程序，以实现本申请实施例所提供的技术方案；

存储器220，可以采用只读存储器(Read Only Memory，ROM)、静态存储设备、动态存储设备或者随机存取存储器(Random Access Memory，RAM)等形式实现。存储器220可以存储操作***和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器220中，并由处理器210来调用执行本申请实施例的数字滚动显示方法；

输入/输出接口230，用于实现信息输入及输出；

通信接口240，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信；和总线250，在设备的各个组件(例如处理器210、存储器220、输入/输出接口230和通信接口240)之间传输信息；

其中处理器210、存储器220、输入/输出接口230和通信接口240通过总线250实现彼此之间在设备内部的通信连接。

本申请实施例还提供了一种存储介质，存储介质为计算机可读存储介质，用于计算机可读存储，存储介质存储有一个或者多个计算机程序，一个或者多个计算机程序可被一个或者多个处理器执行，以实现上述数字滚动显示方法。

存储器作为一种计算机可读存储介质，可用于存储软件程序以及计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本申请实施例描述的实施例是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、***、设备中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本申请的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集合成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

上述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集合成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集合成在一个单元中。上述集合成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集合成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括多指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例的方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等各种可以存储程序的介质。

以上参照附图说明了本申请实施例的优选实施例，并非因此局限本申请实施例的权利范围。本领域技术人员不脱离本申请实施例的范围和实质内所作的任何修改、等同替换和改进，均应在本申请实施例的权利范围之内。

Claims (10)

1.一种数字滚动显示方法，其特征在于，所述方法包括：

获取待显示数字各个数位上的目标数字；

确定各个所述目标数字在预设字符阵列中的当前位置，所述预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符以及用于显示所述目标数字的可视区域；

根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域。

2.根据权利要求1所述的数字滚动显示方法，其特征在于，所述方法还包括：

获取预设的各列所述待滚动字符的CSS属性参数，所述CSS属性参数包括所述待滚动字符中的每个字符的CSS属性值；

针对每列所述待滚动字符，根据对应的所述CSS属性参数，对所述待滚动字符中的各个字符进行渲染处理，以使各个字符的显示样式与对应的所述CSS属性值相匹配。

3.根据权利要求1所述的数字滚动显示方法，其特征在于，所述确定各个所述目标数字在预设字符阵列中的当前位置，包括：

确定各个所述目标数字在所述预设字符阵列中的当前列以及在对应的所述当前列中的行高度；

根据所述当前列和所述行高度，确定各个所述目标数字在所述预设字符阵列中的当前位置。

4.根据权利要求3所述的数字滚动显示方法，其特征在于，所述确定各个所述目标数字在所述预设字符阵列中的当前列以及在对应的所述当前列中的行高度，包括：

根据各个所述目标数字所在的数位，确定各个所述目标数字在所述预设字符阵列中的当前列；

根据所述待滚动字符的背景高度，确定各个所述目标数字在对应的所述当前列中的行高度。

5.根据权利要求3所述的数字滚动显示方法，其特征在于，所述根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域，包括：

根据各个所述目标数字的所述当前位置，确定各个所述目标数字在对应的所述当前列中的滚动距离；

同步将各列所述待滚动字符基于对应的所述滚动距离进行滚动，以使各个所述目标数字处于所述可视区域。

6.根据权利要求5所述的数字滚动显示方法，其特征在于，所述同步将各列所述待滚动字符基于对应的所述滚动距离进行滚动，以使各个所述目标数字处于所述可视区域，包括：

获取预设的滚动时间；

根据所述滚动时间，确定各列所述待滚动字符基于对应的所述滚动距离的滚动速率；

同步将各列所述待滚动字符以对应的所述滚动速率进行滚动，以使各个所述目标数字在所述滚动时间内处于所述可视区域。

7.根据权利要求1所述的数字滚动显示方法，其特征在于，所述同步将各列所述待滚动字符进行滚动，包括：

获取预设的触发时机信息；

在所述触发时机信息对应的条件达成的情况下，同步将各列所述待滚动字符进行滚动；

其中，所述触发时机信息包括如下之一：用户针对所述预设字符阵列的点击操作、用户将界面滑动至所述预设字符阵列的展示区域。

8.一种数字滚动显示装置，其特征在于，所述装置包括：

获取模块，用于获取待显示数字各个数位上的目标数字；

处理模块，用于确定各个所述目标数字在预设字符阵列中的当前位置，所述预设字符阵列包括与所述待显示数字的数位对应的多列待滚动字符以及用于显示所述目标数字的可视区域；

显示模块，用于根据各个所述目标数字的所述当前位置，同步将各列所述待滚动字符进行滚动，以使各个所述目标数字处于所述可视区域。

9.一种电子设备，其特征在于，包括：

存储器，用于存储程序；

处理器，用于执行所述存储器存储的程序，当所述处理器执行所述存储器存储的程序时，所述处理器用于执行：如权利要求1至7中任一项所述的数字滚动显示方法。

10.一种计算机可读存储介质，其特征在于，存储有计算机可执行指令，所述计算机可执行指令用于执行：如权利要求1至7中任一项所述的数字滚动显示方法。

Images