<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<center>
<h1>简易计算器</h1>
<form>
<table height="240">
<tr>
<td>数1:</td>
<td><input type="text" id="num1" placeholder="请输入数1" /></td>
</tr>
<tr>
<td>运算符:</td>
<td>
<select id="fh">
<option value="">请选择运算符</option>
<option value="jia">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td>数2:</td>
<td><input type="text" id="num2" placeholder="请输入数2" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="计算" οnclick="fun()" /></td>
</tr>
<tr>
<td>结果:</td>
<td><input type="text" id="res" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
<script>
function fun(){
// alert(11);
//获取两个数和运算符
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var fh = document.getElementById('fh').value;
var res = document.getElementById('res');
//ajax请求
var xml = new XMLHttpRequest();
// xml.open("get",'test.php?num1='+num1+'&num2='+num2+'&fh='+fh, true);
xml.open("get",'http://www.hgl.com/test.php?num1='+num1+'&num2='+num2+'&fh='+fh, true);
xml.send(null);
xml.onreadystatechange = function(){
if (xml.readyState == 4 && xml.status == 200){
res.value = xml.responseText;
}
}
}
//同源策略,它是由Netscape提出的一个著名的安全策略。
// 现在所有支持JavaScript 的浏览器都会使用这个策略。
// 所谓同源是指,域名,协议,端口相同。
// 当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
// 当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
// 即检查是否同源,只有和百度同源的脚本才会被执行。
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<center>
<h1>简易计算器</h1>
<form>
<table height="240">
<tr>
<td>数1:</td>
<td><input type="text" id="num1" placeholder="请输入数1" /></td>
</tr>
<tr>
<td>运算符:</td>
<td>
<select id="fh">
<option value="">请选择运算符</option>
<option value="jia">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td>数2:</td>
<td><input type="text" id="num2" placeholder="请输入数2" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="计算" οnclick="fun()" /></td>
</tr>
<tr>
<td>结果:</td>
<td><input type="text" id="res" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
<script>
function fun(){
// alert(11);
//获取两个数和运算符
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var fh = document.getElementById('fh').value;
var res = document.getElementById('res');
//ajax请求
var xml = new XMLHttpRequest();
// xml.open("get",'test.php?num1='+num1+'&num2='+num2+'&fh='+fh, true);
xml.open("get",'http://www.hgl.com/test.php?num1='+num1+'&num2='+num2+'&fh='+fh, true);
xml.send(null);
xml.onreadystatechange = function(){
if (xml.readyState == 4 && xml.status == 200){
res.value = xml.responseText;
}
}
}
//同源策略,它是由Netscape提出的一个著名的安全策略。
// 现在所有支持JavaScript 的浏览器都会使用这个策略。
// 所谓同源是指,域名,协议,端口相同。
// 当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
// 当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
// 即检查是否同源,只有和百度同源的脚本才会被执行。
</script>