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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
javascript常用方法总结
May 14 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
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并发访问实例代码
2012/09/06 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
python学生管理系统学习笔记
2019/03/19 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Django框架请求生命周期实现原理
2020/11/13 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
廉政教育心得体会
2014/01/01 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
五五普法心得体会
2014/09/04 职场文书
2014年政协工作总结
2014/12/09 职场文书
努力工作保证书
2015/02/28 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
导游词之日月潭
2019/11/05 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js