用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 点击转跳