目录
一.效果图
二.实现思路
整体思路 
1.关键是dom操作
2.设置点击事件
3.数据类型的隐式转换和赋值
三.完整代码
一.效果图
二.实现思路
整体思路
1.关键是dom操作
通过 document.getElementById('id') 获取html中的dom元素
每一个html标签都是一个对象，称为dom对象，每一个标签的属性也是一个对象的属性
设置对象属性的值 obj.属性值 = 'aa'; 获取对象属性的值 obj.属性名
每一个html标签都有style标签，因此可以使用js 操作style，’
如果设置stylr属性，则给标签行间添加一个style属性
2.设置点击事件
// 给按钮设置点击事件 cum是按钮 ，设置点击事件会用到一些函数的内容
cum.onclick = function () {
}
3.数据类型的隐式转换和赋值
//使用隐式转换- ，把获取的数值转化为number类型，不转换默认是string字符串类型，无法进行下一步运算
let v1 = su1.value-0;
let v2 = su2.value-0;
//使用if语句判断选择的运算符号，并把运算结果赋值给相关的输出框
// 获取运算符
let actVal = act.value;
if (actVal == '+') {
su3.value = v1 + v2;
}
三.完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习</title>
</head>
<body><h2>换算</h2><input type="number" name="" id="curry" value=""><button id="bth">计算</button><h2>计算器</h2><input type="number" value="" id="su1"><select name="" id="act"><option value="+">+</option><option value="-">-</option><option value="*">x</option><option value="/">÷</option></select><input type="number" value="" id="su2"><button id="eq">=</button><input type="number" value="" id="su3"></body>
</html>
<script>//获取输入人民币的inputlet rmd = document.getElementById('curry');//获取点击计算的按钮let cum = document.getElementById('bth');console.log(rmd.value);let v0 = rmd.value - 0;// 给按钮设置点击事件cum.onclick = function () {//从新获取用户输入的值，并且隐式转化为number类型let v1 = rmd.value-0;//100的张数let num1 = parseInt(v1/100);// 出去100元剩余的金额 ,456 余数为56，查看余数56中有// 多少张50面值let yu1 = v1%100;// 50的张数let num2 = parseInt(yu1/50);let yu2 = yu1%50;let num3 = parseInt(yu2/20);let yu3 = yu2%20;let num4 = parseInt(yu3/10);let yu4 = yu3%10;let num5 = parseInt(yu3/5);let yu5 = yu4%5;alert(num1 +'张100元'+num2+'张50元'+ num3+'张20元'+ num4+'张10元'+ num5+'张5元'+ yu5+'张1元');}// 获取dom元素let su1 = document.getElementById('su1');let su2 = document.getElementById('su2');let su3 = document.getElementById('su3');let act = document.getElementById('act');let eq = document.getElementById('eq');// 点击等号eq.onclick = function () {let v1 = su1.value-0;let v2 = su2.value-0;// 获取运算符let actVal = act.value;if (actVal == '+') {su3.value = v1 + v2;}if (actVal == '-') {su3.value = v1 - v2;}if (actVal == '*') {su3.value = v1 * v2;}if (actVal == '/') {su3.value = v1 / v2;}};</script>
