用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。

相关文章

Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
C语言中的数据类型强制转换

C语言中的数据类型强制转换

《C语言中的数据类型强制转换》：本文主要介绍C语言中的数据类型强制转换方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C语言数据类型强制转换自动转换强制转换类型总结C语言数据类型强制转换强制类型转换：是通过类型转换运算来实现的，主要的数据类型转换分为自动转换
阅读更多...
利用Go语言开发文件操作工具轻松处理所有文件

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具？核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件
阅读更多...
C语言实现两个变量值交换的三种方式

C语言实现两个变量值交换的三种方式

《C语言实现两个变量值交换的三种方式》两个变量值的交换是编程中最常见的问题之一,以下将介绍三种变量的交换方式,其中第一种方式是最常用也是最实用的,后两种方式一般只在特殊限制下使用,需要的朋友可以参考下... 目录1.使用临时变量（推荐）2.相加和相减的方式（值较大时可能丢失数据）3.按位异或运算1.使用临时
阅读更多...
使用C语言实现交换整数的奇数位和偶数位

使用C语言实现交换整数的奇数位和偶数位

《使用C语言实现交换整数的奇数位和偶数位》在C语言中,要交换一个整数的二进制位中的奇数位和偶数位,重点需要理解位操作,当我们谈论二进制位的奇数位和偶数位时,我们是指从右到左数的位置,本文给大家介绍了使... 目录一、问题描述二、解决思路三、函数实现四、宏实现五、总结一、问题描述使用C语言代码实现：将一个整
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2