用c语言编写前端开发中比例计算px转vw/vh的计算器

2024-05-02 06:08
文章标签 语言 计算 编写 前端开发 frontend 比例 计算器 px vh vw

本文主要是介绍用c语言编写前端开发中比例计算px转vw/vh的计算器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

用c语言编写前端开发中比例计算px转vw/vh的计算器

    在写移动端页面的时候为了适配手机型号尺寸的变化，需要多次用到vw和vh相对单位。所以就自己用C语言写了一个简易版计算器。

 

实现功能有：

  1. wpx/hpx转vw/vh （wpx元素的宽度，hpx元素的高度。本文中都以简称替代）
  2. vw/vh转wpx/hpx
  3. vw转vh
  4. vh转vw
     

首先我们需要知道进入哪种功能，定义一个判断进入功能的函数。

  • 输入V进入wpx/hpx转vw/vh功能。
  • 输入P进入vw/vh转wpx/hpx功能。
  • 输入H进入vw转vh功能。
  • 输入W进入vh转vw功能。
// 进入计算器类型函数
void how(void)
{printf("\n输入需要进入的计算器：\nwpx/hpx转vw/vh输入：V\nvw/vh转wpx/hpx输入：P\nvw转vh输入：H\nvh转vw输入：W\n");scanf(" %c",&zh);getchar();
}

 

再定义一个输入页面总宽度 总高度的函数用于计算所需。

// 输入视图的总宽度,总高度
void px(void)
{printf("\n输入总宽度 总高度：");scanf("%f %f",&w,&h);printf("\n");
}

 

在main主函数中分别给四种功能创建while循环来实现功能。

  • while循环条件判断式可以判定 进入哪种功能zh == ’ ’ 和 是否重启计算器ch != ‘R’。
  • while语句块内调用三个函数分别是：输入函数 计算输出函数 重启计算器函数。
while(ch!='R' && zh=='V') // 输入V进入wpx/hpx转vw/vh功能
{// 调用输入函数// 调用计算输出函数// 调用重启计算器函数
}
while(ch!='R' && zh=='P') // 输入P进入vw/vh转wpx/hpx功能
{// 调用输入函数// 调用计算输出函数// 调用重启计算器函数
}
while(ch!='R' && zh=='H') // 输入H进入vw转vh功能
{// 调用输入函数// 调用计算输出函数// 调用重启计算器函数
}
while(ch!='R' && zh=='W') // 输入W进入vh转vw功能
{// 调用输入函数// 调用计算输出函数// 调用重启计算器函数
}

 

定义输入函数，用来存放不同功能所输入的值用于计算。

  • wpx/hpx转vw/vh功能：需要输入wpx和hpx。
// 输入元素的宽度和高度
void p_v_scan(void){printf("输入元素的宽度 高度：");scanf("%f %f",&wpx,&hpx);printf("\n");
}
  • vw/vh转wpx/hpx功能：需要输入vw和vh。
// 输入元素的vw和vh
void v_p_scan()
{printf("输入元素的vw vh：");scanf("%f %f",&vw,&vh);printf("\n");
}
  • vw转vh功能：需要输入vw。
// 输入vw
void vw_vh_scan(void)
{printf("输入元素的vw：");scanf("%f",&vw);printf("\n");
}
  • vh转vw功能：需要输入vh。
// 输入vh
void vh_vw_scan(void)
{printf("输入元素的vh：");scanf("%f",&vh);printf("\n");
}

 

按输入的值转换为本功能对应的单位，定义计算函数。

// vw,vh比例换算函数  wpx/hpx转vw/vh
void p_v(float w,float h,float wpx,float hpx)
{vw=wpx/w*100;vh=hpx/h*100;p_v_print(w,h,vw,vh);
}
// vw,vh转换px换算函数  vw/vh转wpx/hpx
void v_p(float w,float h,float vw,float vh)
{wpx=w*(vw/100);hpx=h*(vh/100);v_p_print(w,h,vw,vh);
}
// vw转vh计算函数  vw转vh
void vw_vh(float w,float h, float vw)
{p_x=w*vw/100;vh=p_x/h*100;wpx=w*(vw/100);vw_vh_print(w,h,vw,vh);
}
// vh转vw计算函数  vh转vw
void vh_vw(float w,float h, float vh)
{p_x=h*vh/100;vw=p_x/w*100;hpx=h*(vh/100);vh_vw_print(w,h,vh,vw);
}

 

按功能输出不同的内容，定义输出函数。

  • 在输出函数中调用了计算函数中重新赋值的全局变量
// 输出vw,vh比例转换结果
void p_v_print(float w,float h, float vw,float vh)
{printf("W:%.1fpx总宽度,H:%.1fpx总高度\n",w,h);printf("wpx：%.1fpx,hpx：%.1fpx\n",wpx,hpx);printf("vw：%.3fvw\nvh：%.3fvh\n\n",vw,vh);
}
// 输出vw,vh转换px结果
void v_p_print(float w, float h, float vw, float vh)
{printf("W:%.1fpx总宽度,H:%.1fpx总高度\n",w,h);printf("vw:%.3f,vh:%.3f\n",vw,vh);printf("wpx：%.1fpx\nhpx：%.1fpx\n\n",wpx,hpx);
}
// 输出vw转vh的结果
void vw_vh_print(float w, float h, float vw, float vh)
{printf("W:%.1fpx总宽度,H:%.1fpx总高度\n",w,h);printf("元素大小:%.1fpx\n",wpx);printf("vw:%.3f=vh:%.3f\n\n",vw,vh);
}
// 输出vw转vh的结果
void vh_vw_print(float w, float h, float vh, float vw)
{printf("W:%.1fpx总宽度,H:%.1fpx总高度\n",w,h);printf("元素大小:%.1fpx\n",hpx);printf("vh:%.3f=vw:%.3f\n\n",vh,vw);
}

 

实现重选其他功能，定义一个重启计算器的函数。

  • 输入0继续本功能，输入字符’R’重新选择功能。
// 重启计算器函数
void clean(void)
{printf("输入R选择其他类型计算器或者重新输入宽高，输入其他任意键开启计算器：");getchar();scanf("%c",&ch);printf("\n\n\n");
}

 
 

下面是计算器的完整代码：

  • 可直接编译后在命令行运行。
  • 不需要输入单位。格式化输入，进入计算器的字母必须为大写，输入元素的宽高px时中间已空格隔开。如:150 40
// 11.9 前端计算器——tzof
#include <stdio.h>float w=0;        //总宽度float h=0;        //总高度float vw=0;       //宽度百分比float vh=0;       //高度百分比float wpx=0;      //元素宽度float hpx=0;      //元素高度float p_x=0;       //存放vw vh转换的中间变量char ch='S';      //重启开始char zh='Z';      //开启计算器类型// float pt=0;       //pt打印单位
// 进入计算器类型函数
void how(void)
{printf("\n输入需要进入的计算器：\nwpx/hpx转vw/vh输入：V\nvw/vh转wpx/hpx输入：P\nvw转vh输入：H\nvh转vw输入：W\n");scanf(" %c",&zh);getchar();
}
// 输入视图的总宽度,总高度
void px(void)
{printf("\n输入总宽度 总高度：");scanf("%f %f",&w,&h);printf("\n");
}
// 重启计算器函数
void clean(void)
{printf("输入R选择其他类型计算器或者重新输入宽高，输入其他任意键开启计算器：");getchar();scanf("%c",&ch);printf("\n\n\n");
}
// 输入元素的宽度和高度
void p_v_scan(void){printf("输入元素的宽度 高度：");scanf("%f %f",&wpx,&hpx);printf("\n");
}
// 输出vw,vh比例转换结果
void p_v_print(float w,float h, float vw,float vh)
{printf("W:%.1fpx总宽度,H:%.1fpx总高度\n",w,h);printf("wpx：%.1fpx,hpx：%.1fpx\n",wpx,hpx);printf("vw：%.3fvw\nvh：%.3fvh\n\n",vw,vh);
}
// 输入元素的vw和vh
void v_p_scan()
{printf("输入元素的vw vh：");scanf("%f %f",&vw,&vh);printf("\n");
}
// 输出vw,vh转换px结果
void v_p_print(float w, float h, float vw, float vh)
{printf("W:%.1fpx总宽度,H:%.1fpx总高度\n",w,h);printf("vw:%.3f,vh:%.3f\n",vw,vh);printf("wpx：%.1fpx\nhpx：%.1fpx\n\n",wpx,hpx);
}
// 输入vw
void vw_vh_scan(void)
{printf("输入元素的vw：");scanf("%f",&vw);printf("\n");
}
// 输出vw转vh的结果
void vw_vh_print(float w, float h, float vw, float vh)
{printf("W:%.1fpx总宽度,H:%.1fpx总高度\n",w,h);printf("元素大小:%.1fpx\n",wpx);printf("vw:%.3f=vh:%.3f\n\n",vw,vh);
}
// 输入vh
void vh_vw_scan(void)
{printf("输入元素的vh：");scanf("%f",&vh);printf("\n");
}
// 输出vw转vh的结果
void vh_vw_print(float w, float h, float vh, float vw)
{printf("W:%.1fpx总宽度,H:%.1fpx总高度\n",w,h);printf("元素大小:%.1fpx\n",hpx);printf("vh:%.3f=vw:%.3f\n\n",vh,vw);
}
// vw,vh比例换算函数
void p_v(float w,float h,float wpx,float hpx)
{vw=wpx/w*100;vh=hpx/h*100;p_v_print(w,h,vw,vh);
}
// vw,vh转换px换算函数
void v_p(float w,float h,float vw,float vh)
{wpx=w*(vw/100);hpx=h*(vh/100);v_p_print(w,h,vw,vh);
}
// vw转vh计算函数
void vw_vh(float w,float h, float vw)
{p_x=w*vw/100;vh=p_x/h*100;wpx=w*(vw/100);vw_vh_print(w,h,vw,vh);
}
// vh转vw计算函数
void vh_vw(float w,float h, float vh)
{p_x=h*vh/100;vw=p_x/w*100;hpx=h*(vh/100);vh_vw_print(w,h,vh,vw);
}
int main(void)
{printf("\n前端计算器——TZOF\n\n");while(1){how();if(zh!='V' && zh!='P' && zh!='H' && zh!='W'){printf("输入错误请重新输入\n");ch='R';zh='S';}else if(zh=='V' || zh=='P' || zh=='H' || zh=='W'){px();}while(ch!='R'){while(ch!='R' && zh=='V'){p_v_scan();p_v(w,h,wpx,hpx);clean();}while(ch!='R' && zh=='P'){v_p_scan();                v_p(w,h,vw,vh);clean();}while(ch!='R' && zh=='H'){vw_vh_scan();vw_vh(w,h,vw);clean();}while(ch!='R' && zh=='W'){vh_vw_scan();vh_vw(w,h,vh);clean();}}ch='S'; zh='S';}getchar();return 0;
}

 
计算器源码：https://github.com/tzof/CSDN-webProportionCalculator 点击转跳

这篇关于用c语言编写前端开发中比例计算px转vw/vh的计算器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/953531。

相关文章

利用Python编写一个简单的聊天机器人

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始，然后逐步加入更复杂的功能。这里我们将先实现一个简单的
阅读更多...
使用SQL语言查询多个Excel表格的操作方法

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3
阅读更多...
Go语言实现将中文转化为拼音功能

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求：新用户入职 创建一系列账号比较麻烦，打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英
阅读更多...
使用C#代码计算数学表达式实例

使用C#代码计算数学表达式实例

《使用C#代码计算数学表达式实例》这段文字主要讲述了如何使用C#语言来计算数学表达式,该程序通过使用Dictionary保存变量,定义了运算符优先级,并实现了EvaluateExpression方法来... 目录C#代码计算数学表达式该方法很长，因此我将分段描述下面的代码片段显示了下一步以下代码显示该方法如
阅读更多...
Go语言使用Buffer实现高性能处理字节和字符

Go语言使用Buffer实现高性能处理字节和字符

《Go语言使用Buffer实现高性能处理字节和字符》在Go中,bytes.Buffer是一个非常高效的类型,用于处理字节数据的读写操作,本文将详细介绍一下如何使用Buffer实现高性能处理字节和... 目录1. bytes.Buffer 的基本用法1.1. 创建和初始化 Buffer1.2. 使用 Writ
阅读更多...
深入理解C语言的void*

深入理解C语言的void*

《深入理解C语言的void*》本文主要介绍了C语言的void*,包括它的任意性、编译器对void*的类型检查以及需要显式类型转换的规则,具有一定的参考价值,感兴趣的可以了解一下... 目录一、void* 的类型任意性二、编译器对 void* 的类型检查三、需要显式类型转换占用的字节四、总结一、void* 的
阅读更多...
用Java打造简易计算器的实现步骤

用Java打造简易计算器的实现步骤

《用Java打造简易计算器的实现步骤》：本文主要介绍如何设计和实现一个简单的Java命令行计算器程序,该程序能够执行基本的数学运算（加、减、乘、除）,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录目标：一、项目概述与功能规划二、代码实现步骤三、测试与优化四、总结与收获总结目标：简单计算器，设计
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
使用PyQt5编写一个简单的取色器

使用PyQt5编写一个简单的取色器

《使用PyQt5编写一个简单的取色器》：本文主要介绍PyQt5搭建的一个取色器,一共写了两款应用,一款使用快捷键捕获鼠标附近图像的RGB和16进制颜色编码,一款跟随鼠标刷新图像的RGB和16... 目录取色器1取色器2PyQt5搭建的一个取色器，一共写了两款应用，一款使用快捷键捕获鼠标附近图像的RGB和16
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2