window操作基础和office系列,文本编辑工具
逻辑基础(C, JavaScript,java)
数据库基础(MYSQL安装配置和基本的SQL语句)
前端基础(HTML CSS JavaScript)
- 预科javascript
- 简易计算器
1. 界面设计: HTML
html代码和效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<form action="" method="post">
<input type="text" id="num1" placeholder="请输入操作数1"/>
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" placeholder="请输入操作数2"/>
<input type="button" value="="/>
<input type="text" id="result" value="0" />
</form>
</div>
</body>
</html>
2.好看一点: CSS
3.计算功能: 交互 JavaScript
事件驱动:
οnclick="calc()" => 单击事件=”函数()” 当我点击按钮的时候,我们去调用一个叫做calc的函数.
函数写法:
<script type="text/javascript">
function calc () {
// js代码和用户界面(DOM)交互
//就是很多行代码 放在一起(整体) 能完成 特定的功能 的一组代码段
//1 获取第一个文本框的值
//语法结构: document.getElementById("num1").value
let num1 = document.getElementById("num1").value;
//控制台
console.log("num1 :"+num1);
//2获取用户选择的运算符的值
let op = document.getElementById("op").value;
//控制台
console.log("op :"+op);
//3 获取第二个文本框的值
let num2 = document.getElementById("num2").value;
//控制台
console.log("num2 :"+num2);
//4.根据获取 1 2 3值进行计算
//控制台输出
//+
console.log(num1+op+num2);
//我们发现执行+操作实际上完成的是一个拼接过程
//如果想计算:
//方案1:简单
console.log(eval(num1+op+num2)); // "4+5"
//方案2:复杂
//5.将计算的结果显示在result文本框
document.getElementById("result").value=eval(num1+op+num2);
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
