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 动态文字滚动的例子
Jan 17 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
js命名空间写法示例
Dec 18 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
详解js中==与===的区别
Jan 08 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
JS重要知识点小结
2011/11/06 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python如何发布程序的详细教程
2018/10/09 Python
Python中@property的理解和使用示例
2019/06/11 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
优秀员工个人的自我评价
2013/11/29 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
团委竞选演讲稿
2014/04/24 职场文书
企业宣传口号
2014/06/12 职场文书
学校标语大全
2014/06/19 职场文书
2014年测量员工作总结
2014/12/12 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书