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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
小程序实现搜索框功能
Mar 26 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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入门之连接mysql数据库的一个类
2012/04/21 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
新手入门常用代码集锦
2007/01/11 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
javascript中的this详解
2014/12/08 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python Celery多队列配置代码实例
2019/11/22 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书