JavScript------day1

最新推荐文章于 2019-12-05 12:37:39 发布

dz0110

最新推荐文章于 2019-12-05 12:37:39 发布

阅读量289

点赞数

分类专栏： javaWeb 文章标签： JavaScript HTML做计算器

本文链接：https://blog.csdn.net/dz0110/article/details/88821810

版权

javaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、什么是JavaScript
JavaScript是SUN与网景发明的，基于对象的，区分大小写的，弱的脚本语言。
2、JavaScript能做什么
表单验证、客户端编程以及特效等。
3、js写在哪
标签内、js块内、外部导入
例如

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
	function test1() {
		alert("写在js块内");	
	}
</script>
<script src="js--day1.js"></script>
</head>

<body>
<input type="button" value="button1" onClick="alert('写在标签事件内')"/>
<input type="button" value="button2" onClick="test1()"/>
<input type="button" value="button3" onClick="test2()"/>
</body>
</html>

// JavaScript Document
function test2() {
	alert("外部导入");	
}

4、接下来我们做一个简单的计算器，在例子中讲解js如何获取到form表单中的值

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function check(num1, num2, temp) {
	if(num1 == "") {
		alert("num1不能为空");
		return false;
	}
	if(num2 == "") {
		alert("num2不能为空");
		return false;
	}
	if(isNaN(num1)) {
		alert("num1必须为数字");	
		return false;
	}
	if(isNaN(num2)) {
		alert("num2必须为数字");	
		return false;
	}
	if(temp == '/') {
		if(num2 == '0') {
			alert("除数不能为0");
			return false;
		}
	}
	return true;
}
function getResult(temp) {
	var num1 = document.getElementById("num1").value;//我们用document.getElementById("表单中元素的id名").value来获取表单中元素的值
	var num2 = document.getElementById("num2").value;		
	if(check(num1, num2, temp)) {
		if(temp == '+') {
			document.getElementById("result").value = parseInt(num1) + parseInt(num2);		
		}
		if(temp == '-') {
			document.getElementById("result").value = parseInt(num1) - parseInt(num2);		
		}
		if(temp == '*') {
			document.getElementById("result").value = parseInt(num1) * parseInt(num2);		
		}
		if(temp == '/') {
			document.getElementById("result").value = parseInt(num1) / parseInt(num2);		
		}
	}	
}

</script>
</head>

<body>
<h2 align="center">计算器</h2>
<p align="center">
    num1:<input type="text" id="num1" name="num1"/><br/>
    num2:<input type="text" id="num2" name="num2"/><br/>
    <input type="button" value="+" onClick="getResult('+')"/>
    <input type="button" value="-" onClick="getResult('-')"/>
    <input type="button" value="*"onClick="getResult('*')"/>
    <input type="button" value="/" onClick="getResult('/')"/><br/>
    result:<input type="text" id="result" name="result"/> 
</p>
</body>
</html>