Web开发基础-JavaScript-03

最新推荐文章于 2024-06-24 14:30:19 发布

原创最新推荐文章于 2024-06-24 14:30:19 发布 · 291 阅读

1 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个简单的JavaScript平方计算器实现过程，通过HTML与JavaScript结合的方式，实现了输入数字并计算其平方的功能。当输入非数字字符时，程序会给出提示。

JavaScript基础语法的简单使用：

案例思路：

本案例使用Js编写一个简单平方计算器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>平方计算</title>
		<script type="text/javascript">
			function pf(){
				console.log();
				//获取相关的元素
				var input = document.getElementById("num");
				var span = document.getElementById("result");
				console.log(input);
				console.log(span);
				//获取文本框的值
				var num = input.value;
				console.log(num);
				//判断该值是否为数字
				if(isNaN(num)){
					//不是数字，将提示写入span
					span.innerHTML="请输入数字"
				}else{
					//是数字，计算平方并写入span
					span.innerHTML=num*num;
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="num">
		<input type="button" value="平方"
			onclick="pf();">
			=
		<span id="result"></span>
	
	</body>
</html>

最终页面效果:录入需要计算的数字，点击按钮后即可计算结果