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

相关文章

Go语言中nil判断的注意事项(最新推荐)

Go语言中nil判断的注意事项(最新推荐)

《Go语言中nil判断的注意事项(最新推荐)》本文给大家介绍Go语言中nil判断的注意事项,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.接口变量的特殊行为2.nil的合法类型3.nil值的实用行为4.自定义类型与nil5.反射判断nil6.函数返回的
阅读更多...
Go语言数据库编程GORM 的基本使用详解

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁
阅读更多...
Go语言代码格式化的技巧分享

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具：gofmt 与 go fmt（一）
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2