作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。

HTML:

<div class="calculator"><div class="input-group"><label for="a">起始点 a:</label> <input id="a" step="any" type="number" placeholder="输入起始点"></div><div class="input-group"><label for="b">终止点 b:</label> <input id="b" step="any" type="number" placeholder="输入终止点"></div><div class="input-group"><label for="type">不等式类型:</label><select id="type"><option value="greater">大于</option><option value="less">小于</option><option value="greaterEqual">大于等于</option><option value="lessEqual">小于等于</option></select></div><div class="operations"><button onclick="drawNumberLine()">绘制数线</button></div><div class="result"><canvas id="numberLineCanvas" width="600" height="200"></canvas></div></div>

JS:

function drawNumberLine() {const canvas = document.getElementById('numberLineCanvas');const ctx = canvas.getContext('2d');const a = parseFloat(document.getElementById('a').value);const b = parseFloat(document.getElementById('b').value);const type = document.getElementById('type').value;if (isNaN(a) || isNaN(b)) {alert("请输入有效的数值。");return;}// 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制数线ctx.beginPath();ctx.moveTo(50, 100);ctx.lineTo(canvas.width - 50, 100);ctx.strokeStyle = '#000';ctx.lineWidth = 2;ctx.stroke();// 绘制箭头ctx.beginPath();ctx.moveTo(canvas.width - 50, 90);ctx.lineTo(canvas.width - 40, 100);ctx.lineTo(canvas.width - 50, 110);ctx.fillStyle = '#000';ctx.fill();// 绘制刻度ctx.font = '12px Arial';ctx.textAlign = 'center';for (let i = 0; i <= canvas.width - 100; i += 50) {ctx.beginPath();ctx.moveTo(50 + i, 95);ctx.lineTo(50 + i, 105);ctx.stroke();ctx.fillText((i / 50).toFixed(0), 50 + i, 115);}// 绘制不等式ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';if (type === 'greater') {ctx.fillRect(50 + (a * 50), 50, (b - a) * 50, 100);} else if (type === 'less') {ctx.fillRect(50, 50, (b - a) * 50, 100);} else if (type === 'greaterEqual') {ctx.fillRect(50 + (a * 50), 50, (b - a + 1) * 50, 100);} else if (type === 'lessEqual') {ctx.fillRect(50, 50, (b - a + 1) * 50, 100);}
}

CSS:

.calculator {
width: 100%;background-color: #333;color: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}label {display: block;margin-bottom: 10px;font-size: 16px;
}input, select {width: 100%!important;padding: 10px!important;margin-bottom: 20px;color: #000000; border-radius: 5px;border: 1px solid #555;font-size: 16px!important;background-color: #ffffff!important;
}button {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;display: block;margin: 0px;margin-bottom: 20px;margin-left: 0px!important;
}button:hover {background-color: orange;
}.result {margin-top: 20px;position: relative;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}canvas {background-color: #e7f3fe;border: 1px solid #2196F3;border-radius: 5px;width:100%
}

线上运行，可以直接打开：数线计算器