Silverlight时钟
来源:互联网 发布:西安java 编辑:程序博客网 时间:2024/05/23 14:00
关于Silverlight的一些大道理就不说了,直接切入正题,本例主要通过Silverlight的一个简单示例让大家对Silverlight有一个简单的了解.
开发环境:
MS VisualStudio2005,MS ExpressionBlend 2,Silverlight1.0 SDK
JS编辑器:
喜欢用VisualStudio的可以到MS的下载中心下载AspNetFutures补丁来增加VS2005对JavaScript的智能提示功能,不过我比较推荐的IDE 是”1st JavaScript Editor”,占用资源小,功能强大(Aptana极其消耗系统资源,不知现在的新版本怎么样).
知识背景:
由于目前Silverlight1.1还未成熟,所以我使用的是Silverlight1.0版本,这就需要大家对JavaScript有一定的了解,例如DOM,XML,HttpRequest等技术,当然并非所有的浏览器对DOM的支持都一样,我想向大家推荐的是Firefox,Firefox几乎是完全支持DOM 标准,对XHTML 的支持也是完全符合W3C标准, MSIE则会使用很多Hack来校正用户的非标准编码(非符合W3C标准的JS代码或CSS).
JavaScript中大部分处理DOM的过程都是通过利用Document对象,主要包括特性(访问指定节点)如下:
1. getElementsByTagName()
用来返回一个包含所有的tagName特性等于某个指定值的NodeList.
2. getElementsByName()
用来获取所有name特性等于指定值的元素的NodeList.
3. getElementById()
返回id 特性等于指定值的元素.
言归正传:
1. 界面设计
1.1打开MS Expression Blend 2新建SilverLight Application 1.0 项目, 命名为QuartzClock.(随喜好)
1.2边框的制作
使用Ellipse 在 Page 中间画200*200 正圆borderEllipse,选择Ellipse Stroke属性, 设置为黑色背景, StrokeThickness 设置为1, 选择Ellipse Fill属性, 选择渐变填充, 使用Radial Gradient.
使用Ellipse在 borderEllipse正中画 177*177 正圆 clockEllipse, 选择 Ellipse Fill属性, 将背景填充为黑色,这样一个石英钟的背景就产生了.
1.3.1画中心点
将 Design 页面显示为200%, 在borderEllipse正中心画 5*5 正圆 centerEllipse, 与 borderEllipse, clockEllipse 的 RenderTransform(中心轴) 重合.
1.3.2 时针
使用Line 在clockEllipse中如图位置画Height 35, Width 10, StrokeThickness 5, Zindex 98, Fill, Stroke 为红色, 同样使其 RenderTransorm 与 centerEllipse 重合的直线hourPath.
1.3.3 分针
使用Line 在clockEllipse中如图位置画Height 56, Width 10, StrokeThickness 4, Zindex 99, Fill, Stroke 为天蓝色, 下端与hourPath平齐, 同样使其 RenderTransorm 与 centerEllipse 重合的直线minutePath.
1.3.4 秒针
使用Line 在clockEllipse中如图位置画Height 66, Width 10, StrokeThickness 3, Fill, Stroke 为黄色色, Zindex 100, 同样使其 RenderTransorm 与 centerEllipse 重合的 直线secondPath.
另外可在centerEllipse正下拖放2个TextBlock, dateTextBlock和weekTextBlock做为显示日期的文本框,将字体大小设置为10, Foreground为白色.
2 代码编写
有了设计的时钟界面,下面就要想办法让时钟动起来, 没错, 就是使用Transform Rotate中的 Angle 属性, 或许大家已经注意到了将 RenderTransform (中心轴) 设置在中心点的用意, 即当使用 Js 进行交互时, 修改 Angle 值即可使指针围绕中心点运动, 达到时钟效果.
首先我们应该获取所有需要的时间日期值:
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var date = time.getFullYear() + '-' + (parseInt(time.getMonth()) + 1) + '-' + time.getDate();
var week = array[parseInt(time.getDay()) -1];
将一周七天存放在array中, 使用获取的星期号getDay()做为索引, 当然还应该减去1, 数组的索引从0开始,可不是1, 将日期格式化成yyyy-MM-dd类型, 当然有时间的话大家还可以将 小于10的月和日,例如9, 转换成09, 这样会看起来更美观, 使用三元运算符将是很简单的事:
将时间转化为角度
var minuteAngle = minute/60*360;
var secondAngle = second/60*360;
就这么简单?当然不是了, 这样当 1:59:59的时刻, 时针依然在1上,分针依然在 55上, 而到达 2:00:00时 会突然跳转, 我们要实现的是渐显, 因此使用下面的代码来替代:
var minuteAngle = minute/60*360 + (1/60*360)*(second/60);
var secondAngle = second/60*360;
此外获取”hourPath”, ”minutePath”, “secondPath” 对象进行编码, 我们可以使用托管的sender来获取这些对象:
还可以使用Dom来获取:
这里我们两者结合,获取到时针,分针,秒针对象后我们对其Angle赋值:
minutePath.RenderTransform.Angle = minuteAngle;
secondPath.RenderTransform.Angle = secondAngle;
将前面的赋值封装在myClock()中:
...{
var sender = document.getElementById('SilverlightControl');
//Time Setting
var array = new Array('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday');
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var date = time.getFullYear() + '-' + (parseInt(time.getMonth()) + 1) + '-' + time.getDate();
var week = array[parseInt(time.getDay()) -1];
//Get Document
var hourPath = sender.content.findName('hourPath');
var minutePath = sender.content.findName('minutePath');
var secondPath = sender.content.findName('secondPath');
var dateTextBlock = sender.content.findName('dateTextBlock');
var weekTextBlock = sender.content.findName('weekTextBlock');
dateTextBlock.Text = date;
weekTextBlock.Text = week;
//Time Time Time
var hourAngle = hour/12*360 + (1/12*360)*(minute/60);
var minuteAngle = minute/60*360 + (1/60*360)*(second/60);
var secondAngle = second/60*360;
//Angle
hourPath.RenderTransform.Angle = hourAngle;
minutePath.RenderTransform.Angle = minuteAngle;
secondPath.RenderTransform.Angle = secondAngle;
}
这样在Xaml中为Canvas添加Loaded事件page_loaded,为page_loaded编写代码如下:
...{
myClock();
}
这样程序启动时就可以指向当前时间了,另外通过setInterval()函数来使石英钟的指针运动起来:
这样指针每隔1秒将会运动一次.
为了使石英钟根据效果,我们可以为其配上背景, 刻度, 大家可以自由发挥.
- Silverlight时钟
- Silverlight 制作的时钟
- SharePoint Silverlight Clock 时钟
- [演练]使用Expression Blend或代码创建Silverlight时钟
- [演练]使用Expression Blend或代码创建Silverlight时钟
- Silverlight控件使用(三)制作数字时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 时钟
- 学习UDEV
- 男人深爱老婆的96个经典细节
- 一个程序员和一名工程师的故事
- 常用的文章系统,如何用一条sql语句提取出每个分类的第一条并按OrderCol字段排序。分类大概几十个,一共只要取top 10 这样
- 社会生活中的著名法则
- Silverlight时钟
- 经济好用 佳能顶级喷墨一体机MP600降价
- 数据库行列交换实例
- C#进行Word文件的互操作
- 李维
- java中的文件操作
- 改变一生的五句话
- 夫妻程序员的故事
- 去爱吧