H5编写个税计算器(JS代码编写)
javascript代码实现简易计算器

javascript代码实现简易计算器本⽂实例为⼤家分享了javascript实现简易计算器的具体代码,供⼤家参考,具体内容如下编辑了⼏个⼩时研发了⼀个简易好理解的计算器。
不停改Bug,终于改好了。
这是样式这是Css部分<style>#box {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);width: 500px;height: 420px;margin: auto;margin-top: 200px;position: relative;}.reckon {width: 280px;height: 200px;background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);;position: absolute;top: 100px;left: 100px;border: 5px solid #2a2b2c}#input1 {background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);border: none;width: 220px;height: 8px;float: right;margin-top: 10px;margin-right: 20px;outline: none;padding: 10px}ul li {float: left;list-style: none;margin: 4px 2px;border-radius: 3px;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);box-shadow: 2px 2px #ccc;color: #fff;font-weight: "楷体";width: 50px;height: 30px;text-align: center;line-height: 30px;}ul {margin-top: 5px;}ul li:hover {opacity: 0.7;}</style>这是HTML部分<div id="box"><div class="reckon" id="reckon"><input type="text" id="input1"><ul><li class="num">7</li><li class="num">8</li><li class="num">9</li><li class="opcr">+</li><li class="num">4</li><li class="num">5</li><li class="num">6</li><li class="opcr">- </li><li class="num">1</li><li class="num">2</li><li class="num">3</li><li class="opcr">*</li><li class="num">0</li><li id="returnZero">C</li><li id="resule">=</li><li class="opcr">/</li></ul></div></div>/* 定义两个标签来存放符号跟第⼀个值*/<input type="text" id="text1" style="display:none"><input type="text" id="per" style="display:none">html部分的话就是吧所有数字定义为⼀个class名字,把所有运算符号定义为⼀个class 以及定义两个input来存放运算符<script>lis = document.querySelectorAll("#box ul .num")//获取所有的数字opcr = document.querySelectorAll("#box ul .opcr")//获取运算符for (var i = 0; i < lis.length; i++) { //遍历所有的数字lis[i].onclick = function () {input1.value += parseInt(this.innerHTML)//点击input1显⽰}}//遍历所有的运算符for (let i = 0; i < opcr.length; i++) {opcr[i].onclick = function () {if (text1.value == "") {//当存放第⼀个值为空时候text1.value = input1.value//存放第⼀个值input1.value = "" //input框⾥的值为空per.value = this.innerHTML; //存放符号的值为空} else {text1.value = eval(text1.value + per.value + input1.value)//不是空的时候计算per.value = this.innerHTML;//存放符号的值为点击的值input1.value = ""//input框⾥的值为空}}}//等于resule.onclick = function () {input1.value = eval(text1.value + per.value + input1.value)//计算⾥⾯的值 per.value = "" //清空存放per的值text1.value = ""//input框⾥的值为空}//点击清空所有returnZero.onclick = function () {input1.value = ""per.value = ""text1.value = ""}</script>完整部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>简易计算器</title><style>#box {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); width: 500px;height: 420px;margin: auto;margin-top: 200px;position: relative;}.reckon {width: 280px;height: 200px;background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); ;position: absolute;top: 100px;left: 100px;border: 5px solid #2a2b2c}#input1 {background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);border: none;width: 220px;height: 8px;float: right;margin-top: 10px;margin-right: 20px;outline: none;padding: 10px}ul li {float: left;list-style: none;margin: 4px 2px;border-radius: 3px;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); box-shadow: 2px 2px #ccc;color: #fff;font-weight: "楷体";width: 50px;height: 30px;text-align: center;line-height: 30px;}ul {margin-top: 5px;}opacity: 0.7;}</style></head><body><div id="box"><div class="reckon" id="reckon"><input type="text" id="input1"><ul><li class="num">7</li><li class="num">8</li><li class="num">9</li><li class="opcr">+</li><li class="num">4</li><li class="num">5</li><li class="num">6</li><li class="opcr">- </li><li class="num">1</li><li class="num">2</li><li class="num">3</li><li class="opcr">*</li><li class="num">0</li><li id="returnZero">C</li><li id="resule">=</li><li class="opcr">/</li></ul></div></div><input type="text" id="text1" style="display:block"><input type="text" id="per" style="display:block"><script>lis = document.querySelectorAll("#box ul .num")//获取所有的数字opcr = document.querySelectorAll("#box ul .opcr")//获取+——*/for (var i = 0; i < lis.length; i++) { //遍历所有的数字lis[i].onclick = function () {input1.value += parseInt(this.innerHTML)//点击input1显⽰}}//遍历所有的+——*/for (let i = 0; i < opcr.length; i++) {opcr[i].onclick = function () {if (text1.value == "") {//当存放第⼀个值为空时候text1.value = input1.value//存放第⼀个值input1.value = "" //input框⾥的值为空per.value = this.innerHTML; //存放符号的值为空} else {text1.value = eval(text1.value + per.value + input1.value)//不是空的时候计算值 per.value = this.innerHTML;//存放符号的值为点击的值input1.value = ""//input框⾥的值为空}}}//等于resule.onclick = function () {input1.value = eval(text1.value + per.value + input1.value)//计算⾥⾯的值per.value = "" //清空存放per的值text1.value = ""//input框⾥的值为空}//点击清空所有returnZero.onclick = function () {input1.value = ""per.value = ""text1.value = ""}</script></html>以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
H5编写个税计算器(JS代码编写)

H5编写个税计算器(JS代码编写)<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">document.title="个税计算器";//写头部内容。
var header=document.createElement("header");header.innerHTML="个税计算器";document.body.appendChild(header);header.style.backgroundColor="blue";header.style.height="50px";header.style.textAlign="center";header.style.fontSize="30px";header.style.lineHeight="50px";header.style.color="white";//写输入框。
var form=document.createElement("form");document.body.appendChild(form);var input1=document.createElement("input");form.appendChild(input1);input1.type="text";input1.placeholder="基本工资";input1.style.width="100%";input1.style.height="40px";input1.style.marginTop="15px";input1.style.fontSize="30px";input1.innerHTML.placeholder="基本工资/计税";var input2=document.createElement("input");form.appendChild(input2);input2.type="text";input2.placeholder="绩效工资及工龄工资";input2.style.width="100%";input2.style.height="40px";input2.style.marginTop="15px";input2.style.fontSize="30px";input2.style.placeholder="绩效工资/计税";var input3=document.createElement("input");form.appendChild(input3);input3.type="text";input3.placeholder="奖金及其它收入";input3.style.width="100%";input3.style.height="40px";input3.style.marginTop="10px";input3.style.fontSize="30px";input3.style.placeholder="奖金/计税";//写计算按钮var button=document.createElement("button");document.body.appendChild(button);button.innerHTML="开始计算";button.style.backgroundColor="lightskyblue";button.style.textAlign="center";button.style.fontSize="30px";button.style.height="50px";button.style.width="100%";button.style.margin="10px auto";// button.style.margin=""//写主题内容//定义一个主体区域用于存放主体内容。
JS实现简易计算器的7种方法

JS实现简易计算器的7种⽅法先放图(好吧⽐较挫)⽅法⼀:最容易版<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value;}// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法⼆:结构和⾏为分离<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title>#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件// +btns[0].onclick = addHandler;// -btns[1].onclick = subtractHandler;// ×btns[2].onclick = multiplyHandler;// ÷btns[3].onclick = divideHandler;// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value; }// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法三:循环绑定事件<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;<!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件for (var i = 0; i < btns.length; i++) {btns[i].onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':subtractHandler();break;case 'multiply':multiplyHandler();break;case 'divide':divideHandler();break;}};}// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value; }// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法四:提取函数<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /> <input type="button" value="×" class="btn" title="multiply" /> <input type="button" value="÷" class="btn" title="divide" /> </p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件each(btns, function (index, elem ) {elem.onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':subtractHandler();break;case 'multiply':multiplyHandler();break;case 'divide':divideHandler();break;}};});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {sign.innerHTML = symbol;}// 加法function add(num1, num2) {return +num1 + +num2;}// 减法function subtract(num1, num2) {return num1 - num2;}// 乘法function multiply(num1, num2) {return num1 * num2;}// 除法function divide(num1, num2) {return num1 / num2;}// 输出结果}// 加function addHandler() {// sign.innerHTML = '+';updateSign('+');outputResult(add(formerInput.value, laterInput.value));}// 减function subtractHandler() {updateSign('-');outputResult(subtract(formerInput.value, laterInput.value)); }// 乘function multiplyHandler() {updateSign('×');outputResult(multiply(formerInput.value, laterInput.value)); }// 除function divideHandler() {updateSign('÷');outputResult(divide(formerInput.value, laterInput.value)); }</script></body></html>⽅法五:管理代码(找到组织)<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /> <input type="button" value="×" class="btn" title="multiply" /> <input type="button" value="÷" class="btn" title="divide" /> </p></div><script>// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'), btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':multiplyHandler();break;case 'divide':divideHandler();break;}};});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}var operation = {add: function(num1, num2) {return +num1 + +num2;},subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;}};// 输出结果function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}// 加function addHandler() {// sign.innerHTML = '+';updateSign('+');outputResult(operation.add(calculatorElem.formerInput.value, terInput.value));}// 减function subtractHandler() {updateSign('-');outputResult(operation.subtract(calculatorElem.formerInput.value, terInput.value)); }// 乘function multiplyHandler() {updateSign('×');outputResult(operation.multiply(calculatorElem.formerInput.value, terInput.value)); }// 除function divideHandler() {updateSign('÷');outputResult(operation.divide(calculatorElem.formerInput.value, terInput.value)); }</script></body></html>⽅法六:OCP开放--封闭原则<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /><input type="button" value="×" class="btn" title="multiply" /><input type="button" value="÷" class="btn" title="divide" /><input type="button" value="%" class="btn" title="mod" /><input type="button" value="^" class="btn" title="power" /><!-- <input type="button" value="1/x" class="btn" title="invert" /> --></p></div><script>// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'),btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {updateSign(this.value);outputResult(operate(this.title, calculatorElem.formerInput.value, terInput.value)); };});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}// 运算function operate(name, num1, num2) {if (!operation[name]) throw new Error('不存在名为' + name + '的运算⽅法!');return operation[name](num1, num2);}var operation = {add: function(num1, num2) {return +num1 + +num2;},subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;},addOperation: function (name, fn) {if (!this[name]) {this[name] = fn;}return this;}};operation.addOperation('mod', function (num1, num2) {return num1 % num2;}).addOperation('power', function (base, power) {return Math.pow(base, power);function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}</script></body></html>⽅法七:模块化<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /><input type="button" value="×" class="btn" title="multiply" /><input type="button" value="÷" class="btn" title="divide" /><input type="button" value="%" class="btn" title="mod" /><input type="button" value="^" class="btn" title="power" /><input type="button" value="1/x" class="btn" title="invert" /></p></div><script>(function () {// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'),btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {updateSign(this.value);outputResult(operate(this.title, calculatorElem.formerInput.value, terInput.value)); };});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}// 运算var operate = (function () {subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;},addOperation: function (name, fn) {if (!operation[name]) {operation[name] = fn;}return operation;}};function operate(name) {if (!operation[name]) throw new Error('不存在名为' + name + '的运算⽅法!');return operation[name].apply(operation, [].slice.call(arguments, 1, arguments.length)); }operate.addOperation = operation.addOperation;return operate;})();operate.addOperation('mod', function (num1, num2) {return num1 % num2;}).addOperation('power', function (base, power) {return Math.pow(base, power);}).addOperation('invert', function (num) {return 1 / num;});// 输出结果function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}})();</script></body></html>。
JavaScript计算器网页版实现代码分享

JavaScript计算器⽹页版实现代码分享JavaScript⽹页计算器代码,该计算器是⽤DW写的!HTML篇<html<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>计算器</title><link href="style/calculator.css" rel="stylesheet" type="text/css" /><script src="JavaScript/calculator.js"></script>></head><body ><form id="form1" name="form1" method="post" action=""><table width="320" border="1" cellpadding="0" cellspacing="0" class="trb" id="calculator"><tr><td height="100" colspan="4" align="left" valign="top"><label for="txt"></label><input name="txt" type="text" class="txt" id="txt" value="0" onfocus="this.blur();"/></td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="deleteAll();">C</td><td width="80" height="40" align="center" valign="middle" onclick="Backspace();">←</td><td width="80" height="40" align="center" valign="middle" onclick="sign();">±</td><td width="80" height="40" align="center" valign="middle" class="operator" onclick="add();">+</td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="command(7);">7</td><td width="80" height="40" align="center" valign="middle" onclick="command(8);">8</td><td width="80" height="40" align="center" valign="middle" onclick="command(9);">9</td><td width="80" height="40" align="center" valign="middle" class="operator" onclick="subtract();">-</td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="command(4);">4</td><td width="80" height="40" align="center" valign="middle" onclick="command(5);">5</td><td width="80" height="40" align="center" valign="middle" onclick="command(6);">6</td><td width="80" height="40" align="center" valign="middle" class="operator" onclick="multiply();">×</td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="command(1);">1</td><td width="80" height="40" align="center" valign="middle" onclick="command(2);">2</td><td width="80" height="40" align="center" valign="middle" onclick="command(3);">3</td><td width="80" height="40" align="center" valign="middle" class="operator" onclick="divide();">÷</td></tr><tr><td width="80" height="40" align="center" valign="middle" onclick="command(0);">0</td><td width="80" height="40" align="center" valign="middle" onclick="dot();">▪</td><td height="40" colspan="2" align="center" valign="middle" bgcolor="#CC6600" onclick="equal();">=</td></tr></table><p> </p><p> </p></form></body></html>CSS篇@charset "utf-8";/* CSS Document */.trb {font-family: Georgia, "Times New Roman", Times, serif;font-size: 24px;color: #FFF;background-color: #333;text-align: center;border: 1px solid #999;}.operator {background-color: #333;font-size: 18px;font-family: Verdana, Geneva, sans-serif;}td:hover{font-size: 28px;cursor:pointer;}.txt {height: 100px;width: 320px;background-color: #333;text-align: left;vertical-align: bottom;color: #FFF;font-size: 30px;}JavaScript篇//实现计算器功能//结果var result = 0;//显⽰框中的数(默认为“0”)var screenNum = "0";//数的初始输⼊状态,默认为0;当按了任意运算符键后,数的输⼊状态变为1var state = 0;//防⽌重复按运算符键var avoidRepeat = true;//运算符键(默认为0--等于号)var operator = 0;//第⼀步:获取按键值,并显⽰在显⽰框中function command(num) {//获取显⽰框的值var str = String(document.form1.txt.value);//对该值进⾏判断,如果该值不为"0",且输⼊状态0,则返回前者,否则为""(双重三⽬运算) //两个判断条件:1、显⽰框中值是否为"0", 2、数的输⼊状态str = (str != "0")?((state == 0)?str:""):"";//给当前值追加字符str = str + String(num);//刷新显⽰document.form1.txt.value = str;//按了任意数字键后,数的输⼊状态变为0state = 0;//重置防⽌重复按键avoidRepeat = true;}//第⼆步:确保输⼊的数是合法的,每个数⾄多只有⼀个⼩数点function dot() {var str = String(document.form1.txt.value);//若该数前⾯未接运算符,则返回前值,否则为"0";str = (state == 0)?str:"0";//Java⾥String有length()⽅法,⽽JS⾥String有length属性for(i=0;i<=str.length;i++) {//substr()获取下标从i开始,个数为1个的⼦串if(str.substr(i,1)==".") {//当存在⼩数点时,则程序终⽌return;}}//若⽆⼩数点,则在该数后⾯加上str = str+".";//刷新显⽰document.form1.txt.value = str;//恢复数的初始输⼊状态state = 0;}//第三步:处理退格键function Backspace() {var str= String(document.form1.txt.value);//若显⽰框中数不等于"0",则返回str,否则返回""str = (str != "0")?str:"";str = str.substr(0,str.length-1);//若str不为"",则返回⼦串str,否则str="0" str = (str != "")?str:"0";//刷新显⽰document.form1.txt.value = str;}//第四步:删除所有function deleteAll() {//显⽰框设为"0"document.form1.txt.value = "0";//恢复数的初始输⼊状态state = 0;//恢复运算符键,默认为0--等于号operator = 0;}//第五步:加法function add() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//更改运算符键,1--加号operator = 1;}//第六步:减法function subtract() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//2--减号operator = 2;}//第七步:乘法function multiply() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//3--乘号operator = 3;}//第⼋步:除法function divide() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//4--除号operator = 4;}//第九步:正负号function sign() {//5--正负号operator = 5;//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//0--等于号operator = 0;//正负号可以连续按avoidRepeat = true;}//第⼗步:等于function equal() {//调⽤计算函数calculate();//更改数的输⼊状态state = 1;//0--等于号operator = 0;}//第⼗⼀步:计算function calculate() {//获取显⽰框中的值screenNum = Number(document.form1.txt.value);if(avoidRepeat) {switch(operator){case 1:result = result + screenNum;document.form1.txt.value = result;break;case 2:result = result - screenNum;document.form1.txt.value = result;break;case 3:result = result * screenNum;document.form1.txt.value = result;break;case 4:if(screenNum == 0){//设置显⽰框的值document.getElementById("txt").value="除数不能为0";//3s后,执⾏清屏函数setTimeout(clearScreen,3000);}else{result = result/screenNum;document.form1.txt.value = result;}break;case 5:result = (-1)*screenNum;document.form1.txt.value = result;break;case 0:result = screenNum;document.form1.txt.value = result;break;}//当按了运算符键后,不能再按avoidRepeat = false;}}//第⼗⼆步:清屏函数function clearScreen() {document.getElementById("txt").value = "0";}关于计算器的精彩⽂章请查看,更多精彩等你来发现!以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
个人所得税计算器

个人所得税计算器1. 简介个人所得税是指个人根据其取得的各项所得应缴纳的税款。
根据国家相关法律法规的规定,个人所得税的计算是根据个人所得的收入额以及相应的税率来确定的。
为了方便个人计算自己的个人所得税,可以使用个人所得税计算器来快速计算应缴纳的税款。
2. 计算原理个人所得税计算的基本原理是根据税法规定的税率表来计算个人应缴纳的税款。
税率表根据个人年度收入额不同,划分为不同的档次,每个档次对应不同的税率。
个人所得税计算器根据个人所得的收入额以及相应的税率表,自动计算个人应缴纳的税款。
3. 计算步骤使用个人所得税计算器的步骤如下:1.输入个人年度收入额2.根据税率表查找对应的税率3.根据所得收入额和税率计算应缴纳的税款4.输出计算结果4. 税率表示例应纳税所得额(元)税率速算扣除数(元)不超过3,000 3% 0超过3,000至12,000 10% 210超过12,000至25,000 20% 1,410超过25,000至35,000 25% 2,660超过35,000至55,000 30% 4,410超过55,000至80,000 35% 7,160超过80,000 45% 13,910注:以上税率表仅为示例,实际税率表会根据国家相关法规而有所不同。
5. 代码实现示例下面是使用Python语言实现的个人所得税计算器示例代码:```python def calculate_personal_income_tax(income): tax_rate_table = [ (3000, 0.03, 0), (12000, 0.10, 210), (25000, 0.20, 1410), (35000, 0.25, 2660), (55000, 0.30, 4410), (80000, 0.35, 7160), (float(’inf’), 0.45, 13910) ]tax = 0for threshold, rate, quick_deduction in tax_rate_table: if income <= threshold:tax += income * rate - quick_deductionbreakelse:tax += threshold * rate - quick_deduction income -= thresholdreturn taxdef main(): income = float(input(。
Javascript实现简单计算器实例代码

Javascript实现简单计算器实例代码效果图:刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器⽐有点⼩瑕疵。
代码:<!DOCTYPE html><html><head><meta charset="utf-8"><title>js简单计算器</title><style type="text/css">*{margin:0px;padding:0px;}input{margin-top:2px;margin-left:2px;width:230px;height:30px;text-align:right;}button{margin-top:2px;margin-left:2px;width:50px;height:50px;}#container{margin-left:1px;border:1px solid #E4E4E4;background:#BBBBBB;width:235px;height:215px;}</style><script>function onLoad(){//加载完毕后光标⾃动对应到输⼊框document.getElementById("input").focus();}//读取按钮的值,传给输⼊框function inputEvent(e){//把val的值改为每个事件的innerHTML值var val=e.innerHTML;//获取input标签var xsval=document.getElementById("input");//标签⾥的value连接每个事件的innerHTML值xsval.value+=val;}//计算出结果function inputOper(){var xsval=document.getElementById("input");xsval.value=eval(document.getElementById("input").value);}//清零function clearNum(){var xsval=document.getElementById("input");xsval.value="";document.getElementById("input").focus();}//退格function backNum(){var arr=document.getElementById("input");arr.value=arr.value.substring(0,arr.value.length-1);}</script></head><body onload="onLoad()"><input id="input" type="text"><div id="container"><div><button onclick="inputEvent(this)">1</button><button onclick="inputEvent(this)">2</button><button onclick="inputEvent(this)">3</button><button onclick="inputEvent(this)">+</button></div><div><button onclick="inputEvent(this)">4</button><button onclick="inputEvent(this)">5</button><button onclick="inputEvent(this)">6</button><button onclick="inputEvent(this)">-</button></div><div><button onclick="inputEvent(this)">7</button><button onclick="inputEvent(this)">8</button><button onclick="inputEvent(this)">9</button><button onclick="inputEvent(this)">*</button></div><div><button onclick="inputEvent(this)">0</button><button onclick="inputEvent(this)">.</button><button onclick="inputOper(this)">=</button><button onclick="inputEvent(this)">/</button></div></div><button onclick="clearNum()">清零</button><button onclick="backNum()">退格</button></body></html>感谢阅读,希望能帮助到⼤家,谢谢⼤家对本站的⽀持!。
基于html+css+js实现简易计算器代码实例

基于html+css+js实现简易计算器代码实例使⽤html+css+js实现简易计算器,效果图如下:html代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>calculator</title><link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" ><script type="text/javascript" src="contain.js"></script><title>Document</title></head><body><div class="calculator"><form name="calculator"><input type="text" id="display" value=""><br><input type="button" class="btn number txt" value="TYNAM"><input type="button" id="clear" class="btn number" value="AC" onclick="cleardisplay();"><input type="button" class="btn number" value="<-" onclick="del();"><input type="button" class="btn operator" value="/" onclick="get(this.value);"><br><input type="button" class="btn number" value="7" onclick="get(this.value);"><input type="button" class="btn number" value="8" onclick="get(this.value);"><input type="button" class="btn number" value="9" onclick="get(this.value);"><input type="button" class="btn operator" value="*" onclick="get(this.value);"><br><input type="button" class="btn number" value="4" onclick="get(this.value);"><input type="button" class="btn number" value="5" onclick="get(this.value);"><input type="button" class="btn number" value="6" onclick="get(this.value);"><input type="button" class="btn operator" value="+" onclick="get(this.value);"><br><input type="button" class="btn number" value="1" onclick="get(this.value);"><input type="button" class="btn number" value="2" onclick="get(this.value);"><input type="button" class="btn number" value="3" onclick="get(this.value);"><input type="button" class="btn operator" value="-" onclick="get(this.value);"><br><input type="button" class="btn number" value="0" onclick="get(this.value);"><input type="button" class="btn number" value="." onclick="get(this.value);"><input type="button" class="btn operator equal" value="=" onclick="calculates();"></form></div></body></html>CSS代码如下:border: none;font-family: 'Open Sans', sans-serif;margin: 0;padding: 0;}.calculator {background-color: #fff;height: 600px;margin: 50px auto;width: 600px;}form {background-color: rgb(75, 70, 71);padding: 5px 1px auto;width: 245px;}.btn {outline: none;cursor: pointer;font-size: 20px;height: 45px;margin: 5px 0 5px 10px;width: 45px;}.btn:first-child {margin: 5px 0 5px 10px;}#display {outline: none;background-color: #dededc;color: rgb(75, 70, 71);font-size: 40px;height: 47px;text-align: right;width: 224px;margin: 10px 10px auto;}.number {background-color: rgb(143, 140, 140);color: #dededc;}.operator {background-color: rgb(239, 141, 49);color: #ffffff;}.equal{width: 105px;}.txt{font-size:12px;background: none;}JS代码如下:/* display clear */function cleardisplay() {document.getElementById("display").value = "";}/* del */function del() {var numb = "";numb = document.getElementById("display").value;for(i=0;i<numb.length;i++){document.getElementById("display").value = numb.substring(0,numb.length-1); if(numb == '')document.getElementById("display").value = '';}}}/* recebe os valores */function get(value) {document.getElementById("display").value += value;}/* calcula */function calculates() {var result = 0;result = document.getElementById("display").value;document.getElementById("display").value = "";document.getElementById("display").value = eval(result);};以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
用python写一个北京市的个税计算器

⽤python写⼀个北京市的个税计算器#应纳税的钱:税前收⼊-5000元(起征点)-专项扣除(五险⼀⾦等)#⼯资个税的计算公式为:#个⼈所得税=应纳税的钱×适⽤税率-速算扣除数'''1、全⽉应纳税所得额不超过3000元:税率:3%; 速算扣除数(元):02、全⽉应纳税所得额超过3000元⾄12000元:税率:10%; 速算扣除数(元):2103、全⽉应纳税所得额超过12000元⾄25000元:税率:20%; 速算扣除数(元):14104、全⽉应纳税所得额超过25000元⾄35000元:税率:25%; 速算扣除数(元):26605、全⽉应纳税所得额超过35000元⾄55000元:税率:30%; 速算扣除数(元):44106、全⽉应纳税所得额超过55000元⾄80000元:税率:35%; 速算扣除数(元):71607、全⽉应纳税所得额超过80000元:税率:45%; 速算扣除数(元):15160'''#定义税前⼯资Tax_salary = int(input("请输⼊你的⼯资:"))if Tax_salary > 5000:#应纳税的⼯资Taxable_salary = Tax_salary - 5000 - Tax_salary * 0.22if Taxable_salary <= 3000:# 个⼈所得税Personal_income_taxes = Taxable_salary * 0.03 - 0elif Taxable_salary > 3000 and Taxable_salary <= 12000:Personal_income_taxes = Taxable_salary * 0.1 - 210elif Taxable_salary > 12000 and Taxable_salary <= 25000:Personal_income_taxes = Taxable_salary * 0.2 - 1410elif Taxable_salary > 25000 and Taxable_salary <= 35000:Personal_income_taxes = Taxable_salary * 0.25 - 2660elif Taxable_salary > 35000 and Taxable_salary <= 55000:Personal_income_taxes = Taxable_salary * 0.3 - 4410elif Taxable_salary > 55000 and Taxable_salary <= 80000:Personal_income_taxes = Taxable_salary * 0.35 - 7160elif Taxable_salary > 80000:Personal_income_taxes = Taxable_salary * 0.45 - 15160#五险⼀⾦Five_one_gold = Tax_salary * 0.22#实发⼯资Net_pay = Tax_salary - Personal_income_taxes - Five_one_goldprint("本⽉实发⼯资(税后)为:{}".format(Net_pay))else:print("本⽉实发⼯资(税后)为:{}".format(Tax_salary))执⾏结果演⽰:。
信息技术作业使用JavaScript实现一个简单的计算器程序

信息技术作业使用JavaScript实现一个简单的计算器程序使用JavaScript实现一个简单的计算器程序JavaScript是一种广泛用于网页开发的脚本语言,可以方便地与HTML结合使用。
在本篇文章中,我们将使用JavaScript编写一个简单的计算器程序。
该程序将具备基本的加减乘除功能,以及清零和回退操作。
程序实现的核心是通过JavaScript的事件监听机制,监听用户的点击事件,并根据点击按钮的不同进行相应的处理。
下面是具体的实现步骤:1. 页面布局首先,我们需要在HTML中搭建计算器的基本界面。
可以使用HTML的表格元素来实现计算器的按钮布局,如下所示:```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单计算器</title><script src="calculator.js"></script></head><body><table><tr><td colspan="4"><input type="text" id="result" readonly></td> </tr><tr><td><button onclick="appendNumber(7)">7</button></td><td><button onclick="appendNumber(8)">8</button></td><td><button onclick="appendNumber(9)">9</button></td><td><button onclick="appendOperator('+')">+</button></td> </tr><tr><td><button onclick="appendNumber(4)">4</button></td><td><button onclick="appendNumber(5)">5</button></td><td><button onclick="appendNumber(6)">6</button></td><td><button onclick="appendOperator('-')">-</button></td></tr><tr><td><button onclick="appendNumber(1)">1</button></td> <td><button onclick="appendNumber(2)">2</button></td> <td><button onclick="appendNumber(3)">3</button></td> <td><button onclick="appendOperator('*')">*</button></td> </tr><tr><td><button onclick="appendNumber(0)">0</button></td> <td><button onclick="appendNumber('.')">.</button></td> <td><button onclick="calculate()">=</button></td><td><button onclick="appendOperator('/')">/</button></td> </tr><tr><td colspan="4"><button onclick="clearResult()">清零</button></td></tr><tr><td colspan="4"><button onclick="backspace()">回退</button></td></tr></table></body></html>```在上面的代码中,我们使用`<input>`元素来显示计算结果,使用`<button>`元素来作为按钮,通过调用相应的JavaScript函数来执行对应的操作。
个人所得税速算法jsp

addtion: 速算扣除数计算方法说明。
目前是月收入超过2000起征,2008年3月开始上调到此标准,此前是1600/也就是说,低于起征点的,不需交纳个人所得税。
说明:起征点变化以后,税率和计算方法保持不变,个人所得税计算公式没有变化应纳个人所得税税额=(应纳税所得额-扣除标准)*适用税率- 速算扣除数扣除标准2000元/月(2008年3月1日起调高为2000元)个人所得税计算公式1不超过500元的部分,税率5%,速算扣除数为0;2超过500元至2000元的部分,税率10%,速算扣除数为253超过2000元至5000元的部分,税率15 %,速算扣除数为1254超过5000元至20000元的部分,税率20 %,速算扣除数为375 5超过20000元至40000元的部分,税率25%,速算扣除数为1375-----------------------------------------------------------注:估计大多数人可能只须记住前面几项税率和速算扣除数。
***速算扣除数计算方法:*****1.速算扣除数怎么来的?很多朋友说那个扣除数得硬记么?不是这样的,他是可以推算出来的--只要是推算过的,也就好记了吧,如下:拿第3档数据说明:125 =75+50 =1500*5%+500*10%=1500*(15%-10%)+500*(15%-5%)没想到这篇小博文,能给不少朋友以帮助,想来是一件快乐的事--助人为乐吗!为了使更多的特别是对税务、个人所得税少有了解的朋友能看明白,再补充一点容如上:(补充红字部分)。
如果不清楚,可以提问,本人会及时解答。
----重要友情提示本博劳动法、个人所得税相关专辑的推出,得到一位法律界朋友的大力帮助,在下无以报答,暂帮其展示一下广告聊表意!协助博主投桃报,亦或为了能继续得到法律界权威人士的咨询从而将本专辑办的更好,各位朋友在阅读、交流本专辑的同时,能否友情点击一下下面所列的广告?!-------------------------------------------------------------6超过40000元至60000元的部分,税率30%,速算扣除数为33757超过60000元至80000元的部分,税率35%,速算扣除数为6375 8超过80000元至100000元的部分,税率40%,速算扣除数为10375 9超过100000元的部分,税率45%,速算扣除数为15375你每月收入减去三险一金,减去起征点(2000),剩下的部分套用上面的公式。
js写的计算器代码

{ Form1.result.value="";}
last=panduan;
Form1.result.value=Form1.result.value+panduan;
}
if(panduan==5)
{ if(last=="+")
}
function clear()
{alert("asdf");
Form1.result1.value="";
Form1.result2.value="";
Form1.result3.value="";
}
function qingchu()
{
}
if(panduan==0)
{ if(last=="+")
{ Form1.result.value="";}
if(last=="-")
{ Form1.result.value="";}
if(last=="*")
{ Form1.result.value="";}
last=panduan ;
Form1.result.value=Form1.result.value+panduan;
}
if(panduan==6)
{ if(last=="+")
{ Form1.result.value="";}
HTML5+css+JavaScript进行四则运算简易计算器(用Grid网格实现)

HTML5+JavaScript:<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><form><input id="textid" type="text" style="width: 350px; height: 40px; background-color: antiquewhite; margin: 10px; font-size: 30px;" placeholder="Grid列表简易计算器"/></form><div class="container"><div class="item-1" onclick="empty()" value="C">C</div><div class="item-2" onclick="addStr('/')">÷</div><div class="item-3" onclick="addStr('*')">X</div><div class="item-4" onclick="del()">退格</div><div class="item-5" onclick="addStr(7)">7</div><div class="item-6" onclick="addStr(8)">8</div><div class="item-7" onclick="addStr(9)">9</div><div class="item-8" onclick="addStr('-')">-</div><div class="item-9" onclick="addStr(4)">4</div><div class="item-10" onclick="addStr(5)">5</div><div class="item-11" onclick="addStr(6)">6</div><div class="item-12" onclick="addStr('+')">+</div><div class="item-13" onclick="addStr(1)">1</div><div class="item-14" onclick="addStr(2)">2</div><div class="item-15" onclick="addStr(3)">3</div><div class="item-16" onclick="calculates()">=</div><div class="item-17" onclick="percent()">%</div><div class="item-18" onclick="addStr(0)">0</div><div class="item-19" onclick="addStr('.')">.</div></div><script>var inputvalue = document.getElementById("textid");function addStr(x){inputvalue.value = inputvalue.value + x;}function calculates(){inputvalue.value = eval(inputvalue.value);}function empty(){inputvalue.value = null;}function del(){inputvalue.value = inputvalue.value.substr(0,inputvalue.value.length-1);}function percent(){inputvalue.value = inputvalue.value/100;}</script></body></html>Css:.container {display: grid;width: 320px;height: 320px;margin: 10px;grid-template-columns: 80px 80px 80px 80px;grid-template-rows: 80pxpx 80px 80px;column-gap: 10px;row-gap: 10px;grid-template-areas:"a b c d""e f g h""i j k l""m n o p""q r s p";}.item-1{grid-area: a;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-2{grid-area: b;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-3{grid-area: c;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-4{grid-area: d;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-5{grid-area: e;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-6{grid-area: f;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-7{grid-area: g;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-8{grid-area: h;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-9{grid-area: i;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-10{grid-area: j;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-11{grid-area: k;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-12{grid-area: l;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-13{grid-area: m;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-14{grid-area: n;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-15{grid-area: o;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-16{grid-area: p;background-color: aquamarine;font-size:30px;text-align: center;line-height: 100px;cursor: pointer;}.item-17{grid-area: q;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-18{grid-area: r;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}.item-19{grid-area: s;background-color: aquamarine;font-size:30px;text-align: center;line-height: 50px;cursor: pointer;}。
JavaScript实现简单的计算器功能

JavaScript实现简单的计算器功能本⽂实例为⼤家分享了JavaScript实现简单计算器功能的具体代码,供⼤家参考,具体内容如下具体要求如下:实现代码:<html><head><meta charset="utf-8"><title>计算器</title><script>function myck(type){var num1 = document.getElementById("num1");var num2 = document.getElementById("num2");if(type==1){// 计算操作var result = parseInt(num1.value) + parseInt(num2.value);alert(result);document.getElementById("resultDiv").innerText ="最终计算结果:"+ result;}else if(type==2){var result = parseInt(num1.value) - parseInt(num2.value);alert(result);document.getElementById("resultDiv").innerText ="最终计算结果:"+ result;}else if(type==3){var result = parseInt(num1.value) * parseInt(num2.value);alert(result);document.getElementById("resultDiv").innerText ="最终计算结果:"+ result;}else if(type==4){if(confirm("是否正确清空?")){// 清空num1.value = "";num2.value = "";document.getElementById("resultDiv").innerText="";}}}</script></head><body><div style="margin-top: 100px;margin-left: 500px;"><span style="font-size: 60px;">计算器</span></div><div><div class="innerDiv" style="margin-left: 490px;">数 字1:<input id="num1" type="number" placeholder="请输⼊数字1"></div></div><div><div class="innerDiv" style="margin-left:490px;">数 字2:<input id="num2" type="number" placeholder="请输⼊数字2"></div></div><div><div style="margin-left: 500px;" class="innerDiv"><input type="button" onclick="myck(1)" value="相 加"><input type="button" onclick="myck(2)" value="相 减"><input type="button" onclick="myck(3)" value="相 乘"><input type="button" onclick="myck(4)" value="清 空"></div></div><div id="resultDiv"></div></body><style>.innerDiv{margin-left: 420px;margin-top: 20px;}</style></html>以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
javascript制作计算器源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="description" content="javascript计算器,由梅强强制作" /> <title>计算器</title><script type="text/javascript">alert("本计算器由梅强强制作QQ:826219395");function getResult(type){if(checkData()){}var no1=parseInt(document.jisuanqi.no1.value);var no2=parseInt(document.jisuanqi.no2.value);var result;switch(type){case '+':result = no1+no2;break;case '-':result =no1-no2;break;case '*':result =no1*no2;break;case '/':result =no1/no2;break;case '%':result =no1%no2;break;}document.jisuanqi.result.value=result;}function checkData(){if(document.jisuanqi.no1.value==""){alert("第一个数字不能为空!请重新输入");return;}if(document.jisuanqi.no2.value==""){alert("第二个不能为空!请重新输入");return;}if(document.jisuanqi.no1.value=="0"){alert("第一个不能为零!请重新输入");return;}if(isNaN(document.jisuanqi.no1.value)){alert("第一个不是数字!请重新输入");return;}if(isNaN(document.jisuanqi.no2.value)){alert("第二个不是数字!请重新输入");}}</script></head><body><font size="6" color="#000000">本计算器由梅强强制作<br>QQ:826219395</font><p align="center" /><form name="jisuanqi">no1:<input name="no1" /><br>no2:<input name="no2" /><br>result:<input name="result" /><br><input type="button" value="+" onclick="getResult('+')" /> <input type="button" value="-" onclick="getResult('-')" /> <input type="button" value="*" onclick="getResult('*')" /> <input type="button" value="/" onclick="getResult('/')" /><input type="button" value="%" onclick="getResult('%')" /></form></p></body></html>。
Javascript实现计算个人所得税

Javascript实现计算个⼈所得税TABLE {BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-TOP: 0px;CSS:BORDER-BOTTOM: medium none}TD {BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-TOP: 0px;BORDER-BOTTOM: medium none }IMG {BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-TOP: 0px;BORDER-BOTTOM: medium none }FORM {BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-TOP: 0px;BORDER-BOTTOM: medium none }TD {FONT-SIZE: 12px}P {FONT-SIZE: 12px}LI {FONT-SIZE: 12px}SELECT {FONT-SIZE: 12px}INPUT {FONT-SIZE: 12px}TEXTAREA {FONT-SIZE: 12px}SELECT {BORDER-RIGHT: #49b8e3 1px solid; BORDER-TOP: #49b8e3 1px solid; BORDER-LEFT: #49b8e3 1px solid; BORDER-BOTTOM: #49b8e3 1px solid; BACKGROUND-COLOR: #e2f4ff}INPUT {BORDER-RIGHT: #49b8e3 1px solid; BORDER-TOP: #49b8e3 1px solid; BORDER-LEFT: #49b8e3 1px solid; BORDER-BOTTOM: #49b8e3 1px solid; BACKGROUND-COLOR: #e2f4ff}TEXTAREA {BORDER-RIGHT: #49b8e3 1px solid; BORDER-TOP: #49b8e3 1px solid; BORDER-LEFT: #49b8e3 1px solid; BORDER-BOTTOM: #49b8e3 1px solid; BACKGROUND-COLOR: #e2f4ff}.f14 {FONT-SIZE: 14px}.lh19 {LINE-HEIGHT: 19px}A:hover {COLOR: #ff0000}.b1 {BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid}.b2 {BORDER-BOTTOM: #ffffff 1px solid}.b3 {BORDER-RIGHT: #cfe9f8 5px solid; BORDER-TOP: #cfe9f8 5px solid; BORDER-LEFT: #cfe9f8 5px solid; BORDER-BOTTOM: #cfe9f8 5px solid}.cRed {COLOR: #cc0000}.cGary {COLOR: #6c6c6c}.cBlue {COLOR: #066cd2}.linkBlankUl A:link {COLOR: #000; TEXT-DECORATION: underline}.linkBlankUl A:visited {COLOR: #000; TEXT-DECORATION: underline}.linkBlankUl A:active {COLOR: #f00; TEXT-DECORATION: underline}.linkBlankUl A:hover {COLOR: #f00; TEXT-DECORATION: underline}.linkBlank A:link {COLOR: #000; TEXT-DECORATION: none}.linkBlank A:visited {COLOR: #000; TEXT-DECORATION: none}.linkBlank A:active {COLOR: #f00; TEXT-DECORATION: none}.linkBlank A:hover {COLOR: #f00; TEXT-DECORATION: none}.linkRed {COLOR: #7b0000COLOR: #7b0000; text-: none}.linkRed A:visited {COLOR: #7b0000; text-: none}.linkRed A:active {COLOR: #7b0000; text-: underline}.linkRed A:hover {COLOR: #7b0000; text-: underline}.linkBlue A:link {COLOR: #003399; TEXT-DECORATION: underline}.linkBlue A:visited {COLOR: #003399; TEXT-DECORATION: underline}.linkBlue A:active {COLOR: #0268ce; TEXT-DECORATION: underline}.linkBlue A:hover {COLOR: #0268ce; TEXT-DECORATION: underline}HTML:</STYLE><SCRIPT language=javascript><!--function warnInvalid (theField, s){ newAlert(s);theField.focus();theField.select();return false;}function isNumber(s) //字符串是否由数字构成{var digits = "0123456789";var i = 0;var sLength = s.length;while ((i < sLength)){var c = s.charAt(i);if (digits.indexOf(c) == -1) returnfalse;i++;}return true;}function CheckNumeric(theField,s) //整数或⼩数{var ret = true;var i;var str=theField.value;var Temp = new Number(str);if (str.length == 0){return warnInvalid (theField, s);ret=false;}if (ret){if (Temp.valueOf() != Temp.valueOf()){return warnInvalid(theField, s);}}return ret;}function validateFormInfo(form){var strvar SumTovar srSumvar qzSum,InsuSum,TSum,yzSum,fySums=document.form1.select.selectedIndex+1;srSum=document.form1.textfield.value;if (s.length<1){s=1;}qzSum=document.form1.textfield3.value;InsuSum=document.form1.textfield2.value;yzSum=document.form1.textfield22.value;fySum=document.form1.textfield32.value;TSum=srSum-qzSum-InsuSum;/*newAlert_Top("sr="+srSum+"qz="+qzSum+"INsu="+InsuSum+"yz="+yzSum+"fy="+ fySum);*/if (form == null) return true;str = "请正确输⼊收⼊⾦额!";if (!CheckNumeric(form.elements["textfield"],str)) return false; //收⼊⾦额if (document.all.select.selectedIndex==0){str = "请正确输⼊社会保险费!";if (!CheckNumeric(form.elements["textfield2"],str)) return false; //各项社会保险费str = "请正确输⼊起征额!";if (!CheckNumeric(form.elementsif (document.all.select.selectedIndex==8){str = "请正确输⼊财产原值!";if (!CheckNumeric(form.elements["textfield22"],str)) return false; //各项社会保险费str = "请正确输⼊合理交易费⽤!";if (!CheckNumeric(form.elements["textfield32"],str)) return false; //起征额}switch (s){case 1:document.form1.textfield4.value=Rate1(TSum);break;case 2:document.form1.textfield4.value=Rate2(srSum);break;case 3:document.form1.textfield4.value=Rate2(srSum);break;case 4:document.form1.textfield4.value=Rate3(srSum);break;case 5:document.form1.textfield4.value=R4568(srSum)*70/100; break;case 6:document.form1.textfield4.value=R4568(srSum);break;case 7:document.form1.textfield4.value=srSum*20/100;break;case 8:document.form1.textfield4.value=R4568(srSum);break;case 9:if (srSum-yzSum-fySum<0){newAlert_Top("都亏了!不⽤交税了!"); document.form1.textfield4.value=0;}if (srSum-yzSum-fySum>0){document.form1.textfield4.value=(srSum-yzSum-fySum)*20/100;}break;case 10:document.form1.textfield4.value=srSum*20/100;break;case 11:document.form1.textfield4.value=srSum*20/100;break;}}//--------------------------------以下是算法--------------//---------------------------------------function Rate1(XSum)//⼯资薪⾦{var Rate;var Balan;var TSum;if (XSum<=500){Rate=5;Balan=0;}if ((500<XSum) && (XSum<=2000)){Rate=10;Balan=25;}if ((2000<XSum) && (XSum<=5000)){Rate=15;Balan=125;}if ((5000<XSum) && (XSum<=20000)){Rate=20;Balan=375;}if ((20000<XSum) && (XSum<=40000))if ((40000<XSum) && (XSum<=60000)) {Rate=30;Balan=3375;}if ((60000<XSum) && (XSum<=80000)) {Rate=35;Balan=6375;}if ((80000<XSum) && (XSum<=100000)) {Rate=40;Balan=10375;}if (XSum>100000){Rate=45;Balan=15375;}TSum=(XSum*Rate)/100-Balanif (TSum<0){TSum=0}return TSum}function Rate2(XSum){var Rate;var Balan;var TSum;if (XSum<=5000){Rate=5;Balan=0;}if ((5000<XSum) && (XSum<=10000)) {Rate=10;Balan=250;}if ((10000<XSum) && (XSum<=30000)) {Rate=20;Balan=1250;}if ((30000<XSum) && (XSum<=50000)) {Rate=30;Balan=4250;}if (50000<XSum){Rate=35;Balan=6750;}TSum=(XSum*Rate)/100-Balan;if (TSum<0){TSum=0}return TSum}function R4568(XSum){var TSumif (XSum<=4000){TSum=(XSum-2000)*20/100;}if (XSum>4000){TSum=(XSum-(XSum*20/100))*20/100 }if (TSum<0){TSum=0}return TSum}function gong(){var qznumvar ffqznum=document.form1.textfield3.value; ff=document.all.checkbox.checked;if (ff){document.form1.textfield3.value=4000; }if (!ff){document.form1.textfield3.value=2000; }}function Rate3(XSum)/*劳务报酬*/{var TSumvar Ratevar Balanif (XSum<=20000){Rate=20;Balan=0;}if ((XSum>20000) && (XSum<=50000)) {Rate=30;Balan=2000;}if (XSum>50000){Rate=40;Balan=7000;}if (XSum<=4000){XSum=XSum-800;}if (XSum>4000){XSum=XSum-(XSum*20/100);}TSum=XSum*Rate/100-Balan;TSum=0}return TSum}function CHan(){if (document.form1.select.selectedIndex==0){document.all.gongzi.style.display="block";document.all.fei.style.display="block";}if (document.form1.select.selectedIndex!=0){document.all.gongzi.style.display="none";document.all.fei.style.display="none";}if (document.form1.select.selectedIndex+1!=9){document.all.fei1.style.display="none";}if (document.form1.select.selectedIndex+1==9){document.all.fei1.style.display="block";}}//--></SCRIPT><script type="text/javascript">var item=new Array(new Array('银⾏类⼯具(存款)',//<-- ⼤类名,下⾯⼏⾏则为此类下的所有计算器new Array(new Array('通知存款计算器','/283/2005/0704/2.html'),//<-- 此2项分别为“计算器名”,“链接” new Array('整存零取计算器','/283/2005/0711/24.html'),new Array('最佳存款组合','/283/2005/0711/30.html'),new Array('整(零)存整取计算器','/283/2005/0711/29.html'),new Array('活期储蓄计算器','/283/2005/0711/28.html')//<-- 依次向下罗列,最后⼀⾏“)”后没有“,”)), //<-- ⾮结尾⼤类后有“,”new Array('银⾏类⼯具(贷款)',//<-- 另⼀个⼤类new Array(new Array('等额本息还款计算器','/283/2005/0704/3.html'),new Array('等额本⾦还款计算器','/283/2005/0704/1.html'),new Array('提前还贷计算器','/283/2005/0708/18.html'),new Array('公积⾦贷款额度年限计算器','/283/2005/0704/6.html')//<-- 最后⼀⾏“)”后没有“,” )), //<-- ⾮结尾⼤类后有“,”new Array('保险类⼯具',//<-- 另⼀个⼤类new Array(new Array('基本养⽼保险计算器','/283/2005/0704/10.html'),new Array('基本医疗保险计算器','/283/2005/0708/11.html'),new Array('⼯伤保险计算器','/283/2005/0704/5.html'),new Array('失业保险','/283/2005/0708/16.html'),new Array('住房公积⾦计算器','/283/2005/0711/23.html'),new Array('退休时每⽉领取的养⽼保险⾦估算计算器','/283/2005/0708/20.html'))),new Array('股票类⼯具',//<-- 另⼀个⼤类new Array(new Array('股票收益计算器 ','/283/2005/0704/8.html'))),new Array('基⾦类⼯具',//<-- 另⼀个⼤类new Array(new Array('基⾦买卖计算器','/283/2005/0708/12.html'))),new Array('期货类⼯具',//<-- 另⼀个⼤类new Array(new Array('期货理财计算器 ','/283/2005/0708/14.html'))),new Array('债券类⼯具',//<-- 另⼀个⼤类new Array(new Array('债券收益率计算器','/283/2005/0711/25.html'))),new Array('外汇',//<-- 另⼀个⼤类new Array(new Array('外汇储蓄计算器','/283/2005/0711/27.html'),new Array('外汇兑换计算器','/283/2005/0711/26.html'))),new Array('税务类',//<-- 另⼀个⼤类new Array(new Array('买房税费计算器','/283/2005/0708/17.html'),new Array('个⼈所得税计算器','/283/2005/0704/4.html'))),new Array('理财规划类',//<-- 另⼀个⼤类new Array(new Array('理财规划计算器','/283/2005/0708/13.html'),new Array('⼦⼥教育基⾦计算器','/283/2005/0711/21.html'),new Array('投资收益计算器','/283/2005/0708/19.html'),new Array('资产净值计算器','/283/2005/0711/22.html'),new Array('黄⾦理财计算器','/283/2005/0704/9.html'))),new Array('买车计算',//<-- 另⼀个⼤类new Array(new Array('购车综合计算器','/283/2005/0708/15.html'))new Array('购房计算',//<-- 另⼀个⼤类new Array(new Array('购房能⼒评估计算器','/283/2005/0704/7.html'),new Array('提前还贷计算器','/283/2005/0708/18.html'),new Array('税费计算器','/283/2005/0708/17.html'),new Array('公基⾦贷款额度年限计算器','/283/2005/0704/6.html'),new Array('等额本⾦还款法计算器','/283/2005/0704/1.html'),new Array('等额本息还款法计算器','/283/2005/0704/3.html'))));//--------------var img0 =new Image();img0.src="/cj/toolsjs/cj_jsq_lj_010.gif";var img1 =new Image();img1.src="/cj/tools4.gif";function ShowItem (itemId){for (var i = 0; i < item.length; i++){eval('document.images["tImg' +i+ '"].src ="/cj/toolsjs/cj_jsq_lj_010.gif"');eval('document.all.item' + i +'.style.display = "none"');eval('document.all.menu' + i +'.style.background= "#1e86b0"');eval('document.all.menu' + i +'.style.color= "#ffffff"');}eval('document.images["tImg' +itemId + '"].src ="/cj/toolsjs/cj_jsq_lj_011.gif"'); eval('document.all.item' + itemId +'.style.display = "block"');eval('document.all.menu' + itemId +'.style.background= "#0268CE"');eval('document.all.menu' +itemId+'.style.color= "#ffffff"');}</script><META content="MSHTML 6.00.6000.16640" name=GENERATOR></HEAD><BODY bgColor=#ffffff topMargin=5 marginheight="5"><CENTER><TABLE cellSpacing=0 width=500><FORM name=form1><TBODY><TR><TD height=1></TD></TR><TR><TD><TABLE style="MARGIN-LEFT: 48px" cellSpacing=0 width=476 align=center><TBODY><TR><TD class=cBlue style="padding-: 7px" vAlign=bottom align=middleheight=39><FONT color=#ff00ff size=4> 个⼈所得税计算公式</FONT></TD></TR><TR><TD background="/OA/images/cj_jsq_lj_006.gif"height=1></TD></TR></TBODY></TABLE><TABLE class=cBlue style="MARGIN: 18px 0px 10px 38px" cellSpacing=0><TBODY><TR><TD style="padding-: 2px">收⼊类型:</TD><TD><SELECT id=select onchange=CHan() name=select> <OPTION value=1selected>⼯资、薪⾦所得<OPTION value=2>个体⼯商户⽣产、经营所得<OPTIONvalue=3>对企事业单位的承包经营、承租经营所得<OPTION value=4>劳务报酬所得<OPTIONvalue=5>稿酬所得<OPTION value=6>特许权使⽤所得<OPTIONvalue=7>利息、股息、红利所得<OPTION value=8>财产租赁所得<OPTIONvalue=9>财产转让所得<OPTION value=10>偶然所得(如:中奖、中彩)<OPTIONvalue=11>被确定征税的其他部分</OPTION></SELECT></TD></TR><TR><TD height=5></TD></TR><TR><TD></TD><TD><TABLE id=gongzi style="DISPLAY: block" cellSpacing=0width="100%"><TBODY><TR><TD><!--<INPUT name=checkboxonclick=gong() type=checkbox value=checkbox>外籍⼈员及境外⼯作的中国公民--></TD></TR></TBODY></TABLE></TD></TR><TR><TD height=10></TD></TR><TR><TD class=cBlue style="PADDING-TOP: 2px" width=60>收⼊⾦额:</TD><TD><INPUT id=textfield name=textfield> 元 </TD></TR><TR><TD height=12></TD></TR><TR><TD colSpan=2><TABLE class=cblue id=fei style="DISPLAY: block" cellSpacing=0cellPadding=0 width="100%" border=0><TBODY><TR><TD>各项社会保险费: <INPUT id=textfield2 value=0 name=textfield2><BR></TD></TR><TR><TD height=12></TD></TR><TR><TD>起 征 额: <INPUT id=textfield3 value=2000name=textfield3></TD></TR><TR><TD><br />注:根据税收规定,个⼈所得税的起征点为2000元,2008年3⽉1⽇起施⾏。
万能个税计算器2024年

【导言】【正文】一、设计思路应纳税所得额=工资薪金所得-5000-五险一金-扣除申报项应纳税额=应纳税所得额*税率-速算扣除数二、功能和实现方法1.用户输入工资薪金所得、五险一金、扣除申报项等数据。
2.用户自定义税率档和对应的速算扣除数。
3.根据用户输入的数据,计算出应纳税所得额,并根据税率档和速算扣除数计算出应纳税额。
4.显示计算结果,并提供保存功能,用户可以保存计算结果到本地。
三、代码实现以下是一个简单的示例代码,演示了如何实现万能个税计算器的核心功能:```class TaxCalculator:def __init__(self):self.salary = 0self.insurance = 0self.deductions = 0self.tax_rate = {}self.quick_deduction = {}def set_salary(self, salary):self.salary = salarydef set_insurance(self, insurance):self.insurance = insurancedef set_deductions(self, deductions):self.deductions = deductionsdef set_tax_rate(self, level, rate):self.tax_rate[level] = ratedef set_quick_deduction(self, level, deduction): self.quick_deduction[level] = deductiondef calculate_tax(self):for level, rate in self.tax_rate.items(:breakelse:return tax#使用示例calculator = TaxCalculatorcalculator.set_insurance(2000)calculator.set_deductions(1000)calculator.set_tax_rate(5000, 0.03)calculator.set_quick_deduction(5000, 0)tax = calculator.calculate_taxprint("应纳税额:", tax)```以上代码实现了一个简单的个税计算器,通过设置工资、五险一金、扣除申报项、税率和速算扣除数等参数,计算出应纳税额。
用JavaScript写一个简单的计算器

⽤JavaScript写⼀个简单的计算器本⽂使⽤js实现了⼀个简单的加、减、乘、除计算器。
以下是css部分代码:*{padding:0;margin:0;color: #424242;}.outer{width:300px;height:auto;outline:1px solid #b9b9b9;margin:50px auto;background: pink;}.title{height:40px;width:100%;border-bottom:1px solid #b9b9b9;text-align: left;text-indent:10px;line-height: 40px;cursor: pointer;}.bodyBox{width:90%;height:auto;padding:5%;}.calView{width:100%;height:75px;outline:1px solid #b9b9b9;background: rgba(255,255,255,.8);overflow: scroll;text-indent: 5px;padding-top:5px;}.content,.contentBtn{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}.btn,.back,.reset{display: inline;width:22%;height:30px;margin-top:15px;text-align: center;line-height:30px;cursor: pointer;background: #ffe4e8;outline:none;border:3px solid #ffa2a5;border-left:none;border-top:none;}.back,.reset{width:47%;}以下是html部分代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>计算器</title><link rel="stylesheet" href="calculator.css"></head><body><div class="outer"><div class="title"><span>计算器</span></div><div class="bodyBox"><div class="calView"></div><div class="content"><button class="btn">7</button><button class="btn">8</button><button class="btn">9</button><button class="btn">+</button><button class="btn">4</button><button class="btn">5</button><button class="btn">6</button><button class="btn">-</button><button class="btn">1</button><button class="btn">2</button><button class="btn">3</button><button class="btn">*</button><button class="btn">0</button><button class="btn">.</button><button class="btn">=</button><button class="btn">/</button></div><div class="contentBtn"><button class="back">回退</button><button class="reset">清空</button></div></div></div><script src="calculator.js"></script></body></html>以下是js部分代码(使⽤了es6的语法,使⽤之前请将编辑器设置为⽀持es6语法):/*** Created by Administrator on 2018/10/1.*/(function(){let content=document.getElementsByClassName("content")[0];let calView=document.getElementsByClassName("calView")[0];let reset=document.getElementsByClassName("reset")[0];//清空按钮let back=document.getElementsByClassName("back")[0];//回退按钮let arr=[];//存放输⼊的内容content.onmousedown=function(event){e=window.event||arguments[0];let tar=e.target||e.srcElement;tar.style.boxShadow="-1px -1px 3px #ffa2a5 inset";//设置按钮点击内阴影样式content.onmouseup=function(event){tar.style.boxShadow="none";};let val=tar.innerText;if(calView.innerHTML.indexOf("=")!==-1){//如果已经计算出结果,则开始下⼀次计算,清空数组calView.innerHTML="";arr=[];}calView.innerHTML="";arr.push(val);//将输⼊内容放⼊数组if(!isNaN(parseFloat(val))){//如果输⼊数字,则进⾏拼接joinNum(val);}if(isNaN(parseFloat(arr[arr.length-2])) && isNaN(parseFloat(arr[arr.length-1]))){//如果上⼀位和这⼀位为符号,则删除这⼀位 arr.pop();}show();//更新窗⼝内容if(val==="=" && arr.length>1){//如果输⼊等号,则计算出结果compute(arr);}};reset.onclick=()=>{//清空输⼊的内容calView.innerHTML="";arr=[];//清空数组};back.onclick=()=>{//清空输⼊的内容arr.pop();show();};/*** 拼接输⼊的内容* @param val :⽤户输⼊的内容*/function joinNum(val){if(!isNaN(parseFloat(arr[arr.length-2]))){//检测上⼀个是否为数字arr[arr.length-2]=String(parseFloat(arr[arr.length-2])*10+parseFloat(val));arr.pop();}if(arr[arr.length-2] === "/" && arr[arr.length-1] ==="0"){//如果分母为0,则删除0arr.pop();}}/*** 更新显⽰窗⼝内容*/function show(){let arrLen=arr.length;let str="";for(let i=0;i<arrLen;i++){str+=arr[i];}calView.innerHTML=str;//将拼接好的字符串显⽰在结果窗⼝中return str;}/*** 计算出最终结果*/function compute(arr){let showStr=show();calView.innerHTML=showStr + eval(showStr.split("=")[0]).toFixed(6);//由于会出现精度丢失问题,因此这⾥⽤toFixed()处理⼀下 }})();最终效果如下图所⽰,样式我写得⽐较随意,将就看吧!(本⽂为原创,转载请注明,谢谢!如果发现bug,请⼤家提出来!)。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">document.title="个税计算器";//写头部内容。
var header=document.createElement("header");header.innerHTML="个税计算器";document.body.appendChild(header);header.style.backgroundColor="blue";header.style.height="50px";header.style.textAlign="center";header.style.fontSize="30px";header.style.lineHeight="50px";header.style.color="white";//写输入框。
var form=document.createElement("form");document.body.appendChild(form);var input1=document.createElement("input");form.appendChild(input1);input1.type="text";input1.placeholder="基本工资";input1.style.width="100%";input1.style.height="40px";input1.style.marginTop="15px";input1.style.fontSize="30px";input1.innerHTML.placeholder="基本工资/计税";var input2=document.createElement("input");form.appendChild(input2);input2.type="text";input2.placeholder="绩效工资及工龄工资";input2.style.width="100%";input2.style.height="40px";input2.style.marginTop="15px";input2.style.fontSize="30px";input2.style.placeholder="绩效工资/计税";var input3=document.createElement("input");form.appendChild(input3);input3.type="text";input3.placeholder="奖金及其它收入";input3.style.width="100%";input3.style.height="40px";input3.style.marginTop="10px";input3.style.fontSize="30px";input3.style.placeholder="奖金/计税";//写计算按钮var button=document.createElement("button");document.body.appendChild(button);button.innerHTML="开始计算";button.style.backgroundColor="lightskyblue";button.style.textAlign="center";button.style.fontSize="30px";button.style.height="50px";button.style.width="100%";button.style.margin="10px auto";// button.style.margin=""//写主题内容//定义一个主体区域用于存放主体内容。
var sec=document.createElement("section");document.body.appendChild(sec);//工资总额部分var dl=document.createElement("dl");sec.appendChild(dl);var dt=document.createElement("dt");dl.appendChild(dt);dt.innerHTML="工资总额";var dd=document.createElement("dd");dl.appendChild(dd);dd.innerHTML="0.00";dt.style.float="left";dd.style.float="right";dl.style.marginTop="15px";dl.style.marginBottom="5px";dl.style.height="30px";dt.style.height="30px";dt.style.fontSize="24px";dd.style.fontSize="24px";//写分割线var hr=document.createElement("hr"); sec.appendChild(hr);hr.style.margin="0";//写养老部分8%var dl1=document.createElement("dl"); sec.appendChild(dl1);var dt1=document.createElement("dt"); dl1.appendChild(dt1);dt1.innerHTML="养老保险 8%";var dd1=document.createElement("dd"); dl1.appendChild(dd1);dd1.innerHTML="-0.00";dt1.style.float="left";dd1.style.float="right";dl1.style.marginTop="15px";dl1.style.marginBottom="5px";dl1.style.height="30px";dt1.style.height="30px";dt1.style.fontSize="24px";dt1.style.color="red";dd1.style.fontSize="24px";dd1.style.color="red";//写医疗 2%部分var dl2=document.createElement("dl"); sec.appendChild(dl2);var dt2=document.createElement("dt"); dl2.appendChild(dt2);dt2.innerHTML="医疗保险 2%";var dd2=document.createElement("dd"); dl2.appendChild(dd2);dd2.innerHTML="-0.00";dt2.style.float="left";dd2.style.float="right";dl2.style.marginTop="15px";dl2.style.marginBottom="5px";dl2.style.height="30px";dt2.style.height="30px";dt2.style.fontSize="24px";dt2.style.color="red";dd2.style.fontSize="24px";dd2.style.color="red";//写失业保险1%var dl3=document.createElement("dl"); sec.appendChild(dl3);var dt3=document.createElement("dt"); dl3.appendChild(dt3);dt3.innerHTML="失业保险 1%";var dd3=document.createElement("dd"); dl3.appendChild(dd3);dd3.innerHTML="-0.00";dt3.style.float="left";dd3.style.float="right";dl3.style.marginTop="15px";dl3.style.marginBottom="5px";dl3.style.height="30px";dt3.style.height="30px";dt3.style.fontSize="24px";dt3.style.color="red";dd3.style.fontSize="24px";dd3.style.color="red";//写工伤保险0%var dl4=document.createElement("dl"); sec.appendChild(dl4);var dt4=document.createElement("dt"); dl4.appendChild(dt4);dt4.innerHTML="工伤保险 0%";var dd4=document.createElement("dd"); dl4.appendChild(dd4);dd4.innerHTML="-0.00";dt4.style.float="left";dd4.style.float="right";dl4.style.marginTop="15px";dl4.style.marginBottom="5px";dt4.style.height="30px";dt4.style.fontSize="24px";dt4.style.color="red";dd4.style.fontSize="24px";dd4.style.color="red";//写生育保险0%var dl5=document.createElement("dl"); sec.appendChild(dl5);var dt5=document.createElement("dt"); dl5.appendChild(dt5);dt5.innerHTML="生育保险 0%";var dd5=document.createElement("dd"); dl5.appendChild(dd5);dd5.innerHTML="-0.00";dt5.style.float="left";dd5.style.float="right";dl5.style.marginTop="15px";dl5.style.marginBottom="5px";dl5.style.height="30px";dt5.style.height="30px";dt5.style.fontSize="24px";dt5.style.color="red";dd5.style.fontSize="24px";dd5.style.color="red";//写住房公积金8%var dl6=document.createElement("dl"); sec.appendChild(dl6);var dt6=document.createElement("dt"); dl6.appendChild(dt6);dt6.innerHTML="住房公积金 8%";var dd6=document.createElement("dd"); dl6.appendChild(dd6);dd6.innerHTML="-0.00";dt6.style.float="left";dd6.style.float="right";dl6.style.marginTop="15px";dl6.style.marginBottom="5px";dl6.style.height="30px";dt6.style.fontSize="24px";dt6.style.color="red";dd6.style.fontSize="24px";dd6.style.color="red";//写分割线var hr=document.createElement("hr"); sec.appendChild(hr);hr.style.margin="0";//写计税工资var dl7=document.createElement("dl"); sec.appendChild(dl7);var dt7=document.createElement("dt"); dl7.appendChild(dt7);dt7.innerHTML="计税工资";var dd7=document.createElement("dd"); dl7.appendChild(dd7);dd7.innerHTML="0.00";dt7.style.float="left";dd7.style.float="right";dl7.style.marginTop="15px";dl7.style.marginBottom="5px";dl7.style.height="30px";dt7.style.height="30px";dt7.style.fontSize="24px";dd7.style.fontSize="24px";//写个人所得税var dl8=document.createElement("dl"); sec.appendChild(dl8);var dt8=document.createElement("dt"); dl8.appendChild(dt8);dt8.innerHTML="个人所得税";var dd8=document.createElement("dd"); dl8.appendChild(dd8);dd8.innerHTML="-0.00";dt8.style.float="left";dd8.style.float="right";dl8.style.marginTop="15px";dl8.style.marginBottom="5px";dl8.style.height="30px";dt8.style.height="30px";dt8.style.fontSize="24px";dt8.style.color="red";dd8.style.fontSize="24px";dd8.style.color="red";//写分割线var hr=document.createElement("hr");sec.appendChild(hr);hr.style.margin="0";//写实发工资var dl9=document.createElement("dl");sec.appendChild(dl9);var dt9=document.createElement("dt");dl9.appendChild(dt9);dt9.innerHTML="实发工资";var dd9=document.createElement("dd");dl9.appendChild(dd9);dd9.innerHTML="0.00";dt9.style.float="left";dd9.style.float="right";dl9.style.marginTop="15px";dl9.style.marginBottom="5px";dl9.style.height="30px";dt9.style.height="30px";dt9.style.fontSize="24px";dt9.style.fontWeight="bold";dd9.style.fontSize="24px";dd9.style.fontWeight="bold";/**************************************************************** **************///写数据交互部分。