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: