在日常工作过程中，开发网站难免会遇到一些对数字进行相关运算的需求，接下来，济南网站建设小编就通过一个非常简单的JavaScript综合案例，来为大家演示JavaScript编程语言中算术运算符的运算效果，其中包含加、减、乘、除、取余、自增、自减、正负号、幂运算等运算符，希望，对大家了解JavaScript编程语言中算术运算符，有所帮助。
关键代码：
<head>
<title>JavaScri算术运算符综合案例</title>
<style>
.container {
width: 500px;
margin: 40px auto;
padding: 20px;
border: 1px solid #eee;
border-radius: 6px;
}
button {
padding: 8px 18px;
background: #2385ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 20px;
}
#result {
line-height: 1.8;
font-size: 15px;
background: #f8f8f8;
padding: 15px;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="container">
<h3>JavaScript 算术运算符演示</h3>
<button onclick="calcOperators()">点击执行运算</button>
<div id="result"></div>
</div>
<script>
function calcOperators() {
let res = "";
let a = 10;
let b = 3;
// 1. 加法 +
res += `1. 加法 +\n`;
res += `${a} + ${b} = ${a + b}\n`;
// 加法特殊点：字符串拼接
res += `数字+字符串：${a} + "5" = ${a + "5"} (会拼接文本)\n\n`;
// 2. 减法 -
res += `2. 减法 -\n`;
res += `${a} - ${b} = ${a - b}\n\n`;
// 3. 乘法 *
res += `3. 乘法 *\n`;
res += `${a} * ${b} = ${a * b}\n\n`;
// 4. 除法 /
res += `4. 除法 /\n`;
res += `${a} / ${b} = ${a / b} (JS除法默认保留小数)\n\n`;
// 5. 取余（求模）% 取余数
res += `5. 取余 %\n`;
res += `${a} % ${b} = ${a % b} (两数相除后的余数)\n\n`;
// 6. 幂运算 ** 计算几次方
res += `6. 幂运算 **\n`;
res += `${a} ** 2 = ${a ** 2} (10的2次方)\n`;
res += `${b} ** 3 = ${b ** 3} (3的3次方)\n\n`;
// 7. 一元正负 + 、-
res += `7. 一元正负号\n`;
res += `+${b} = ${+b}\n`;
res += `-${b} = ${-b}\n\n`;
// 8. 前置自增 ++a 、后置自增 a++
let num1 = 5;
res += `8. 自增 ++\n`;
res += `原始值 num1 = ${num1}\n`;
res += `后置自增 num1++：${num1++} (先取值，后+1)\n`;
res += `执行后 num1 = ${num1}\n`;
let num2 = 5;
res += `前置自增 ++num2：${++num2} (先+1，后取值)\n\n`;
// 9. 前置自减 --a 、后置自减 a--
let num3 = 8;
res += `9. 自减 --\n`;
res += `原始值 num3 = ${num3}\n`;
res += `后置自减 num3--：${num3--} (先取值，后-1)\n`;
res += `执行后 num3 = ${num3}\n`;
let num4 = 8;
res += `前置自减 --num4：${--num4} (先-1，后取值)\n`;
// 输出所有结果
document.getElementById('result').innerText = res;
}
</script>
</body>
评论