JavaScript计算正方形面积


Posted in Javascript onNovember 26, 2019

用JavaScript实现计算正方形的面积注意用一个Math.pow()函数。

实现效果:

JavaScript计算正方形面积

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form method="get" action="">
  <h2>计算正方形的面积</h2>
  正方形的边长:<input type="text" id="radius"><br>
  正方形的面积:<input type="text" readonly="readonly" id="area"><br>
  <input type="button" value="计算" onclick="show()" />
  <input type="reset" value="重置" />
 </form>
</body>
<script type="text/javascript">
 function area(radius){
  var radius=document.getElementById("radius").value;//获取正方形的边长
  var area=Math.pow(radius,2);//计算正方形的面积
  return area;
 }
 function show(){
  //输出正方形的面积
  document.getElementById("area").value=area(radius);
 }
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
javaScript中indexOf用法技巧
Nov 26 #Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 #Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 #Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 #Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
如何优雅地在Node应用中进行错误异常处理
Nov 25 #Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
You might like
php实现的返回数据格式化类实例
2014/09/22 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Django choices下拉列表绑定实例
2020/03/13 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python 实现一个计时器
2020/07/28 Python
Python实现像awk一样分割字符串
2020/09/15 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
C#面试问题
2016/07/29 面试题
土木工程个人自荐信范文
2013/11/30 职场文书
争先创优活动总结
2014/08/27 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
国博复兴之路观后感
2015/06/02 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android