添加交互式仪表到网页集成A时钟

添加交互式仪表到网页集成A时钟 　　简介 　　任何Web开发人员可以面对一个必要的一些小部件或控件添加到Web站点的视觉吸引力和说明的方式显示信息。这些可以是一些简单的目的，如时钟，窗口小部件显示天气，或网站的流量测量仪或更复杂的：仪表板，各种仪表的显示，例如调查结果或重要业务信息的组合。 　　在我的工作，我面临着这样的挑战，以及。我正在开发一个博客，一个客户，他问我来添加夫妇计到其主页：一个模拟时钟和天气部件。 　　什么是做的最简单的方法是什么?编码来创建一个时钟不是一个选项。这将花费太多时间和精力，我不想浪费我的客户不希望支付。得到一个现成的控件可以是一种选择，只有当它是不是太昂贵，易于集成和定制。 　　于是，我开始寻找。浏览互联网中的搜索量规，我发现很多选择，花了相当多的时间对其进行分析，并找到合适的解决方案适合我 　　为了节省您的宝贵时间，我想和大家分享我的搜索仪表冒险和讲述了“值得到关注」选项。 　　“在搜索JS规”冒险 　　因此，结合不同的搜索请求，如交互式仪表，压力表的JavaScript，HTML5仪表(我更喜欢HTML5(JavaScript)的库，因为它们可以集成到任何Web应用程序，我正在开发许多人使用不同的技术)，HTML5的时钟，JS小部件等我发现的可能选项。描述所有的人都将采取年龄，所以让我强调只是最有趣的库，恕我直言： 　　FusionWidgets通过FusionCharts的是第一个在搜索结果中的一个。这些家伙有一个巨大的好看的JS图表和仪表库。我花了大约20分钟翻翻他们的演示。下面是一个关于他们的仪表：但是，他们大多集中在图表比计，所以我无法找到简单的仪表我需要的。 　　jsGauges和基于SVG的仪表为JavaScript的两个产品，我发现codecanoyn.net，我经常使用购买廉价和有用的脚本和广告插件。 　　jsGauges是一个相当便宜又好看的库，但它只有简单的线性和圆形仪表，我注意到我的其他项目，但不是这一个。 　　至于基于SVG的量规的JavaScript，我真的很喜欢的压力表所提供看起来很现代的风格!这是很可惜我没有找到他们之前：他们有一个很酷的进度条计，我想在我以前的项目之一。所以，我发现了一个时钟计有，但我没有找到一个天气小工具。所以，我注意到他们自己以及和继续进行搜索。 　　WIJMO由ComponentOne的是下一个图书馆中，我调查了。这是我到目前为止发现的各种JS UI元素最丰富的图书馆。它有不同的图表，日历，对话框，扩展器和许多其他控件。但仪表也有非常差。 　　完美的小工具通过Perpetuum公司的软件是我想提一提在这篇文章中最新的库。这个库的重点是刚上的仪表和具有不同那些最富有的收集：圆弧和直线测量仪，数字时钟和罗盘，切换按钮，准备好小工具天气显示等，所以，实际上它有我需要的一切。所以，我下载了一个试用版，开始了我真正的考验。首先，我试图将一个时钟集成到我的博客。 　　添加时钟到网页 　　压力表集成到一个页面了离我大约有一半与我花了用于搜索压力表的时间比较多小时，那是什么。 　　我需要做的第一件事就是从所有可用的选项中进行选择的时钟。下面的时钟是一个我选择了，因为它配我的网站的一般设计，我需要做的最小或没有定制： 　　第1步。添加JavaScript库 整合 　　的第一步是添加引用的脚本。完美的小工具包包括两个现成的JS脚本：“PerfectWidgets.js”和“mscorlib.js”。我们需要将引用添加到这两个脚本到页面的标题，我们要显示我们的时钟。 　　第2步：添加一个容器元素 　　在我只需要添加的div元素在页面上的压力表下一步： 　　步骤3。添加时钟到页 　　在包装每一压力表是作为包含该测量仪的描述，您可以编辑，如果需要一个JSON文件。和一个时钟添加到我的网页我创建了一个将用来包含此计给构造函数的测量仪和JSON描述的div对象通过名称的新实例： 　　VAR模型= {}; 　　变种时钟=新PerfectWidgets.Widget(“小部件”，型号); 　　步骤4。绑定值到时钟指针。 现在 　　，让我们将值绑定到一分钟，手和一个二手的我们的时钟。由于博客的访问者可能会从不同的时区，我绑定了用户计算机通过以下方式的系统时间的值： 　　功能StartClock(){ 　　的setInterval(SETTIME，1000); 　　SETTIME(); 　　} 　　功能SETTIME(){ 　　变种currentTime的=新的日期(); 　　clock.getByName(“时时刻刻”)的setValue(currentTime.getHours()%12 + currentTime.getMinutes()/ 60); 　　clock.getByName(“会议纪要”)的setValue(currentTime.getMinutes()); 。 　　clock.getByName(“秒”)的setValue(currentTime.getSeconds()); 　　} 　　这就是全部!现在只要刷新页面，享受你的网站的新面貌! 　　结论 　　很多web开发者，包括我自己，花了这么多时间和开发力度，或搜索控件来丰富我们的Web应用程序的UI。当然，这是很难选择在如此众多的选项好的。我花了相当多的时间，直到我找到了我一直在寻找，但时间没有白费。除了解决我当前的任务，我发现很多有用的库，它可以帮助我在未来发展各种类型的项目。