Home » Tiện ích » Máy tính bỏ túi online

Máy tính bỏ túi online

Đây là tiện ích online với 2 loại máy tính bỏ túi cơ bản giúp các bạn tính toán nhanh khi cần thiết. Một loại là máy tính bỏ túi kiểu cơ bản chỉ bao gồm các phép tính cộng trừ nhân chia. Một loại tạm gọi là máy tính khoa học được tích hợp thêm một số chức năng như tính sin cos, số mũ, lũy thừa,…

Chúng ta cũng sẽ được cung cấp code để tích hợp máy tính trên website của mình nếu muốn. Code máy tính này chỉ dùng css và javascript, rất ngắn gọn.

Máy tính đơn giản

CASIO – fx000
0
Canxem.com

Máy tính khoa học cơ bản

Code cho máy tính đơn giản

.calculator{
            width:370px;
            margin:40px auto;
            border: 1px solid #333;
            padding: 20px;
            background: teal;
            border-radius: 5px;
			color:#fff;
        }

        .calculator__keys {
            width:100%;

            /* other necessary CSS */
        }
        .calculator button{
            width:23%;
            height:40px;
            margin-top:5px;
            display: inline-block;
            border-radius:4px;
           font-size:16px;
        }
        .calculator .key--equal{
            height:175px;
            float:right;
            margin-right:9px;

        }
        .calculator button[data-action="clear"]{

        }
        .calculator__display{
            width:95%;
            border:1px solid black;
            padding:10px 7px;
            text-align:right;
            border-radius:4px;
            margin-bottom:20px;
            font-size: 20px;
            font-weight: 700;
            background: yellow;
			color: green;
        }
        .is-depressed{
            background-color: #ccc;
        }
		.copyr{padding-top: 15px; text-align:right}
<div class="calculator">
<div>CASIO - fx000</div>
    <div class="calculator__display">0</div>
    <div class="calculator__keys">
        <button class="key--operator" data-action="add">+</button>
        <button class="key--operator" data-action="subtract">-</button>
        <button class="key--operator" data-action="multiply">×</button>
        <button class="key--operator" data-action="divide">÷</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button class="key--equal" data-action="calculate">=</button>
        <button>5</button>
        <button>6</button>
        <button>4</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>0</button>
        <button data-action="decimal">.</button>
        <button data-action="clear">AC</button>
    </div>
<div class="copyr">Canxem.com</div>
</div>
<script>
    const calculator = document.querySelector('.calculator');
    const keys = calculator.querySelector('.calculator__keys');
    const display = document.querySelector('.calculator__display');

    keys.addEventListener('click', e => {
        if (e.target.matches('button')) {
            // Do something
            const key = e.target;
            const action = key.dataset.action;
            const keyContent = key.textContent;
            const displayedNum = display.textContent;

            Array.from(key.parentNode.children)
                .forEach(k => k.classList.remove('is-depressed'));

            if (!action) {
                console.log('number key!');
                if (displayedNum === '0' || calculator.dataset.previousKeyType === 'operator') {
                    display.textContent = keyContent;

                } else {
                    display.textContent = displayedNum + keyContent;

                }
                calculator.dataset.previousKeyType = 'number';
            }

            if (
                action === 'add' ||
                action === 'subtract' ||
                action === 'multiply' ||
                action === 'divide'
            ) {
                console.log('operator key!');
                key.classList.add('is-depressed');
                calculator.dataset.previousKeyType = 'operator';
                calculator.dataset.firstValue = displayedNum;
                calculator.dataset.operator = action;

            }

            if (action === 'decimal') {

                let k =calculator.dataset.previousKeyType;
                console.log(k);
                if  (!displayedNum.includes('.') && k!='operator' ){
                    display.textContent = displayedNum + '.';
                } else if (k == 'operator') {

                    display.textContent = '0.';
                }
                 calculator.dataset.previousKeyType = 'decimal';
            }

            if (action === 'clear') {
                console.log('clear key!');
                display.textContent="0";
                calculator.dataset.previousKeyType = 'clear';
            }

            if (action === 'calculate') {
                console.log('equal key!');
                const firstValue = calculator.dataset.firstValue;
                const operator = calculator.dataset.operator;
                const secondValue = displayedNum;

                if(firstValue!= undefined && operator !=undefined){
                    display.textContent = calculate(firstValue, operator, secondValue);
                    calculator.dataset.previousKeyType = 'calculate';
                }

            }

        }
    });

    function calculate(firstNum,operator,secondNum){
        if(operator === 'add'){
            return parseFloat(firstNum) +parseFloat(secondNum) ;
        }
        if(operator === 'subtract'){
            return parseFloat(firstNum) -parseFloat(secondNum) ;
        }
        if(operator === 'multiply'){
            return parseFloat(firstNum) *parseFloat(secondNum) ;
        }
        if(operator === 'divide'){
            return parseFloat(firstNum) /parseFloat(secondNum) ;
        }
    }
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Máy tính đơn giản bằng javascript - Canxem.com</title>
    <style>
        .calculator{
            width:370px;
            margin:40px auto;
            border: 1px solid #333;
            padding: 20px;
            background: teal;
            border-radius: 5px;
	    color:#fff;
        }

        .calculator__keys {
            width:100%;

            /* other necessary CSS */
        }
        .calculator button{
            width:23%;
            height:40px;
            margin-top:5px;
            display: inline-block;
            border-radius:4px;
           font-size:16px;
        }
        .calculator .key--equal{
            height:175px;
            float:right;
            margin-right:9px;

        }
        .calculator button[data-action="clear"]{

        }
        .calculator__display{
            width:95%;
            border:1px solid black;
            padding:10px 7px;
            text-align:right;
            border-radius:4px;
            margin-bottom:20px;
            font-size: 20px;
            font-weight: 700;
            background: yellow;
			color: green;
        }
        .is-depressed{
            background-color: #ccc;
        }
	.copyr{padding-top: 15px; text-align:right}

    </style>
</head>

<body>

<div class="calculator">
<div>CASIO - fx000</div>
    <div class="calculator__display">0</div>
    <div class="calculator__keys">
        <button class="key--operator" data-action="add">+</button>
        <button class="key--operator" data-action="subtract">-</button>
        <button class="key--operator" data-action="multiply">×</button>
        <button class="key--operator" data-action="divide">÷</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button class="key--equal" data-action="calculate">=</button>
        <button>5</button>
        <button>6</button>
        <button>4</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>0</button>
        <button data-action="decimal">.</button>
        <button data-action="clear">AC</button>
    </div>
<div class="copyr">Canxem.com</div>
</div>

<script>
    const calculator = document.querySelector('.calculator');
    const keys = calculator.querySelector('.calculator__keys');
    const display = document.querySelector('.calculator__display');

    keys.addEventListener('click', e => {
        if (e.target.matches('button')) {
            // Do something
            const key = e.target;
            const action = key.dataset.action;
            const keyContent = key.textContent;
            const displayedNum = display.textContent;

            Array.from(key.parentNode.children)
                .forEach(k => k.classList.remove('is-depressed'));


            if (!action) {
                console.log('number key!');
                if (displayedNum === '0' || calculator.dataset.previousKeyType === 'operator') {
                    display.textContent = keyContent;

                } else {
                    display.textContent = displayedNum + keyContent;

                }
                calculator.dataset.previousKeyType = 'number';
            }

            if (
                action === 'add' ||
                action === 'subtract' ||
                action === 'multiply' ||
                action === 'divide'
            ) {
                console.log('operator key!');
                key.classList.add('is-depressed');
                calculator.dataset.previousKeyType = 'operator';
                calculator.dataset.firstValue = displayedNum;
                calculator.dataset.operator = action;

            }

            if (action === 'decimal') {

                let k =calculator.dataset.previousKeyType;
                console.log(k);
                if  (!displayedNum.includes('.') && k!='operator' ){
                    display.textContent = displayedNum + '.';
                } else if (k == 'operator') {

                    display.textContent = '0.';
                }
                 calculator.dataset.previousKeyType = 'decimal';
            }

            if (action === 'clear') {
                console.log('clear key!');
                display.textContent="0";
                calculator.dataset.previousKeyType = 'clear';
            }

            if (action === 'calculate') {
                console.log('equal key!');
                const firstValue = calculator.dataset.firstValue;
                const operator = calculator.dataset.operator;
                const secondValue = displayedNum;

                if(firstValue!= undefined && operator !=undefined){
                    display.textContent = calculate(firstValue, operator, secondValue);
                    calculator.dataset.previousKeyType = 'calculate';
                }

            }

        }
    });

    function calculate(firstNum,operator,secondNum){
        if(operator === 'add'){
            return parseFloat(firstNum) +parseFloat(secondNum) ;
        }
        if(operator === 'subtract'){
            return parseFloat(firstNum) -parseFloat(secondNum) ;
        }
        if(operator === 'multiply'){
            return parseFloat(firstNum) *parseFloat(secondNum) ;
        }
        if(operator === 'divide'){
            return parseFloat(firstNum) /parseFloat(secondNum) ;
        }
    }

</script>

</body>
</html>

Code cho máy tính khoa học cơ bản

.calculator1 {
  width: 350px;
  height: auto;
  background: #c0c0c0;
  box-shadow: 0px 0px 0px 10px #666;
  border: 5px solid black;
  border-radius: 10px;
  margin:40px auto;
  text-align:center;
}
.calculator1 td{border:0!important;}
#display {
  width: 320px;
  height: 40px;
  text-align: right;
  background: black;
  border: 3px solid white;
  font-size: 22px;
  left: 2px;
  top: 2px;
  color: #7fff00;
  padding: 30px 5px;
}
.btnTop{
  color: white;
  background: #6f6f6f!important;
  font-size: 14px;
  margin: auto;
  width: 50px;
  height: 40px;
}
.btnNum {
  color: white;
  background: black!important;
  font-size: 14px;
  margin: auto;
  width: 50px;
  height: 40px;
}
.btnMath {
  color: white;
  background: #ff4561!important;
  font-size: 14px;
  margin: auto;
  width: 50px;
  height: 40px;
}
.btnOpps {
  color: white;
  background: #ff9933!important;
  font-size: 14px;
  margin: auto;
  width: 50px;
  height: 40px;
}
<form name="sci-calc">
 <table class="calculator1" cellspacing="0" cellpadding="1">
   <tr>
     <td colspan="5"><input id="display" name="display" value="0" size="28" maxlength="25"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnTop" name="btnTop" value="C" onclick="this.form.display.value=  0 "></td>
     <td><input type="button" class="btnTop" name="btnTop" value="&#8592;" onclick="deleteChar(this.form.display)"></td>
     <td><input type="button" class="btnTop" name="btnTop" value="=" onclick="if(checkNum(this.form.display.value)) { compute(this.form) }"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="&#960;" onclick="addChar(this.form.display,'3.14159265359')"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="%" onclick=" percent(this.form.display)"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnNum" name="btnNum" value="7" onclick="addChar(this.form.display, '7')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="8" onclick="addChar(this.form.display, '8')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="9" onclick="addChar(this.form.display, '9')"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="x&#94;" onclick="if(checkNum(this.form.display.value)) { exp(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="/" onclick="addChar(this.form.display, '/')"></td>
   <tr>
     <td><input type="button" class="btnNum" name="btnNum" value="4" onclick="addChar(this.form.display, '4')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="5" onclick="addChar(this.form.display, '5')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="6" onclick="addChar(this.form.display, '6')"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="ln" onclick="if(checkNum(this.form.display.value)) { ln(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="*" onclick="addChar(this.form.display, '*')"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnNum" name="btnNum" value="1" onclick="addChar(this.form.display, '1')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="2" onclick="addChar(this.form.display, '2')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="3" onclick="addChar(this.form.display, '3')"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="&radic;" onclick="if(checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="-" onclick="addChar(this.form.display, '-')"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnMath" name="btnMath" value="&#177;" onclick="changeSign(this.form.display)"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="0" onclick="addChar(this.form.display, '0')"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="&#46;" onclick="addChar(this.form.display, '&#46;')"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="x&#178;" onclick="if(checkNum(this.form.display.value)) { square(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="+" onclick="addChar(this.form.display, '+')"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnMath" name="btnMath" value="(" onclick="addChar(this.form.display, '(')"></td>
     <td><input type="button" class="btnMath" name="btnMath" value=")" onclick="addChar(this.form.display,')')"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="cos" onclick="if(checkNum(this.form.display.value)) { cos(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="sin" onclick="if(checkNum(this.form.display.value)) { sin(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="tan" onclick="if(checkNum(this.form.display.value)) { tan(this.form) }"></td>
  </tr>
 </table>

</form>
<script>
function addChar(input, character) {
	if(input.value == null || input.value == "0")
		input.value = character
	else
		input.value += character
}

function cos(form) {
	form.display.value = Math.cos(form.display.value);
}

function sin(form) {
	form.display.value = Math.sin(form.display.value);
}

function tan(form) {
	form.display.value = Math.tan(form.display.value);
}

function sqrt(form) {
	form.display.value = Math.sqrt(form.display.value);
}

function ln(form) {
	form.display.value = Math.log(form.display.value);
}

function exp(form) {
	form.display.value = Math.exp(form.display.value);
}

function deleteChar(input) {
	input.value = input.value.substring(0, input.value.length - 1)
}
var val = 0.0;
function percent(input) {
  val = input.value;
  input.value = input.value + "%";
}

function changeSign(input) {
	if(input.value.substring(0, 1) == "-")
		input.value = input.value.substring(1, input.value.length)
	else
		input.value = "-" + input.value
}

function compute(form) {
  //if (val !== 0.0) {
   // var percent = form.display.value;  
   // percent = pcent.substring(percent.indexOf("%")+1);
   // form.display.value = parseFloat(percent)/100 * val;
    //val = 0.0;
 // } else 
    form.display.value = eval(form.display.value);
  }

function square(form) {
	form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) {
	for (var i = 0; i < str.length; i++) {
		var ch = str.charAt(i);
		if (ch < "0" || ch > "9") {
			if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
				&& ch != "(" && ch!= ")" && ch != "%") {
				alert("invalid entry!")
				return false
				}
			}
		}
		return true
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Máy tính khoa học cơ bản bằng javascript - Canxem.com</title>
    <style>
.calculator1 {
  width: 350px;
  height: auto;
  background: #c0c0c0;
  box-shadow: 0px 0px 0px 10px #666;
  border: 5px solid black;
  border-radius: 10px;
  margin:40px auto;
  text-align:center;
}
.calculator1 td{border:0!important;}
#display {
  width: 320px;
  height: 40px;
  text-align: right;
  background: black;
  border: 3px solid white;
  font-size: 22px;
  left: 2px;
  top: 2px;
  color: #7fff00;
  padding: 30px 5px;
}
.btnTop{
  color: white;
  background: #6f6f6f!important;
  font-size: 14px;
  margin: auto;
  width: 50px;
  height: 40px;
}
.btnNum {
  color: white;
  background: black!important;
  font-size: 14px;
  margin: auto;
  width: 50px;
  height: 40px;
}
.btnMath {
  color: white;
  background: #ff4561!important;
  font-size: 14px;
  margin: auto;
  width: 50px;
  height: 40px;
}
.btnOpps {
  color: white;
  background: #ff9933!important;
  font-size: 14px;
  margin: auto;
  width: 50px;
  height: 40px;
}

    </style>
</head>

<body>

<form name="sci-calc">
 <table class="calculator1" cellspacing="0" cellpadding="1">
   <tr>
     <td colspan="5"><input id="display" name="display" value="0" size="28" maxlength="25"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnTop" name="btnTop" value="C" onclick="this.form.display.value=  0 "></td>
     <td><input type="button" class="btnTop" name="btnTop" value="&#8592;" onclick="deleteChar(this.form.display)"></td>
     <td><input type="button" class="btnTop" name="btnTop" value="=" onclick="if(checkNum(this.form.display.value)) { compute(this.form) }"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="&#960;" onclick="addChar(this.form.display,'3.14159265359')"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="%" onclick=" percent(this.form.display)"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnNum" name="btnNum" value="7" onclick="addChar(this.form.display, '7')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="8" onclick="addChar(this.form.display, '8')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="9" onclick="addChar(this.form.display, '9')"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="x&#94;" onclick="if(checkNum(this.form.display.value)) { exp(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="/" onclick="addChar(this.form.display, '/')"></td>
   <tr>
     <td><input type="button" class="btnNum" name="btnNum" value="4" onclick="addChar(this.form.display, '4')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="5" onclick="addChar(this.form.display, '5')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="6" onclick="addChar(this.form.display, '6')"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="ln" onclick="if(checkNum(this.form.display.value)) { ln(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="*" onclick="addChar(this.form.display, '*')"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnNum" name="btnNum" value="1" onclick="addChar(this.form.display, '1')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="2" onclick="addChar(this.form.display, '2')"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="3" onclick="addChar(this.form.display, '3')"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="&radic;" onclick="if(checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="-" onclick="addChar(this.form.display, '-')"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnMath" name="btnMath" value="&#177;" onclick="changeSign(this.form.display)"></td>
     <td><input type="button" class="btnNum" name="btnNum" value="0" onclick="addChar(this.form.display, '0')"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="&#46;" onclick="addChar(this.form.display, '&#46;')"></td>
     <td><input type="button" class="btnOpps" name="btnOpps" value="x&#178;" onclick="if(checkNum(this.form.display.value)) { square(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="+" onclick="addChar(this.form.display, '+')"></td>
   </tr>
   <tr>
     <td><input type="button" class="btnMath" name="btnMath" value="(" onclick="addChar(this.form.display, '(')"></td>
     <td><input type="button" class="btnMath" name="btnMath" value=")" onclick="addChar(this.form.display,')')"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="cos" onclick="if(checkNum(this.form.display.value)) { cos(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="sin" onclick="if(checkNum(this.form.display.value)) { sin(this.form) }"></td>
     <td><input type="button" class="btnMath" name="btnMath" value="tan" onclick="if(checkNum(this.form.display.value)) { tan(this.form) }"></td>
  </tr>
 </table>
</form>

<script>
function addChar(input, character) {
	if(input.value == null || input.value == "0")
		input.value = character
	else
		input.value += character
}

function cos(form) {
	form.display.value = Math.cos(form.display.value);
}

function sin(form) {
	form.display.value = Math.sin(form.display.value);
}

function tan(form) {
	form.display.value = Math.tan(form.display.value);
}

function sqrt(form) {
	form.display.value = Math.sqrt(form.display.value);
}

function ln(form) {
	form.display.value = Math.log(form.display.value);
}

function exp(form) {
	form.display.value = Math.exp(form.display.value);
}

function deleteChar(input) {
	input.value = input.value.substring(0, input.value.length - 1)
}
var val = 0.0;
function percent(input) {
  val = input.value;
  input.value = input.value + "%";
}

function changeSign(input) {
	if(input.value.substring(0, 1) == "-")
		input.value = input.value.substring(1, input.value.length)
	else
		input.value = "-" + input.value
}

function compute(form) {
  //if (val !== 0.0) {
   // var percent = form.display.value;  
   // percent = pcent.substring(percent.indexOf("%")+1);
   // form.display.value = parseFloat(percent)/100 * val;
    //val = 0.0;
 // } else 
    form.display.value = eval(form.display.value);
  }

function square(form) {
	form.display.value = eval(form.display.value) * eval(form.display.value)
}

function checkNum(str) {
	for (var i = 0; i < str.length; i++) {
		var ch = str.charAt(i);
		if (ch < "0" || ch > "9") {
			if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
				&& ch != "(" && ch!= ")" && ch != "%") {
				alert("invalid entry!")
				return false
				}
			}
		}
		return true
}
</script>
</body>
</html>

Chúng ta có thể thiết kế lại giao diện cho máy tính bằng cách chỉnh sửa các đoạn CSS.

Giao diện có thể khác một chút khi tích hợp vào trang web khác vì một số css phụ thuộc vào theme.

Hy vọng máy tính này có thể giúp ích cho các bạn.

Xem thêm: Công cụ chọn mã màu online mới nhất 2021


Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *