您的位置:知识库 » .NET技术

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

作者: webabcd  来源: 博客园  发布时间: 2008-10-27 14:40  阅读: 8834 次  推荐: 0   原文链接   [收藏]  
[1] 稳扎稳打Silverlight(1) - 1.0实例之电子表
[2] 稳扎稳打Silverlight(1) - 1.0实例之电子表

系列文章导航:

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

稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)

稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox


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

function createSilverlight()
{
    
var scene = new Clock.Page();
    Silverlight.createObjectEx(
{
        source: 
"Clock.xaml",
        parentElement: document.getElementById(
"SilverlightControlHost"),
        id: 
"SilverlightControl",
        properties: 
{
            width: 
"100%",
            height: 
"100%",
            version: 
"1.0"
        }
,
        events: 
{
            onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
        }

    }
);
}



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

Silverlight.createDelegate 
= function(instance, method) {
    
return function() {
        
return method.apply(instance, arguments);
    }

}


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;    
}
[第1页][第2页]
0
0
标签:Silverlight

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻