稳扎稳打Silverlight(1) - 1.0实例之电子表

2022-06-22 14:48:18

作者：webabcd

介绍
用Silverlight 1.0实现一个基于客户端系统时间的电子表。
参考：http://silverlight.net/community/communitygallery.aspx

示例
Clock.xaml（用Expression Blend开发）

Clock.xaml.js

if (!window.Clock)
        window.Clock = {};

Clock.Page = function()
{
}

Clock.Page.prototype =
{
        handleLoad: function(control, userContext, rootElement)
        {
                this.control = control;

                // Sample event hookup:
                rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
        },

        // Sample event handler
        handleMouseDown: function(sender, eventArgs)
        {
                // The following line of code shows how to find an element by name and call a method on it.
                // this.control.content.findName("Timeline1").Begin();
        }
}

// TextBlock的MouseLeftButtonDown调用的方法
function MouseLeftButtonDown(sender, args)
{
        window.open("http://webabcd.cnblogs.com");
}

// TextBlock的MouseMove调用的方法
function MouseMove(sender, args)
{
        // TextBlock.foreground
        sender.foreground = "red";
        // TextBlock.textDecorations
        sender.textDecorations = "underline";
}

// TextBlock的MouseLeave调用的方法
function MouseLeave(sender, args)
{
        // TextBlock.foreground
        sender.foreground = "#FF100888";
        // TextBlock.textDecorations
        sender.textDecorations = "none";
}

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs"
        Inherits="_10_Clock_Default" Title="电子表" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

        <script type="text/javascript" src="../Silverlight.js"></script>

        <script type="text/javascript" src="Default.aspx.js"></script>

        <script type="text/javascript" src="Clock.xaml.js"></script>

        <script type="text/javascript" src="Clock.js"></script>

        <style type="text/css">
                .silverlightHost
                {
                        height: 150px;
                        width: 180px;
                }
        </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <div id="SilverlightControlHost" class="silverlightHost">

                <script type="text/javascript">
                        createSilverlight();
                </script>

        </div>
</asp:Content>

Default.aspx.js

Clock.js

// date.getDay()索引转文字
var aryWeek = new Array(7)
aryWeek[0]="Sun"
aryWeek[1]="Mon"
aryWeek[2]="Tue"
aryWeek[3]="Wed"
aryWeek[4]="Thu"
aryWeek[5]="Fri"
aryWeek[6]="Sat"

// date.getMonth()索引转文字
var aryMonth = new Array(12)
aryMonth[0]="01"
aryMonth[1]="02"
aryMonth[2]="03"
aryMonth[3]="04"
aryMonth[4]="05"
aryMonth[5]="06"
aryMonth[6]="07"
aryMonth[7]="08"
aryMonth[8]="09"
aryMonth[9]="10"
aryMonth[10]="11"
aryMonth[11]="12"

// Canvas的Loaded调用的方法
function enableClock()
{
        var date = new Date();

        var SilverlightControl = document.getElementById("SilverlightControl");

        // plugin.content.findName(objectName)
        var hour = SilverlightControl.content.findName("txtHour");
        var minute = SilverlightControl.content.findName("txtMinute");
        var second = SilverlightControl.content.findName("txtSecond");
        var month = SilverlightControl.content.findName("txtMonth");
        var day = SilverlightControl.content.findName("txtDay");
        var week = SilverlightControl.content.findName("txtWeek");

        // TextBlock.text
        if (date.getHours() > 9)
                hour.text = date.getHours().toString();
        else
                hour.text = "0" + date.getHours().toString();

        if (date.getMinutes() > 9)
                minute.text = date.getMinutes().toString();
        else
                minute.text = "0" + date.getMinutes().toString();

        if (date.getSeconds() > 9)
                second.text = date.getSeconds().toString();
        else
                second.text = "0" + date.getSeconds().toString();

        month.text = aryMonth[date.getMonth()];

        if (date.getDate() > 9)
                day.text = date.getDate().toString();
        else
                day.text = "0" + date.getDate().toString();

        week.text = aryWeek[date.getDay()];

        setTimeout("enableClock()",1000);
}

// 全屏（TextBlock的MouseLeftButtonDown调用的方法）
function toggle_fullScreen(sender, args)
{
        // 当前元素所属的Silverlight插件
        var silverlightPlugin = sender.getHost();
        silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;
}

OK
[源码下载]

本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/345641，如需转载请自行联系原作者

码农公寓

相关文章