一.效果图

二.实现思路

整体思路

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/66671.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！