实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
.box{
width: 480px;
height:80px;
background-color: #FF7835;
margin: 50px auto;
padding: 20px;
box-shadow: 5px 5px 5px lightgrey;
border-radius:8px;
}
input{
height:25px;
line-height:25px;
width: 80px;
text-align: left;
padding-left:30px;
}
select,button{
height:30px;
}
</style>
</head>
<body>
<div class="box">
<form>
<input type="text" id="var1" placeholder="数据1"/>
<select id="select" name="method">
<option value="null">操作</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="var2" placeholder="数据2"/>
<button type="button">等于</button>
<input type="text" placeholder="计算机结果" id="result"/>
</form>
</div>
<script>
// 1.获取操作数
let var1 = document.getElementById('var1');
let var2 = document.getElementById('var2');
let select = document.getElementById('select');
let btn = document.getElementsByTagName('button')[0];
let result = document.getElementById('result');
// 2.给按钮添加事件,进行计算
btn.onclick = function () {
//操作数初始化
let data1 = 0;
let data2 = 0;
if(var1.value.length === 0) {
alert('第一个操作数不能为空');
var1.focus();
return false;
}else if (isNaN(var1.value)){
alert('第一个操作数必须为数字');
var1.focus();
return false;
}if(var2.value.length === 0) {
alert('第二个操作数不能为空');
var2.focus();
return false;
}else if (isNaN(var2.value)){
alert('第二个操作数必须为数字');
var2.focus();
return false;
}else{
data1 = parseFloat(var1.value);
data2 = parseFloat(var2.value);
}
//对操作符进行处理
let option = select.value;
let temp = 0;
// let flag = '';
switch (option){
case 'null':
alert('请选择操作类型');
select.focus();
return false;
case '+':
temp = data1 + data2;
break;
case '-':
temp = data1 - data2;
break;
case '*':
temp = data1 * data2;
break;
case '/':
//进行除数不能为零的判断处理
if(data2 === 0){
alert('除数不能为零');
var2.focus();
var2.value = '';
return false;
}else {
temp = data1 /data2;
//四舍五入,仅保留二位小数
//temp = Math.random(temp * 100) / 100;
}
break;
}
result.value = temp;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：本节学习了通过javascript制作简单的计算器和相册，主要知识点获取元素内容和修改元素内容并将内容插入到指定元素中。
