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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
原生JS实现飞机大战小游戏
Jun 09 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
可以将word转成html的js代码
2010/04/11 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
任意存:BOXFUL
2018/05/21 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
自我鉴定注意事项
2014/01/19 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
三孔导游词
2015/02/05 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
投资申请报告
2015/05/19 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书