如何在 .Net/HTML5 中创建交互式数字行答案

【问题标题】：How to create an interactive number line in .Net/HTML5如何在 .Net/HTML5 中创建交互式数字行
【发布时间】：2012-07-23 16:41:08
【问题描述】：

我正在尝试创建一个交互式number line，以帮助使用 HTML5 和 .NET 的数学学生进行基本的加法/减法学习。我试图弄清楚如何创建一个交互式数字线，用户可以将线上的标记拖到不同的数字上并查看加法/减法结果。

从我目前的研究来看，HTML5 中的slider bar 可能是解决方案，但我不确定它是否可以处理范围。

大师们有什么出发点吗？

【问题讨论】：

你能问一个具体的问题吗？我不知道你在问什么。
@Gabe 当然。我试图弄清楚如何创建一个交互式数字线，用户可以将线上的标记拖到不同的数字上并查看加法/减法结果。
@Gabe 这个问题非常具体，两个用户在那里没有任何问题。你和 casperOne 绝对是抢先一步。

标签： c# .net html

【解决方案1】：

我认为您不想在其中包含 .net。 HTML5 可以在 javascript 中完全在客户端处理这个用例。我正在使用 Canvas API 制作一个，但后来我遇到了this question，它基本上为您提供了制作数字线所需的知识，您只需要获取点击事件并创建一个位置来显示加法结果。这应该很容易，除非你是 Canvas 的认真初学者，如果你知道你的具体问题，我会看看我是否可以扩展这篇文章。

关于 sblom 的回答，JQuery 也可以很好地解决这个问题。但我不会涉及 .net 技术，除非你真的需要某种服务器端处理技术，而你在这里不需要。

【讨论】：

啊，太好了，谢谢。很惊讶这个问题没有出现在搜索中。我是 Canvas 的初学者，但在寻求更多帮助之前，我会先尝试一下，我的问题主要是找出最适合这种情况的方法。

【解决方案2】：

有许多提供范围滑块的 HTML UI 工具包，我认为它几乎可以完全满足您的需求。

您应该查看 JQuery UI 的范围滑块以帮助您入门：http://jqueryui.com/demos/slider/#range

【讨论】：