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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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/11/13 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
php命令行模式代码实例详解
2021/02/26 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
删除条目时弹出的确认对话框
2014/06/05 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
《自然之道》教学反思
2014/02/11 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
防暑降温通知书
2015/04/27 职场文书
详解Vue的options
2021/05/15 Vue.js
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS