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实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
jsonp原理及使用
Oct 28 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
回顾Javascript React基础
Jun 15 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
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无限分类的深入理解
2013/06/02 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP生成树的方法
2015/07/28 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
vue.js表格分页示例
2016/10/18 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
使用Python来开发微信功能
2018/06/13 Python
查看python下OpenCV版本的方法
2018/08/03 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
python中setuptools的作用是什么
2020/06/19 Python
利用python 读写csv文件
2020/09/10 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
华为慧通笔试题
2016/04/22 面试题
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
交通安全教育主题班会
2015/08/12 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
vue3不同环境下实现配置代理
2022/05/25 Vue.js