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 相关文章推荐
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
BootStrap的两种模态框方式
May 10 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
JavaScript实现消消乐的源代码
Jan 12 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
react redux入门示例
2018/04/19 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python获取邮件地址的方法
2015/07/10 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
python实现求特征选择的信息增益
2018/12/18 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
详解python中__name__的意义以及作用
2019/08/07 Python
python 画图 图例自由定义方式
2020/04/17 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
工作交流会欢迎词
2014/01/12 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
《海底世界》教学反思
2014/04/16 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
生死抉择观后感
2015/06/09 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记