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 相关文章推荐
解析jquery中的ajax缓存问题
Dec 19 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 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
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
如何将python中的List转化成dictionary
2016/08/15 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
Haggar官网:美国男装品牌
2020/02/16 全球购物
Java的基础面试题附答案
2016/01/10 面试题
优秀中专生推荐信
2013/11/17 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
创卫工作总结2015
2015/04/22 职场文书
七一慰问简报
2015/07/20 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
详解mysql三值逻辑与NULL
2021/05/19 MySQL
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js