CN112965779A

CN112965779A - 页面模式切换方法、装置和设备

Info

Publication number: CN112965779A
Application number: CN202110328029.2A
Authority: CN
Inventors: 杨泽伟
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2021-03-26
Filing date: 2021-03-26
Publication date: 2021-06-15

Abstract

本申请实施例提供一种页面模式切换方法、装置和设备，响应于模式切换指令，确定当前页面中的待处理页面元素，模式切换指令中携带目标页面模式的标识信息；根据标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数；根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。由于通过滤镜对页面中的页面元素进行处理，使得当前页面的模式切换为目标页面，每次模式切换过程中，不需要操作HTML的DOM，不会增加页面的回流重绘频率，渲染性能更好，最终提升页面模式的切换效果。

Description

页面模式切换方法、装置和设备

技术领域

本申请实施例涉及互联网技术领域，尤其涉及一种页面模式切换方法、装置和设备。

背景技术

随着互联网技术的发展，越来越多的网站或者应用程序的界面中，都会提供多种主题模式供用户选择切换，例如明亮模式、夜间模式、护眼模式、悼念模式、复古模式、暗黑模式等，可以满足用户的个性化需求，提升用户体验。

现有技术中，网站或者应用程序的界面中的每个组件都有不同模式的界面(UserInterface，UI)设计图，每个UI设计图都设计有相应的层叠样式表(Cascading StyleSheets，CSS)，而CSS样式通过超文本标记语言结构(Hypertext Markup Language，HTML)与模式换肤按钮实现绑定，当用户点击模式换肤按钮时，会带动HTML的文档对象模型(Document Object Model，DOM)来运行CSS样式对应的脚本语言，从而在当前页面添加或者删除相应的CSS样式以实现界面中每个组件的样式切换，最终实现界面的模式切换。

然而，在上述的模式切换过程中，由于每次模式切换都需要操作HTML的DOM，此过程会增加页面回流重绘的频率，最终降低模式切换过程的渲染性能，使得页面模式切换的效果差。

发明内容

本申请实施例提供一种页面模式切换方法、装置和设备，用于解决现有技术中页面模式切换的效果差的技术问题。

第一方面，本申请实施例提供一种页面模式切换方法，包括：

响应于模式切换指令，确定将所述当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数；

根据标识信息，确定到达目标页面模式的显示效果的滤镜函数；

根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。

可选的，确定当前页面中的待处理页面元素，包括：

根据目标页面模式的标识信息，确定目标页面模式对应的选择器选中的表单元素为当前页面中的待处理页面元素。

可选的，根据滤镜函数对待处理页面元素进行处理，获得页面模式切换后的目标页面之后，还包括：

确定当前页面中不需要进行模式切换的目标页面元素；

根据滤镜参数的反向参数对目标页面元素进行处理，获得处理后的目标页面。

可选的，确定当前页面中的待处理页面元素之前，还包括：

获取目标页面模式对应的入口文件和样式文件，入口文件用于在当前页面中设置目标页面模式对应的换肤按钮，换肤按钮用于触发模式切换指令，样式文件用于设置目标页面模式对应的模式；

根据入口文件和样式文件为当前页面设置页面模式切换功能。

可选的，获取目标页面模式对应的入口文件，包括：

从第一页面中，获取所述第一页面的入口文件，所述第一页面为具备目标页面模式切换功能的页面；

获取所述第一页面的入口文件中的直属标签，所述直属标签包括script标签和非script标签；

建立外层标签；

将所述直属标签中的非script标签的结构插入到所述外层标签中，获得目标标签；

在所述目标标签前插入所述换肤按钮对应的结构，获得所述目标页面模式对应的入口文件。

可选的，获取目标页面模式对应的样式文件，包括：

从第二页面中，获取第二页面的样式文件，所述第二页面为具备目标页面模式切换功能的页面；

在所述第二页面的样式文件的末尾插入所述换肤按钮对应的样式文件和所述目标页面模式对应的样式文件，获得所述目标页面模式对应的样式文件。

第二方面，本申请实施例提供一种页面模式切换装置，包括：

确定模块，响应于模式切换指令，确定当前页面中的待处理页面元素，模式切换指令中携带目标页面模式的标识信息，根据标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数；

处理模块，用于根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。

可选的，确定模块具体用于：根据目标页面模式的标识信息，确定目标页面模式对应的选择器选中的表单元素为当前页面中的待处理页面元素。

可选的，确定模块还用于：确定当前页面中不需要进行模式切换的目标页面元素；

处理模块还用于：根据滤镜参数的反向参数对目标页面元素进行处理，获得处理后的目标页面。

可选的，页面模式切换装置还包括：

获取模块，用于获取目标页面模式对应的入口文件和样式文件，入口文件用于在当前页面中设置目标页面模式对应的换肤按钮，换肤按钮用于触发模式切换指令，样式文件用于设置目标页面模式对应的模式；

处理模块还用于：根据入口文件和样式文件为当前页面设置页面模式切换功能。

可选的，获取模块具体用于：从第一页面中，获取所述第一页面的入口文件，所述第一页面为具备目标页面模式切换功能的页面；

建立外层标签；

可选的，获取模块具体用于：从第二页面中，获取第二页面的样式文件，所述第二页面为具备目标页面模式切换功能的页面；

第三方面，本申请实施例提供一种电子设备，包括：

存储器，用于存储程序指令；

处理器，用于调用并执行存储器中的程序指令，执行如第一方面中任一项所述的页面模式切换方法。

第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，包括：该程序被处理器执行时实现第一方面中任一项所述的页面模式切换方法。

第五方面，本申请实施例提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现第一方面所述的页面模式切换方法。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图做一简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1为本申请一实施例提供的页面模式切换的场景示例图；

图2为本申请一实施例提供的页面模式切换方法的流程图；

图3为本申请一实施例提供的终端设备上的页面示意图；

图4为本申请另一实施例提供的页面模式切换方法的流程图；

图5为本申请又一实施例提供的页面模式切换方法的流程图；

图6为本申请又一实施例提供的页面模式切换方法的流程图；

图7为本申请实施例提供的设置页面模式切换功能的流程示意图；

图8为本申请一实施例提供的页面模式切换装置的结构示意图；

图9为本申请另一实施例提供的页面模式切换装置的结构示意图；

图10为本申请一实施例提供的电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

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

本申请下述实施例所涉及的方法流程图仅是示例性说明，不是必须包括所有的内容和步骤，也不是必须按照所描述的顺序执行。例如，有些步骤还可以分解，而有些步骤可以合并或部分合并，因此，实际执行的顺序可根据实际情况改变。

本申请下述实施例所涉及的方框图中的功能模块仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或者不同网络和/或处理器和/或微控制器中实现这些功能实体。

随着互联网技术的发展，越来越多的网站或者应用程序的界面中，都会提供多种页面模式(又称为“主题模式”或“主题皮肤”)供用户选择切换，例如夜间模式、护眼模式和暗黑模式等，可以满足用户的个性化需求，提升用户体验。

这些页面模式通常都会出现在一些用户较多体检较好，且设计风格较前沿的互联网产品的页面中，其设计元素都是相对成熟和人性化，所以其必须依赖多种页面模式去扩充整体页面的影响力。

这些页面模式不同于其他自定义页面模式，自定义页面模式可通过多种颜色自由搭配，任何细节都能详细定制，开发一套自定义页面模式的工作量非常巨大。而特定页面模式是以一种主色调为基准，将该色调保持基本色系并以滤镜浸透的方式扩散到网站任意一处。例如明亮模式以浅色为主色调，夜间模式以深色为主色调，护眼模式以绿色为主色调、悼念模式以灰色为主色调，复古模式以棕色为主色调。后续叙述的本申请所提供的技术方案是主要针对特定页面模式进行。

以下重点介绍三种最常见的特定页面模式：夜间模式、护眼模式、悼念模式。

夜间模式是最常见的特定页面模式之一，提供浅色主题和深色主题两种页面模式供用户选择，深色页面模式就是我们常说的夜间模式。为了眼睛健康，有些用户在手机、平板和电脑上都选择了夜间模式。随着夜间模式的应用范围越来越广，所以在前端领域里有很多开发者都会将夜间模式的页面模式添加到网站中，供用户在强光、夜间、疲劳等情况下使用。

护眼模式在近两年时间非常流行，由于终端设备的普及化，很多人都慢慢变成低头族，走到哪都低头盯着手机，渐渐变得视力模糊。护眼模式可在此时派上用场，启用后将网页整体设计风格呈现偏绿的状态，有效较少蓝光的散发，从而保护眼睛。

悼念模式是为了在特定纪念价值的日子里悼念某一场灾难或事故或人物而设计出来的主题风格，整体主题呈现灰度为100％的效果。

特定页面模式的常规开发方案都是为网站重新设计一份对应的样式文件(前端开发者通过设计师提供的UI设计图转换成CSS样式文件)，该文件可合并到原来样式文件上，或独立成一份新的样式文件，每个组件都会针对性地设计成切换到特定页面模式后的样式，在用户需要切换到特定页面模式时，点击换肤按钮，通过JavaScript操作HTML DOM对象动态添加或删除特定模式对应的样式。

特定页面模式转换方案主要的实现步骤如下：

(1)设计师为网站每个页面组件设计特定页面模式的模样，将其组装成UI设计图；

(2)前端开发者根据UI设计图提取组件的特定模式UI数据，将其编写成CSS样式，该样式可合并到原来样式文件上，或独立成一份新的样式文件；

(3)在网站指定的位置插入特定页面模式的换肤按钮的HTML结构和CSS样式；

(4)通过JavaScript绑定该换肤按钮，在用户点击该按钮时，操作HTML DOM对象动态添加或删除特定模式对应的样式。

上述过程需UI、CSS、HTML和JavaScript四者互相配合才能完成这种常规的特定页面模式的转换，在时间、人力和物力的成本上还是非常重的，具体地，在前期设计UI和编写CSS样式过程中会消耗大量的人力；而且在换肤过程中还需反复操作HTML DOM，大大增加了页面回流重绘的频率，降低模式切换过程的渲染性能，使得模式切换的效果差。

且，若项目需求一直在迭代，还需对每个需求新增或修改的组件多做一份特定模式的样式，以致后面需要维护的样式越来越多，一个小小的修改都可能涉及到两套样式。换句话说就是一直维护着多套不同的样式。若页面需做局部特定页面模式，还需编写更多的JavaScript去控制换肤逻辑。

基于上述问题，本申请实施例提供一种页面模式切换方法、装置和设备，将以往结合UI、HTML、CSS和JavaScript四者互相配合的常规换肤方案替换为使用纯HTML与CSS结合的新方案，是一种使用更简单、维护成本更低的技术方案。具体地，通过滤镜对页面中的页面元素进行处理，使得当前页面的模式切换为目标页面，由于每次模式切换过程中，不需要操作HTML的DOM，不会增加页面的回流重绘频率，渲染性能更好，最终提升页面模式的切换效果。

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，并不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

图1为本申请一实施例提供的页面模式切换的场景示例图。如图1所示，本场景包括：终端设备101和服务器102。

在本申请的实施例中，终端设备101可以为任意终端，比如，可以是机器类通信的用户设备。终端设备101也可称之为用户设备(user equipment，UE)、移动台(mobilestation，MS)、移动终端(mobile terminal)、终端(terminal)等，例如，终端例可以为台式电脑、笔记本、个人数字助理(Personal Digital Assistant，简称：PDA)、智能手机、平板电脑、汽车产品、可穿戴设备等设备，本场景以台式电脑为例进行示出。

服务器102可以包括提供处理、数据库、通讯设施的业务点。服务器102可以是整体式服务器或是跨多计算机或计算机数据中心的分散式服务器或服务器集群。服务器102可以是各种类型的，例如但不限于，网络服务器，消息服务器，应用服务器，交互服务器，数据库服务器，或代理服务器等。

其中，终端设备101可以通过无线或有线网络与服务器102通信，用于发送指令给服务器101。其中，无线网络可以是2G或者3G或者4G或者5G等通信网络，也可以是无线局域网，在此不做限定。

在实际应用中，终端设备101的显示界面中显示有页面，其中，页面可以为：网页页面、应用程序页面，终端设备101的UI界面等。每个页面有多种模式，用户可以通过触发终端上的页面模式切换功能，实现不同页面模式的切换。

具体的，当用户在终端设备101上触发对页面的页面模式切换功能时，发送模式切换指令至服务器102，其中，模式切换指令中包含目标页面模式的标识信息。

相应的，服务器102接收到模式切换指令后，根据标识信息将终端设备101中的页面模式切换为目标页面。

需要说明的是，图1仅是本申请实施例提供的一种应用场景的示意图，本申请实施例不对图1中包括的设备进行限定，也不对图1中设备之间的位置关系进行限定。例如，在图1所示的应用场景中，还可以包括数据存储设备，该数据存储设备相对终端设备101或者服务器102可以是外部存储器，也可以是集成在终端设备101或者服务器102中的内部存储器。

下面结合具体实施例对本申请提供的方案进行详细说明：

图2为本申请一实施例提供的页面模式切换方法的流程图。本申请实施例中的执行主体可以为如图1所示的服务器。如图2所示，本申请实施例提供的页面模式切换方法可以包括如下步骤：

S201、响应于模式切换指令，确定当前页面中的待处理页面元素。

其中，模式切换指令中携带目标页面模式的标识信息。

需要说明的是，本申请实施例对于模式切换指令不做具体限定，示例性的，每个页面中有模式换肤按钮，每个模式换肤按钮对应于不同的目标页面模式，当用户触发页面中的页面模式换肤按钮时，终端设备发送模式切换指令至服务器，用于指示服务器将页面模式切换为模式换肤按钮对应的目标页面模式。

相应的，服务器接收并响应模式切换指令，根据模式切换指令确定当前页面中的待处理页面元素。

在一种实施方式中，可以根据目标页面模式与当前页面中待处理页面元素的对应关系确定待处理页面元素。

具体的，不同的目标页面模式对应于不同的待处理页面元素，先根据模式切换指令中携带的标识信息确定目标页面模式，再根据目标页面模式与待处理页面元素之间的对应关系确定待处理页面元素。

示例性的，目标页面模式可以包括：明亮模式、夜间模式、护眼模式、悼念模式、复古模式、暗黑模式等。以夜间模式和护眼模式为例，由于夜间模式中，通常需要降低页面背景、文字以及图片等页面元素的亮度，则夜间模式对应的待处理页面元素可以包括：背景元素、文字元素以及图片元素；在护眼模式中，通常需要修改背景等元素的颜色和亮度，则护眼模式对应的待处理页面元素可以包括：背景元素。

需要说明的是，上述仅为示例性说明，其他模式中待处理页面元素的确定方法和上述类似，例如，还可以确定当前页面中所有的页面元素为待处理页面元素，此处不再赘述。

S202、根据标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数。

在一些实施方式中，可以根据目标页面模式与滤镜函数的对应关系，确定滤镜函数，也就是说，页面模式与滤镜函数的预先绑定的。可选的，该对应关系中，通过页面模式的标识信息区分不同的页面模式。对于同一页面模式，对应关系中的标识信息与模式切换指令中包含的标识信息可以是相同的，也可以是不同的。若对应关系中的标识信息与模式切换指令中包含的标识信息可以是相同的，则根据模式切换指令中携带的标识信息以及目标页面模式与滤镜函数之间的对应关系即可确定滤镜函数；对应关系中的标识信息与模式切换指令中包含的标识信息可以是不同的，则需要根据模式切换指令中携带的标识信息确定目标页面模式，再根据目标页面模式以及目标页面模式与滤镜函数之间的对应关系确定滤镜函数。

示例性的，仍以夜间模式为例，由于夜间模式中，通常需要将浅色的页面元素切换为深色，将深色的页面元素切换为浅色，例如，切换为夜间模式时，需要将浅色(例如，白色)的背景元素切换为深色(例如，黑色)，将深色(例如，黑色)的文字元素切换为浅色(例如，白色)，因此，夜间模式对应的滤镜函数可以包括：invert()以及hue-rotate()函数。

其中，invert()函数为反相函数，用于反相输出图像着色，通过设置滤镜参数来反向输出图像着色。hue-rotate()函数为色相旋转函数，用于减弱图像着色，处理非黑白的颜色，通过设置滤镜参数来反向输出图像着色。

在其他示例中，对于悼念模式，通常需要调整页面中所有元素的灰度，呈现出黑白效果，因此，悼念模式对应的滤镜函数可以包括：grayscale()函数，其中，grayscale()函数为灰阶函数，用于使页面元素呈现黑白效果。

需要说明的是，本申请实施例对于上述滤镜函数中的滤镜参数均不做具体限定，示例性的，hue-rotate()函数的色相旋转值可以为270deg。

S203、根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。

本步骤中，首先确定再该目标页面模式下，滤镜函数以及目标页面模式对应的滤镜参数，其中，对于每个滤镜函数以及目标页面模式对应的滤镜参数，可以根据实际需求进行设定，本申请实施例不做具体限定，仍以上述为例，invert()函数以及目标页面模式对应的滤镜参数可以为：反相度，其中，滤镜参数值为0％则无变化，滤镜参数值为0～100％则是线性乘子效果，滤镜参数值为100％则完全反转。

对于hue-rotate()函数，其滤镜参数可以为：色相旋转值。示例性的，色相旋转值为0deg则无变化，色相旋转值为0～360deg则逐渐减弱，色相旋转值超过360deg则相当绕N圈再计算剩余的值。

进一步的，采用上述滤镜参数对该目标页面模式中对应的待处理页面元素进行处理，获得处理后的页面元素，再根据处理后的页面元素获得页面模式切换后的目标页面。

本方案中，通过在色彩模式原理上，对页面实行特定模式的滤镜效果，可以为页面提供更好的模式过渡效果，提升用户体验，另外，通过本方案也无需人工逐个组件进行单独样式设计，可以提升页面模式切换功能的部署效率。

图3为本申请一实施例提供的终端设备上的页面示意图。如图3所示，页面1中设置有换肤按钮，当用户触发该换肤按钮，使得换肤按钮处于选中状态，此时，终端设备发送模式切换指令至服务器。

需要说明的是，图3中所示的页面仅为示例性的，本申请对于每个页面中的按钮的形状、数量、尺寸以及颜色等均不作具体限定。

例如，每个页面中可以设置多个换肤按钮，每个换肤按钮对应于不同的目标页面模式。当用户触发某一个换肤按钮，即发送该换肤按钮对应的模式切换指令给服务器，其中，该模式切换指令中携带该换肤按钮对应的目标页面模式的标识信息。

相应的，服务器接收并响应模式切换指令，根据模式切换指令中的标识信息确定当前页面中的待处理页面元素以及目标页面模式对应的滤镜函数，采用滤镜函数对待处理页面元素进行处理，以获得切换后的目标页面。

在实际应用中，页面模式切换时，切换速度会影响用户的视觉体验，例如，若切换速度太快，短时间内用户难以适应两个模式之间的切换，使得眼睛不舒服，影响观看体验；若切换速度太慢，则用户需要长时间等待页面模式切换页面模式过渡的不够自然。

因此，作为一种可选方案，可以设置过渡函数(例如，transition()函数)来调整页面模式切换过程中的切换速度，使得页面实现自然的过渡，提升用户体验。

可以理解的是，对于过渡函数中使用的参数，本申请实施例不做具体限定，示例性的，可以声明transition：all 300ms，即在300ms内实现当前页面的页面模式切换，使得页面切换过程有过渡效果，在切换到目标页面模式的过程中自然过渡色彩，提升用户体验。

需要说明的是，上述采用过渡函数实现模式切换的方案可以采用现有技术中的方案，此处不再赘述。

本申请实施例提供一种页面模式切换方法，响应于模式切换指令，确定当前页面中的待处理页面元素，模式切换指令中携带目标页面模式的标识信息；根据标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数；根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。由于通过滤镜对页面中的页面元素进行处理，使得当前页面的模式切换为目标页面，每次模式切换过程中，不需要操作HTML的DOM，不会增加页面的回流重绘频率，渲染性能更好，最终提升页面模式的切换效果。

另外，本申请实施例使用纯CSS驱动换肤逻辑，无需JavaScript操作DOM，也无需额外维护多套特定页面模式的样式文件，后续新增或修改的组件都无需增加特定页面模式的样式，大大减轻了维护成本和提高开发效率。

图4为本申请另一实施例提供的页面模式切换方法的流程图。图4对上述实施例中的方案进行更详细的说明，如图4所示，本申请实施例提供的页面模式切换方法可以包括如下步骤：

S301、响应于模式切换指令，获取模式切换指令中携带的目标页面模式的标识信息。

S302、根据标识信息，确定目标页面模式对应的选择器选中的表单元素为当前页面中的待处理页面元素。

在实际应用中，不同目标页面模式对应的选择器选中的表单元素不同，可以根据目标页面模式与选择器选中的表单元素之间的对应关系确定待处理页面元素。

具体的，先根据模式切换指令中携带的标识信息确定目标页面模式，再根据目标页面模式与选择器选中的表单元素之间的对应关系确定待处理页面元素。

其中，选择器可以包括：checked选择器、+选择器、～选择器。checked选择器表示选项选中的表单元素；“+选择器”用于表示表单元素中包括换肤按钮对应的页面元素后紧随的同胞页面元素；“～选择器”用于表单元素中包括换肤按钮对应的页面元素后的所有页面元素。

具体的，当通过终端设备触发模式切换指令时，会触发换肤按钮的“checked选择器”进入选中状态，通过触发“+选择器”或者“～选择器”确定表单元素中的待处理页面元素，再将表单元素通过模式切换指令发送至服务器。使用CSS的:checked、+选择器和～选择器这三个选择器模拟点击切换功能并带动网站主体换肤，在换肤完成后使用filter()滤镜函数为整个网页调制特定页面模式效果。

相应的，服务器接收模式切换指令，并根据模式切换指令中的表单元素确定待处理页面元素。

示例性的，当前页面的HTML主体结构为：

示例性的，可以通过如下代码对待处理页面元素进行模式切换：

mode-switch:checked+.main{

filter:滤镜参数；

}

S303、根据标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数。

S304、根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。

需要说明的是，步骤S303～S304与图2中所示的步骤S202～S203类似，具体可参考图2所示的实施例，此处不再赘述。

在实际应用中，采用滤镜函数对待处理页面元素进行处理时，会使得不需要进行处理的页面元素也会产生滤镜效应，例如，对于悼念模式，仅需要将文字、背景、图标等页面元素进行处理，不需要对一些媒体类型的页面元素进行处理(例如，图片、视频等)，但是在采用grayscale()函数对上述页面元素进行处理时，会对上述不需要进行处理的页面元素产生滤镜效应，从而使得媒体元素的展示效果差，降低用户体验。可以通过如下步骤S305～S306对上述媒体元素进行处理，以提升用户体验。

S305、确定当前页面中不需要进行模式切换的目标页面元素。

需要说明的是，不同的目标页面模式对应于不同的目标页面元素，本步骤中，可以根据标识信息确定目标页面模式，再根据页面模式于目标页面元素的对应关系确定目标页面元素。

具体的，确定目标页面模式中，不需要进行切换的页面元素对应的标识信息，根据标识信息，确定当前页面中的目标页面元素。

仍以上述的悼念模式为例，目标页面元素可以包括：图片元素、视频元素。则确定图片元素、视频元素的标识信息，根据标识信息确定当前页面中的所有图片元素和视频元素为目标页面元素。

本申请实施例对于确定页面元素的标识信息的方法不做具体限定，示例性的，可以建立一个类名，例如，“.nomode”，将不需要进行切换的页面元素都添加上该类名，即确定所有带有该类名的元素为目标页面元素。

S306、根据滤镜参数的反向参数对目标页面元素进行处理，获得处理后的目标页面。

具体的，根据对当前页面进行处理时的滤镜参数确定滤镜参数的反向参数。示例性的，以目标页面模式为悼念模式，滤镜函数为grayscale()函数为例，若在页面切换时，使用的滤镜参数为100％，即滤镜函数为grayscale(100％)，则可以确定反向参数为0％，即反向参数对应的滤镜函数为grayscale(0％)。

进一步的，根据反向参数对目标页面元素进行处理，获得处理后的目标页面元素，最终的到处理后的目标页面。

需要说明的是，采用反向参数对目标页面元素进行处理的方法可与采用现有技术中的方案，此处不再赘述。

示例性的，具体代码如下：

本申请实施例提供的页面模式切换方法，响应于模式切换指令，获取模式切换指令中携带的目标页面模式的标识信息，根据标识信息，确定目标页面模式对应的选择器选中的表单元素为当前页面中的待处理页面元素，根据标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数，根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面，确定当前页面中不需要进行模式切换的目标页面元素，根据滤镜参数的反向参数对目标页面元素进行处理，获得处理后的目标页面。本方案中，由于通过滤镜对页面中的页面元素进行处理，使得当前页面的模式切换为目标页面，每次模式切换过程中，不需要操作HTML的DOM，不会增加页面的回流重绘频率，渲染性能更好，最终提升页面模式的切换效果。另外，通过对不需要进行处理的页面元素进行恢复，可以不需要进行处理的页面元素的展示效果，提升户体验。

作为一种可选方案，在对当前页面进行页面模式切换前，需要给当前页面部署页面模式切换功能。在相关技术中，通常由设计人员为网站每个页面组件设计相应模式的UI设计图，然后由开发人员将UI设计图中的UI数据编写为CSS样式，并将CSS样式和模式换肤按钮的HTML插入到网站的指定位置，再通过将模式换肤按钮与脚本语言进行绑定，使得当前页面具备页面模式切换功能。然而，上述过程中，在前期设计UI和编写CSS样式过程效率低，最终导致给页面部署页面模式功能的过程效率低。下面结合图5、图6、图7的实施例对给当前页面部署页面模式切换功能的过程进行详细说明。

图5为本申请又一实施例提供的页面模式切换方法的流程图。如图5所示，本申请实施例提供的页面模式切换方法包括如下步骤：

S401、获取目标页面模式对应的入口文件和样式文件。

其中，入口文件用于在当前页面中设置目标页面模式对应的换肤按钮，换肤按钮用于触发模式切换指令，样式文件用于设置目标页面模式对应的模式。

本步骤中，一方面，可以由开发人员根据目标页面模式编写目标页面模式对应的入口文件和样式文件。相比现有技术，本方案只需要根据目标页面模式对应的滤镜函数，编写相关的样式文件，而无需为网站每个页面组件设计相应模式的UI设计图，也可以大大减少工作量，从而提升页面模式功能的部署效率。

另一方面，还可以从任意部署了页面模式切换功能的页面中，直接获取该页面的入口文件和样式文件。

具体的，扫描部署了页面模式切换功能的页面，提取出该页面中的HTML文件和CSS文件，以获得该页面对应的入口文件和样式文件，其中，入口文件可以是：index.html，样式文件可以是main.css。

S402、根据入口文件和样式文件为当前页面设置页面模式切换功能。

进一步的，将入口文件和样式文件插入到当前页面中。具体的，根据入口文件和样式文件在该部署了页面模式切换功能的页面中的插入位置，将入口文件和样式文件插入到当前页面的对应位置，以为当前页面设置模式切换功能。

S403、响应于模式切换指令，确定当前页面中的待处理页面元素。

其中，模式切换指令中携带目标页面模式的标识信息。

S404、根据标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数。

S405、根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。

需要说明的是，步骤S403～S405与图2中所示的步骤S201～S203类似，具体可参考图2所示的实施例，此处不再赘述。

本申请实施例提供的页面模式切换方法，获取目标页面模式对应的入口文件和样式文件，然后根据入口文件和样式文件为当前页面设置页面模式切换功能，再响应于模式切换指令，确定当前页面中的待处理页面元素，根据标识信息，确定确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数，最后根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。通过直接从部署了页面切换功能的页面中获取入口文件和样式文件，再将入口文件和样式文件插入到当前页面的相对位置，无需为每个页面中的元素都设计UI，也无需为页面中的元素编写CSS样式，可以提升页面模式功能的部署效率。

图6为本申请又一实施例提供的页面模式切换方法的流程图。图6对上述实施例进行更详细的说明，如图6所示，本申请实施例提供的页面模式切换方法可以包括如下步骤：

S501、从第一页面中，获取第一页面的入口文件。

其中，第一页面为具备目标页面模式切换功能的页面。

S502、获取第一页面的入口文件中的直属标签。

其中，直属标签包括script标签和非script标签。本步骤具体为，以入口文件为index.html为例，分析index.html的<body>下的直属标签，获得入口文件的直属标签。

S503、建立外层标签。

具体的，排除script标签，根据非script标签和非script标签的结构建立外层标签，示例性的，外层标签如下所示：

S504、将直属标签中的非script标签的结构插入到该外层标签中，获得目标标签。

S505、在目标标签前插入换肤按钮对应的结构，获得目标页面模式对应的入口文件。

其中，换肤按钮对应的结构可以为：<input class＝"mode-switch"type＝"checkbox">。

具体的，将上述换肤按钮对应的结构插入到上述目标标签中，以获得目标页面模式对应的入口文件，其中，目标页面模式对应的入口文件如下所示：

S506、从第二页面中，获取第二页面的样式文件。

其中，第二页面为具备目标页面模式切换功能的页面，第一页面与第二页面可以为同一页面，也可以为不同页面，也即，为当前页面设置页面模式切换功能时，入口文件和样式文件可以来源于同一个具备目标页面模式切换功能的页面，入口文件和样式文件也可以来源于不同的具备目标页面模式切换功能的页面，本申请实施例不做具体限定。

S507、在第二页面的样式文件的末尾插入换肤按钮对应的样式文件和目标页面模式对应的样式文件，获得目标页面模式对应的样式文件。

需要说的的是，本申请实施例对于换肤按钮对应的样式不作具体限定，其中，换肤按钮对应的样式可以包括以下至少一种：换肤按钮的形状、数量、尺寸、颜色等。

S508、根据目标页面模式对应入口文件和目标页面模式对应样式文件为当前页面设置页面模式切换功能。

需要说明的是，步骤S508与图4所示实施例中的步骤S405类似，具体可参考上述步骤，此处不再赘述。

需要说明的是，本申请实施例对于上述步骤的执行顺序不做具体限定。

为方便理解，下面结合具体实施例对图6所示的实施例进行更详细的说明。

图7为本申请实施例提供的设置页面模式切换功能的流程示意图。如图7所示，本方案具体包括如下步骤：

P001、启动设置页面模式切换功能的脚手架；

P002、扫描具备页面模式切换功能的页面的页面数据，提取该页面的入口文件(例如，index.html)和样式文件(例如，main.css)；

P003-1、分析入口文件index.html的<body>下的直属标签，排除<script>标签后，将其余标签及其内部结构收集起来，新建一个外层标签<div class＝"main"></div>，将刚才收集好的其余标签的结构内容插入到这个外层标签里，然后在外层标签的前面插入换肤按钮的结构<input

本步骤中，通过将页面的主体结构使用div标签包裹，在采用CSS选择器操作页面的样式，在该div标签前插入type为checkbox的input标签，利用input标签模拟换肤按钮，最终使得在页面中呈现的是目标页面模式对应的换肤按钮；

P003-2、分析样式文件main.css，并在样式文件末尾插入预设好的换肤按钮样式和特定模式样式，得到修改后的样式文件。

其中，P003-1和P003-2均使用HTML和CSS，没有使用过JavaScript，是一种脱离了JavaScript还能使换肤更低成本更简单更易改造的方案，区别于其他使用JavaScript的换肤方案来说，本方案更加简单，且成本低效率高。

P004、将修改后的入口文件和修改后的样式文件插入到页面的相应位置。

P005、关闭设置页面模式切换功能的脚手架。

通过本方案，通过简单改造页面整体外层HTML结构来营造出让input标签，当标签被选中时，使用CSS选择器选中页面元素来切换页面模式，无需大幅度修改网站原有结构代码，降低由于设置页面模式切换功能而导致页面出现问题的概率，提升了设置页面模式切换功能的效率。另外，当页面设置页面模式切换功能后，input被选中后进入checked状态而触发该模式切换，从而让页面的原有样式切换为目标样式，全程交由CSS操作，无需JavaScript参与，达到简易、快速实现模式切换肤的效果。

图8为本申请一实施例提供的页面模式切换装置的结构示意图。如图8所示，本申请实施例提供的页面模式切换装置包括：

确定模块601，响应于模式切换指令，确定当前页面中的待处理页面元素，模式切换指令中携带目标页面模式的标识信息，根据标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和目标页面模式对应的滤镜参数；

处理模块602，用于根据滤镜函数以及滤镜参数对待处理页面元素进行处理，获得页面模式切换后的目标页面。

可以理解的是，本实施例所提供的页面模式切换装置，可用于执行如上述任一方法实施例的技术方案，其实现原理和技术效果类似，具体可参考上述方法实施例，此处不再赘述。

可选的，确定模块601具体用于：根据目标页面模式的标识信息，确定目标页面模式对应的选择器选中的表单元素为当前页面中的待处理页面元素。

可选的，确定模块601还用于：确定当前页面中不需要进行模式切换的目标页面元素；

处理模块602还用于：根据滤镜参数的反向参数对目标页面元素进行处理，获得处理后的目标页面。

图9为本申请另一实施例提供的页面模式切换装置的结构示意图。如图9所示，本申请实施例提供的页面模式切换装置包括：

获取模块603，用于获取目标页面模式对应的入口文件和样式文件，入口文件用于在当前页面中设置目标页面模式对应的换肤按钮，换肤按钮用于触发模式切换指令，样式文件用于设置目标页面模式对应的模式；

处理模块602还用于：根据入口文件和样式文件为当前页面设置页面模式切换功能。

可选的，获取模块603具体用于：从第一页面中，获取第一页面的入口文件，第一页面为具备目标页面模式切换功能的页面；

获取第一页面的入口文件中的直属标签，直属标签包括script标签和非script标签；

建立外层标签；

将直属标签中的非script标签的结构插入到外层标签中，获得目标标签；

在目标标签前插入换肤按钮对应的结构，获得目标页面模式对应的入口文件。

可选的，获取模块603具体用于：从第二页面中，获取第二页面的样式文件，第二页面为具备目标页面模式切换功能的页面；

在第二页面的样式文件的末尾插入换肤按钮对应的样式文件和目标页面模式对应的样式文件，获得目标页面模式对应的样式文件。

图10为本申请一实施例提供的电子设备的结构示意图。如图10所示，电子设备包括处理组件701，其进一步包括一个或多个处理器，以及由存储器702所代表的存储器资源，用于存储可由处理组件701的执行的指令，例如应用程序。存储器702中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件701被配置为执行指令，以执行如图2～图7所示的实施例中所示的方法，具体参见上述方法实施例中的说明，此处不再赘述。

电子设备还可以包括一个有线或无线网络接口703被配置为将电子设备连接到网络，和一个输入输出(I/O)接口704。电子设备可以操作基于存储在存储器702的操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM或类似。

本领域技术人员可以理解的是，图10中示出的电子设备的结构并不构成对本电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

在此需要说明的是，本申请提供的上述电子设备，用于实现上述方法实施例中描述的对应于服务器的方法，且能够达到相同的技术效果，在此不再对本实施例中与方法实施例相同的部分及有益效果进行具体赘述。

本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时用于实现如上任一实施例的页面模式切换方法。

本申请实施例还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如上任一实施例的页面模式切换方法。

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

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

上述以软件功能模块的形式实现的集成的模块，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本申请各个实施例方法的部分步骤。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims

1.一种页面模式切换方法，其特征在于，包括：

响应于模式切换指令，确定当前页面中的待处理页面元素，所述模式切换指令中携带目标页面模式的标识信息；

根据所述标识信息，确定将所述当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数；

根据所述滤镜函数以及所述滤镜参数对所述待处理页面元素进行处理，获得页面模式切换后的目标页面。

2.根据权利要求1所述的方法，其特征在于，所述确定当前页面中的待处理页面元素，包括：

根据所述目标页面模式的标识信息，确定所述目标页面模式对应的选择器选中的表单元素为所述当前页面中的待处理页面元素。

3.根据权利要求1所述的方法，其特征在于，所述根据所述滤镜函数对所述待处理页面元素进行处理，获得页面模式切换后的目标页面之后，还包括：

确定所述当前页面中不需要进行模式切换的目标页面元素；

根据所述滤镜参数的反向参数对所述目标页面元素进行处理，获得处理后的目标页面。

4.根据权利要求1至3中任一项所述的方法，其特征在于，所述确定当前页面中的待处理页面元素之前，还包括：

获取所述目标页面模式对应的入口文件和样式文件，所述入口文件用于在所述当前页面中设置所述目标页面模式对应的换肤按钮，所述换肤按钮用于触发所述模式切换指令，所述样式文件用于设置所述目标页面模式对应的样式；

根据所述入口文件和所述样式文件为所述当前页面设置页面模式切换功能。

5.根据权利要求4所述的方法，其特征在于，所述获取所述目标页面模式对应的入口文件，包括：

建立外层标签；

6.根据权利要求4所述的方法，其特征在于，所述获取所述目标页面模式对应的样式文件，包括：

7.一种页面模式切换装置，其特征在于，包括：

确定模块，响应于模式切换指令，确定当前页面中的待处理页面元素，所述模式切换指令中携带目标页面模式的标识信息，根据所述标识信息，确定将当前页面的显示效果切换到目标页面模式的显示效果所用的滤镜函数和滤镜参数；

处理模块，用于根据所述滤镜函数以及所述滤镜参数对所述待处理页面元素进行处理，获得页面模式切换后的目标页面。

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

存储器，用于存储程序指令；

处理器，用于调用并执行所述存储器中的程序指令，执行如权利要求1至6中任一向所述的页面模式切换方法。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1至6中任一向所述的页面模式切换方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至6任一项所述的页面模式切换方法。