使用 Silverlight 和 JavaScript 的数字时钟
使用 Silverlight 和 JavaScript 的数字时钟
引言
本文将解释如何使用 JavaScript 使用 Silverlight。
背景
这个数字时钟是使用 Silverlight 和 JavaScript 开发的。 我们这里有四个不同的文件。 XAML 文件将包含使用矩形和多边形等不同形状显示数字的代码。 如果您了解 VML，那么此 XAML 文件将具有相同的语法。
Using the Code
在这里，我们将单独查看一个不同的文件。 在开始使用 Silverlight 之前，您必须下载 Silverlight 插件。
1. DigiClock.htm
此文件将由浏览器执行以显示数字时钟。 首先，将 JavaScript 引用添加到此页面。 然后，声明一个container，将在其中加载 Silverlight 控件。 在此之下，获取Container对象并调用函数createMySilverlightDigiClock();
<script src="Silverlight.js"></script>
<script src="my-script.js"></script>
</head>
<body>
<!-- Container-->
<div id="DigiClock">
</div>
<script type="text/javascript">
// Create Container Object.
var parentElement = document.getElementById("DigiClock");
// This function creates the Silverlight control.
createMySilverlightDigiClock();
</script>
2. Silverlight.js
必须从 Internet 下载此文件。 此文件将包含创建 Silverlight 控件和其他辅助方法的方法。
3. My-Script.js
此文件将包含我的自定义 JavaScript 函数以显示数字显示。
createMySilverlightDigiClock()- 此方法将从 *DigiClock.htm* 文件调用，该文件将创建一个 Silverlight 控件，您必须在其中指定 XAML 文件名、您的container名称以及 Silverlight 控件的宽度和高度。ShowNumber(sender,num,strTime)- 此方法将根据传递的参数在显示屏中显示数字。sender- Silverlight 控件对象num- 要在显示屏中显示的数字strTime- 包含此数字必须显示在显示板上的位置的变量OnLoad()- 此方法将在页面加载时被调用，其中 Silverlight 控件将存储在一个名为Canvas的全局变量中，并且将调用ClearDisplay()以清除先前显示的数字。 然后，调用ShowCurrentTime()以在显示屏中显示当前时间。ClearDisplay()- 此方法将清除显示屏中的数字。 这是通过更改多边形的Opacity来完成的。 此属性 (Opacity) 将采用从0到1的值。 其中0将不显示该对象，而1将以完整颜色显示该对象。ShowCurrentTime()- 此方法将用于使用当前时间更新显示。 将使用 JavaScript 获取当前时间，并将使用当前时间更新显示，并且将以固定间隔调用此函数以更新显示。
4. digiclock.xaml
此文件是最重要的文件，您必须在其中定义将在应用程序中使用的所有形状。 在这里，我创建了一个包含七个多边形的单个数字，并且每个多边形的Opacity将根据时间而变化。
注意：我还使用 PolyLine 和 Path 元素将我的名字添加到了底部。
关注点
过去 4 年我一直从事 .NET 工作。 我感兴趣的领域包括 .NET、AJAX 和其他新兴技术。
历史
- 2007 年 7 月 5 日：首次发布