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 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
js实现数字滚动特效
Dec 16 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
如何将JavaScript将数组转为树形结构
Jun 02 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
服务器端解压缩zip的脚本
2006/12/22 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
js面向对象编程总结
2017/02/16 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
使用tensorflow实现线性svm
2018/09/07 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
高级销售员求职信
2013/10/25 职场文书
小学生操行评语大全
2014/04/22 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Python序列化与反序列化相关知识总结
2021/06/08 Python