用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编写一个git自动上传的脚本(打包成exe)

基于Python编写一个git自动上传的脚本(打包成exe)

《基于Python编写一个git自动上传的脚本(打包成exe)》这篇文章主要为大家详细介绍了如何基于Python编写一个git自动上传的脚本并打包成exe,文中的示例代码讲解详细,感兴趣的小伙伴可以跟... 目录前言效果如下源码实现利用pyinstaller打包成exe利用ResourceHacker修改e
阅读更多...
HTML5的input标签的`type`属性值详解和代码示例

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea（严格
阅读更多...
SpringBoot返回文件让前端下载的几种方式

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存，通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流
阅读更多...
C语言逗号运算符和逗号表达式的使用小结

C语言逗号运算符和逗号表达式的使用小结

《C语言逗号运算符和逗号表达式的使用小结》本文详细介绍了C语言中的逗号运算符和逗号表达式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 在Ｃ语言中逗号“，”也是一种运算符，称为逗号运算符。 其功能是把两个表达式连接其一般形式为：表达
阅读更多...
Go语言实现桥接模式

Go语言实现桥接模式

《Go语言实现桥接模式》桥接模式是一种结构型设计模式,它将抽象部分与实现部分分离,使它们可以独立地变化,本文就来介绍一下了Go语言实现桥接模式,感兴趣的可以了解一下... 目录简介核心概念为什么使用桥接模式？应用场景案例分析步骤一：定义实现接口步骤二：创建具体实现类步骤三：定义抽象类步骤四：创建扩展抽象类步
阅读更多...
GO语言实现串口简单通讯

GO语言实现串口简单通讯

《GO语言实现串口简单通讯》本文分享了使用Go语言进行串口通讯的实践过程,详细介绍了串口配置、数据发送与接收的代码实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目录背景串口通讯代码代码块分解解析完整代码运行结果背景最近再学习 go 语言，在某宝用5块钱买了个
阅读更多...
SpringBoot+Vue3整合SSE实现实时消息推送功能

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现（SpringBoot）前端实现（vue3）1. 数据类型定义2.
阅读更多...
前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2
阅读更多...
GO语言zap日志库理解和使用方法示例

GO语言zap日志库理解和使用方法示例

《GO语言zap日志库理解和使用方法示例》Zap是一个高性能、结构化日志库,专为Go语言设计,它由Uber开源,并且在Go社区中非常受欢迎,：本文主要介绍GO语言zap日志库理解和使用方法的相关资... 目录1. zap日志库介绍2.安装zap库3.配置日志记录器3.1 Logger3.2 Sugared
阅读更多...
Go语言中如何进行数据库查询操作

Go语言中如何进行数据库查询操作

《Go语言中如何进行数据库查询操作》在Go语言中,与数据库交互通常通过使用数据库驱动来实现,Go语言支持多种数据库,如MySQL、PostgreSQL、SQLite等,每种数据库都有其对应的官方或第三... 查询函数QueryRow和Query详细对比特性QueryRowQuery返回值数量1个：*sql
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2