JavaScript实现输入长方形的宽和高,输出周长和面积的代码

news/2024/11/29 4:57:30/

  以下为实现输入长方形的宽和高,输出周长和面积的代码和运行截图

目录

前言

一、实现输入长方形的宽和高,输出周长和面积

1.1 运行流程及思想

1.2 代码段

1.3 JavaScript语句代码

1.4 输入数值不是要求必须输入数值的代码

1.5 运行截图


前言

1.若有选择,您可以在目录里进行快速查找;

2.本博文代码可以根据题目要求实现相关使用功能。同时可以实现自定义的设置;

3.本文介绍的是JavaScript代码习题,本博文使用的软件是HBuilder X3.7.9编写的代码,原则上其他软件如DW、VSCode或DW较低或较高版本的软件都是兼容的,若您有需要且编写软件不是HBX等软件原则上都是可以能正常运行的;

图1   编写软件举例(部分)

4.这里要特别说明,因为我使用的是HBX,所以是网页格式,我也单独把<script>语句粘贴了出来,有需要可直接复制<script></script>语句;

5.本博文代码是我在上学时写的,有一些地方没能完美实现,请包涵也请多赐教,若您发现了问题也请麻烦您将问题反馈给我,我好更正错误、总结完善、持续改善! 

6.博文通常需要在浏览器运行,通常会弹出表单,输入数值并得出结果。本文使用的是谷歌浏览器,推荐使用谷歌浏览器;

7.若涉及侵权,请联系删除;


提示:以下是本篇文章正文内容,下面案例可供参考

一、实现输入长方形的宽和高,输出周长和面积

1.1 运行流程及思想

这是通过实现弹出输入的数值(输入数值为数值型)并对公式进行赋值,最后进行输出。具体思想流程如下:

1.2 代码段

代码如下(示例):

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>长方形公式求解:</title><script charset="utf-8">var  d,e;a=parseFloat(prompt("请输入长方形的长:",0));b=parseFloat(prompt("请输入长方形的宽:",0));d=(a+b)*2;e=a*b;document.write("长方形的周长是:","<h5>",d,"</h5>");document.write("长方形的面积是:","<h5>",e,"</h5>");</script></head><body></body>
</html>

1.3 JavaScript语句代码

代码如下(示例):

<script charset="utf-8">var  d,e;a=parseFloat(prompt("请输入长方形的长:",0));b=parseFloat(prompt("请输入长方形的宽:",0));d=(a+b)*2;e=a*b;document.write("长方形的周长是:","<h5>",d,"</h5>");document.write("长方形的面积是:","<h5>",e,"</h5>");</script>

上面的代码是要求输入的数值必须是数值版的,下面这个是不需要的,差别就是在弹出文本框代码段少了“parseFloat”这个关键词。具体差异可以进行尝试。 

1.4 输入数值不是要求必须输入数值的代码

代码如下(示例):

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>长方形公式求解:</title><script charset="utf-8">var  d,e;a=prompt("请输入长方形的长:",0);b=prompt("请输入长方形的宽:",0);d=(a+b)*2;e=a*b;document.write("长方形的周长是:","<h2>",d,"</h2>");document.write("长方形的面积是:","<h2>",e,"</h2>");</script></head><body></body>
</html>

1.5 运行截图

运行结果如下(示例):

1.5.1 浏览器弹出表单显示结果

 


http://www.ppmy.cn/news/64374.html

相关文章

提示工程L3:内容总结

提示工程指南&#xff1a;文本总结 当今世界有如此多的文本信息&#xff0c;阅读需要花费大量的时间&#xff0c;但是如果可以对文本的内容进行压缩&#xff0c;去掉冗余的内容保留你感兴趣的重点信息&#xff0c;这样就能节省不少时间&#xff0c;同时还提高了我们的阅读效率。…

【网络安全CTF】BUUCTF(Basic篇)

Linux Labs 解题思路&#xff1a;已给用户名密码&#xff0c;直接用ssh工具连接即可获取flag 查找flag在跟下 提交完成。 BUU LFI COURSE 1 访问链接&#xff1a;为php代码审计题&#xff0c;看题目要求构造GET请求读取文件 http://9a7d4988-99f9-4c29-88d8-600e19887723.n…

如何提升应届生职场竞争力

引言 对于应届毕业生来说&#xff0c;进入职场是既令人兴奋又具有挑战性的。面对竞争激烈的就业市场&#xff0c;提高自身的职场竞争力对于应届生来说尤为重要。本文旨在为应届生提供有价值的见解和实用的策略&#xff0c;帮助他们提升职场竞争力&#xff0c;增加在就业市场中的…

【观察】华为重构分销伙伴体系,坚持“长期主义”做大分销市场

毫无疑问&#xff0c;随着数字化转型的加速&#xff0c;当前不同类型、不同规模的企业&#xff0c;在面临数字化转型时呈现出了不同的困境和特征&#xff0c;同时对合作伙伴也提出了更高的要求&#xff0c;因此唯有通过“精耕细作”的方式才能更好地加速企业数字化转型的步伐。…

python web开发(二):HTML标签语言

文章目录 简介标签语法标题div和span超链接插入图片列表表格Input系列提交表单 参考 简介 如下展示了一段简单的HTML模板&#xff0c; <head></head>标签中主要包含一些基本配置&#xff0c;如编码方式&#xff0c;标题等&#xff0c;注意标题的作用如下图所示 …

MySQL笔记(一):设计范式、基础概念、数据库定义语言DDL

MySQL设计范式、基础概念、数据库定义语言DDL MySQL设计范式、基础概念、数据库定义语言DDL MySQL设计范式、基础概念、数据库定义语言DDL数据模型属性的特点 数据库的创建主键 数据库设计规范第一范式&#xff08;1NF&#xff09;第二范式&#xff08;2NF&#xff09;第三范式…

k8s二次开发实战

kubernetes二次开发实战(进阶一&#xff09; kubeadm源码解读与实战 一、Go语言核心开发入门进阶 1、Go语言核心开发之Go module依赖管理系统 2、Go语言核心开发之Gomodule之用第三方库 3、Go语言核心开发之Cobra库探索认识Cobra库 4、Go语言核心开发之Cobra库探索安装Cobra库…

Hadoop-----WorldCount代码编写、温度案例

WorldCount代码编写 WordCountMapper package day34.com.doit.demo02;import org.apache.hadoop.io.IntWritable; import org.apache.hadoop.io.LongWritable; import org.apache.hadoop.io.Text; import org.apache.hadoop.mapreduce.Mapper;import java.io.IOException;pub…