Web开发基础-JavaScript-03

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>

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


如果录入不是数字则页面效果:


浏览器控制台输出:


细节拓展:我们从控制台还可以看到一些元素默认样式

表单文本控件元素:

表单录入控件元素:


行内文本元素span:



猜你喜欢

转载自blog.csdn.net/coder_boy_/article/details/80955139