CSS和JS都是現代Web開發中必不可少的技術。其中JS可以用來處理網頁上的各種交互，而CSS則是用于布局和美化網頁。而計算器則是前端開發中比較基本的應用之一。我們可以通過JS和CSS來實現一個簡單的計算器。

//JS代碼
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; }
var val1 = parseFloat(document.getElementById("value1").value);
var val2 = parseFloat(document.getElementById("value2").value);
var operator = document.getElementById("operator").value;
var result;
switch(operator) {
case "+":
result = add(val1, val2);
break;
case "-":
result = subtract(val1, val2);
break;
case "*":
result = multiply(val1, val2);
break;
case "/":
result = divide(val1, val2);
break;
default:
result = "Invalid operator";
}
document.getElementById("result").innerHTML = result;

上面的代碼是一個簡單的計算器函數，可以實現加、減、乘、除四種基本運算。同時還有獲取輸入值、判斷運算符等功能。接下來是相應的CSS代碼：

/*CSS代碼*/
.calculator {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
}
.calculator input {
margin: 10px 0;
padding: 5px;
}
.calculator button {
background-color: #dcdcdc;
border: none;
color: #000;
margin: 5px;
padding: 10px;
}
.calculator button:hover {
background-color: #bcbcbc;
cursor: pointer;
}

以上是一個完整的CSS樣式，可以實現按鈕展現的效果。我們可以將上述兩個代碼組合起來，就可以實現一個簡單的計算器了。