时钟示例源码

6 years ago · ccb310c960
22 changed files with 599 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+*.iml
+.idea/
+target/
+lib/report/*.jar
+.classpath
--- a/README.md
+++ b/README.md
@ -0,0 +1,29 @@
+# 时钟控件
+功能：表单里的时钟控件，可以动态的展示当前的时间
+
+最终动态gif效果图：
+
+
+使用Canvas实现
+![Canvas实现的动态效果图](effect/clock.gif)
+
+使用CSS3实现
+![Css3实现的动态效果图](effect/clock_css3.gif)
+
+设计器效果图:
+
+控件选择界面：
+![控件选择界面](effect/designer_effect1.png)
+
+表单设计界面
+![表单设计界面](effect/designer_effect2.png)
+
+表单预览效果图
+
+Canvas版本
+![表单预览效果图](effect/clock_preview_inform.png)
+
+CSS3版本
+![表单预览效果图](effect/clock_review_css3.png)
+
+
--- a/build.xml
+++ b/build.xml
@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<project basedir="." default="jar" name="plugin">
+    <!-- JDK路径，根据自己机器上实际位置修改-->
+    <property name="jdk.home" value="/Library/Java/JavaVirtualMachines/jdk1.8.0_172.jdk/Contents/Home"/>
+
+    <property name="libs" value="${basedir}/lib"/>
+    <property name="publicLibs" value=""/>
+    <property name="reportLibs" value="${basedir}/../webroot/WEB-INF/lib"/>
+    <property name="destLoc" value="."/>
+    <property name="classes" value="classes"/>
+    <xmlproperty file="${basedir}/plugin.xml"/>
+    <property name="current-version" value="${plugin.version}"/>
+
+    <!-- 插件版本-->
+    <property name="plugin-version" value="${current-version}"/>
+    <!-- 插件名字-->
+    <property name="plugin-name" value="clock"/>
+    <property name="plugin-jar" value="fr-plugin-${plugin-name}-${plugin-version}.jar"/>
+
+    <target name="prepare">
+        <delete dir="${classes}"/>
+        <delete dir="fr-plugin-${plugin-name}-${plugin-version}"/>
+        <xmlproperty file="${basedir}/plugin.xml"/>
+        <delete dir="${destLoc}/${plugin.name}"/>
+    </target>
+    <path id="compile.classpath">
+        <fileset dir="${libs}">
+            <include name="**/*.jar"/>
+        </fileset>
+        <fileset dir="${publicLibs}">
+            <include name="**/*.jar"/>
+        </fileset>
+        <fileset dir="${reportLibs}">
+            <include name="**/*.jar"/>
+        </fileset>
+    </path>
+    <patternset id="resources4Jar">
+        <exclude name="**/.settings/**"/>
+        <exclude name=".classpath"/>
+        <exclude name=".project"/>
+
+        <exclude name="**/*.java"/>
+        <exclude name="**/*.db"/>
+        <exclude name="**/*.g"/>
+        <exclude name="**/package.html"/>
+    </patternset>
+    <target name="copy_resources">
+        <echo message="从${resources_from}拷贝图片,JS,CSS等资源文件"/>
+        <delete dir="tmp"/>
+        <copy todir="tmp">
+            <fileset dir="${resources_from}/src/main/resources">
+                <patternset refid="resources4Jar"/>
+            </fileset>
+        </copy>
+        <copy todir="${classes}">
+            <fileset dir="tmp"/>
+        </copy>
+        <delete dir="tmp"/>
+    </target>
+    <target name="compile_javas">
+        <echo message="编译${compile_files}下的Java文件"/>
+        <javac destdir="${classes}" debug="false" optimize="on" source="${source_jdk_version}"
+               target="${target_jdk_version}"
+               fork="true" memoryMaximumSize="512m" listfiles="false" srcdir="${basedir}"
+               executable="${compile_jdk_version}/bin/javac">
+            <src path="${basedir}/src/main/java"/>
+            <exclude name="**/.svn/**"/>
+            <compilerarg line="-encoding UTF8 "/>
+            <classpath refid="compile.classpath"/>
+        </javac>
+        <taskdef name="pretreatment" classname="com.fr.plugin.pack.PluginPretreatmentTask">
+            <classpath refid="compile.classpath"/>
+        </taskdef>
+        <pretreatment baseDir="${basedir}"/>
+    </target>
+
+    <target name="jar_classes">
+        <echo message="打Jar包:${jar_name}"/>
+        <delete file="${basedir}/${jar_name}"/>
+        <jar jarfile="${basedir}/${jar_name}">
+            <fileset dir="${classes}">
+            </fileset>
+        </jar>
+    </target>
+
+    <target name="super_jar" depends="prepare">
+        <antcall target="copy_resources">
+            <param name="resources_from" value="${basedir}"/>
+        </antcall>
+        <antcall target="compile_javas">
+            <param name="source_jdk_version" value="1.6"/>
+            <param name="target_jdk_version" value="1.6"/>
+            <param name="compile_jdk_version" value="${jdk.home}"/>
+            <param name="compile_files" value="${basedir}/src"/>
+        </antcall>
+        <echo message="compile plugin success!"/>
+
+        <antcall target="jar_classes">
+            <param name="jar_name" value="${plugin-jar}"/>
+        </antcall>
+        <delete dir="${classes}"/>
+
+    </target>
+
+    <target name="jar" depends="super_jar">
+        <antcall target="zip"/>
+    </target>
+
+    <target name="zip">
+        <property name="plugin-folder" value="fr-plugin-${plugin-name}-${plugin-version}"/>
+        <echo message="----------zip files----------"/>
+        <mkdir dir="${plugin-folder}"/>
+        <copy todir="${plugin-folder}">
+            <fileset dir=".">
+                <include name="${plugin-jar}"/>
+                <include name="plugin.xml"/>
+            </fileset>
+            <fileset dir="${libs}">
+                <include name="*.jar"/>
+                <include name="*.dll"/>
+            </fileset>
+        </copy>
+        <zip destfile="${basedir}/${plugin-folder}.zip" basedir=".">
+            <include name="${plugin-folder}/*.jar"/>
+            <include name="${plugin-folder}/*.dll"/>
+            <include name="${plugin-folder}/plugin.xml"/>
+        </zip>
+        <move file="${plugin-folder}.zip" todir="${destLoc}/install"/>
+    </target>
+</project>
--- a/effect/clock.gif
+++ b/effect/clock.gif
--- a/effect/clock_css3.gif
+++ b/effect/clock_css3.gif
--- a/effect/clock_preview_inform.png
+++ b/effect/clock_preview_inform.png
--- a/effect/clock_review_css3.png
+++ b/effect/clock_review_css3.png
--- a/effect/designer_effect1.png
+++ b/effect/designer_effect1.png
--- a/effect/designer_effect2.png
+++ b/effect/designer_effect2.png
--- a/lib/report/.gitkeep
+++ b/lib/report/.gitkeep
--- a/plugin.xml
+++ b/plugin.xml
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><plugin>
+    <id>com.fr.plugin.widget.clock</id>
+    <main-package>com.fr.plugin.widget</main-package>
+    <name><![CDATA[时钟控件]]></name>
+    <active>yes</active>
+    <version>1.1</version>
+    <env-version>10.0</env-version>
+    <jartime>2018-10-09</jartime>
+    <vendor>author</vendor>
+    <description><![CDATA[在表单里面展示一个HTML5的动态时钟]]></description>
+    <change-notes><![CDATA[
+        [2017-03-22]PC端无法预览。<br/>
+    ]]>
+    </change-notes>
+    <extra-core>
+        <JavaScriptFileHandler class="com.fr.plugin.widget.clock.ClockJavaScriptFileBridge"/>
+    </extra-core>
+    <extra-report/>
+    <extra-designer>
+        <FormWidgetOptionProvider class="com.fr.plugin.widget.clock.ClockBridge"/>
+    </extra-designer>
+</plugin>
--- a/pom.xml
+++ b/pom.xml
@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <parent>
+        <groupId>com.fr.plugin</groupId>
+        <artifactId>starter</artifactId>
+        <version>10.0</version>
+    </parent>
+
+    <packaging>jar</packaging>
+    <artifactId>demo-show-clock</artifactId>
+    <build>
+        <!---如果要更改调试插件，改这里的配置就可以了-->
+        <outputDirectory>${project.basedir}/../webroot/WEB-INF/plugins/plugin-com.fr.plugin.widget.clock-1.0/classes</outputDirectory>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <configuration>
+                    <source>6</source>
+                    <target>6</target>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+</project>
--- a/src/main/java/com/fr/plugin/widget/clock/ClockBridge.java
+++ b/src/main/java/com/fr/plugin/widget/clock/ClockBridge.java
@ -0,0 +1,40 @@
+package com.fr.plugin.widget.clock;
+
+import com.fr.design.fun.impl.AbstractFormWidgetOptionProvider;
+import com.fr.form.ui.Widget;
+import com.fr.locale.InterProviderFactory;
+import com.fr.plugin.widget.clock.fun.Clock;
+import com.fr.plugin.widget.clock.ui.XClock;
+
+/**
+ * @author richie
+ * @date 2015-03-23
+ * @since 8.0
+ */
+public class ClockBridge extends AbstractFormWidgetOptionProvider {
+
+    @Override
+    public Class<? extends Widget> classForWidget() {
+        return Clock.class;
+    }
+
+    @Override
+    public Class<?> appearanceForWidget() {
+        return XClock.class;
+    }
+
+    @Override
+    public String iconPathForWidget() {
+        return "/com/fr/plugin/widget/clock/images/clock.png";
+    }
+
+    @Override
+    public String nameForWidget() {
+        return InterProviderFactory.getProvider().getLocText("Plugin-Clock_Name");
+    }
+
+    @Override
+    public boolean isContainer() {
+        return false;
+    }
+}
--- a/src/main/java/com/fr/plugin/widget/clock/ClockJavaScriptFileBridge.java
+++ b/src/main/java/com/fr/plugin/widget/clock/ClockJavaScriptFileBridge.java
@ -0,0 +1,19 @@
+package com.fr.plugin.widget.clock;
+
+import com.fr.stable.fun.impl.AbstractJavaScriptFileHandler;
+
+/**
+ * @author richie
+ * @date 2015-03-23
+ * @since 8.0
+ * 如果要使用canvas实现的时钟，就使用widget.clock.js这个文件
+ * 如果要使用css3实现的时钟，就使用widget.otherclock.js这个文件
+ */
+public class ClockJavaScriptFileBridge extends AbstractJavaScriptFileHandler {
+    @Override
+    public String[] pathsForFiles() {
+        return new String[]{
+                "/com/fr/plugin/widget/clock/widget.otherclock.js"
+        };
+    }
+}
--- a/src/main/java/com/fr/plugin/widget/clock/fun/Clock.java
+++ b/src/main/java/com/fr/plugin/widget/clock/fun/Clock.java
@ -0,0 +1,40 @@
+package com.fr.plugin.widget.clock.fun;
+
+import com.fr.form.ui.Widget;
+import com.fr.intelli.record.Focus;
+import com.fr.intelli.record.Original;
+import com.fr.json.JSONException;
+import com.fr.json.JSONObject;
+import com.fr.record.analyzer.EnableMetrics;
+import com.fr.script.Calculator;
+import com.fr.stable.core.NodeVisitor;
+import com.fr.stable.web.Repository;
+
+/**
+ * @author richie
+ * @date 2015-03-23
+ * @since 8.0
+ */
+@EnableMetrics
+public class Clock extends Widget {
+    @Override
+    public String getXType() {
+        return "clock";
+    }
+
+    @Override
+    @Focus(id="ClockConstants", text = "Plugin-Clock_Name", source = Original.PLUGIN)
+    public JSONObject createJSONConfig(Repository repository, Calculator calculator, NodeVisitor nodeVisitor) throws JSONException {
+        return super.createJSONConfig(repository, calculator, nodeVisitor);
+    }
+
+    @Override
+    public boolean isEditor() {
+        return false;
+    }
+
+    @Override
+    public String[] supportedEvents() {
+        return new String[0];
+    }
+}
--- a/src/main/java/com/fr/plugin/widget/clock/fun/ClockConstants.java
+++ b/src/main/java/com/fr/plugin/widget/clock/fun/ClockConstants.java
@ -0,0 +1,6 @@
+package com.fr.plugin.widget.clock.fun;
+
+public class ClockConstants {
+
+    public static final String PLUGIN_ID = "com.fr.plugin.widget.clock";
+}
--- a/src/main/java/com/fr/plugin/widget/clock/ui/XClock.java
+++ b/src/main/java/com/fr/plugin/widget/clock/ui/XClock.java
@ -0,0 +1,32 @@
+package com.fr.plugin.widget.clock.ui;
+
+import com.fr.design.designer.creator.XWidgetCreator;
+import com.fr.general.IOUtils;
+import com.fr.plugin.widget.clock.fun.Clock;
+
+import javax.swing.*;
+import java.awt.*;
+
+/**
+ * @author richie
+ * @date 2015-03-23
+ * @since 8.0
+ */
+public class XClock extends XWidgetCreator {
+
+    public XClock(Clock widget, Dimension initSize) {
+        super(widget, initSize);
+    }
+
+    @Override
+    protected JComponent initEditor() {
+        if (editor == null) {
+            editor = new JLabel(IOUtils.readIcon(getIconPath()));
+        }
+        return editor;
+    }
+
+    public String getIconPath() {
+        return "/com/fr/plugin/widget/clock/images/clock.png";
+    }
+}
--- a/src/main/resources/com/fr/plugin/widget/clock/images/clock.png
+++ b/src/main/resources/com/fr/plugin/widget/clock/images/clock.png
--- a/src/main/resources/com/fr/plugin/widget/clock/locale/clock.properties
+++ b/src/main/resources/com/fr/plugin/widget/clock/locale/clock.properties
@ -0,0 +1 @@
+Plugin-Clock_Name=Clock
--- a/src/main/resources/com/fr/plugin/widget/clock/locale/clock_zh_CN.properties
+++ b/src/main/resources/com/fr/plugin/widget/clock/locale/clock_zh_CN.properties
@ -0,0 +1 @@
+Plugin-Clock_Name=\u65F6\u949F
--- a/src/main/resources/com/fr/plugin/widget/clock/widget.clock.js
+++ b/src/main/resources/com/fr/plugin/widget/clock/widget.clock.js
@ -0,0 +1,125 @@
+(function () {
+    /**
+     * @class FR.Clock
+     * @extends FR.Widget
+     * 这个时钟使用canvas画的
+     */
+    FR.Clock = FR.extend(FR.Widget, {
+        _defaultConfig: function () {
+            return $.extend(FR.Clock.superclass._defaultConfig.apply(), {
+                baseCls: 'fr-clock'
+            });
+        },
+
+        _init: function () {
+            FR.Clock.superclass._init.apply(this, arguments);
+            var o = this.options;
+            var wh = Math.min(o.width, o.height);
+            this.$canvas = $("<canvas>").attr({
+                width: wh,
+                height: wh
+            }).css({
+                position : 'absolute',
+                top : wh == o.width ? (o.height - wh) / 2 : 0,
+                left : wh == o.height ? (o.width - wh) / 2 : 0
+            }).appendTo(this.element);
+            this.draw(this.$canvas[0]);
+        },
+
+        draw: function (canvas) {
+            var ctx = canvas.getContext("2d");
+            this.ctx = ctx;
+            var radius = canvas.height / 2;
+            ctx.translate(radius, radius);
+            radius = radius * 0.90
+            setInterval(drawClock, 1000);
+
+            function drawClock() {
+                drawFace(ctx, radius);
+                drawNumbers(ctx, radius);
+                drawTime(ctx, radius);
+            }
+
+            function drawFace(ctx, radius) {
+                var grad;
+                ctx.beginPath();
+                ctx.arc(0, 0, radius, 0, 2 * Math.PI);
+                ctx.fillStyle = 'white';
+                ctx.fill();
+                grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
+                grad.addColorStop(0, '#333');
+                grad.addColorStop(0.5, 'white');
+                grad.addColorStop(1, '#333');
+                ctx.strokeStyle = grad;
+                ctx.lineWidth = radius * 0.1;
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
+                ctx.fillStyle = '#333';
+                ctx.fill();
+            }
+
+            function drawNumbers(ctx, radius) {
+                var ang;
+                var num;
+                ctx.font = radius * 0.15 + "px arial";
+                ctx.textBaseline = "middle";
+                ctx.textAlign = "center";
+                for (num = 1; num < 13; num++) {
+                    ang = num * Math.PI / 6;
+                    ctx.rotate(ang);
+                    ctx.translate(0, -radius * 0.85);
+                    ctx.rotate(-ang);
+                    ctx.fillText(num.toString(), 0, 0);
+                    ctx.rotate(ang);
+                    ctx.translate(0, radius * 0.85);
+                    ctx.rotate(-ang);
+                }
+            }
+
+            function drawTime(ctx, radius) {
+                var now = new Date();
+                var hour = now.getHours();
+                var minute = now.getMinutes();
+                var second = now.getSeconds();
+                //hour
+                hour = hour % 12;
+                hour = (hour * Math.PI / 6) +
+                (minute * Math.PI / (6 * 60)) +
+                (second * Math.PI / (360 * 60));
+                drawHand(ctx, hour, radius * 0.5, radius * 0.07);
+                //minute
+                minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
+                drawHand(ctx, minute, radius * 0.8, radius * 0.07);
+                // second
+                second = (second * Math.PI / 30);
+                drawHand(ctx, second, radius * 0.9, radius * 0.02);
+            }
+
+            function drawHand(ctx, pos, length, width) {
+                ctx.beginPath();
+                ctx.lineWidth = width;
+                ctx.lineCap = "round";
+                ctx.moveTo(0, 0);
+                ctx.rotate(pos);
+                ctx.lineTo(0, -length);
+                ctx.stroke();
+                ctx.rotate(-pos);
+            }
+        },
+
+        doResize: function (give) {
+            //var o = this.options, canvas = this.$canvas[0];
+            FR.Clock.superclass.doResize.apply(this, arguments);
+            //var wh = Math.min(o.width, o.height);
+            //canvas.width = wh;
+            //canvas.height = wh;
+            //canvas.style.top = wh == o.width ? (o.height - wh) / 2 : 0 + "px";
+            //canvas.style.left = wh == o.height ? (o.width - wh) / 2 : 0 + "px";
+            //this.ctx.clearRect(0, 0, 2000, 2000);
+            //this.draw(this.$canvas[0]);
+        }
+
+    });
+    $.shortcut("clock", FR.Clock);
+})(jQuery);
--- a/src/main/resources/com/fr/plugin/widget/clock/widget.otherclock.js
+++ b/src/main/resources/com/fr/plugin/widget/clock/widget.otherclock.js
@ -0,0 +1,120 @@
+(function () {
+    $.extend(FR, {
+        rotateTo : function(d) {
+            return '-webkit-transform:rotate(' + d + 'deg);-moz-transform:rotate(' + d + 'deg);-o-transform:rotate(' + d + 'deg);-ms-transform:rotate(' + d + 'deg);'
+        }
+    });
+    /**
+     * @class FR.OtherClock
+     * @extends FR.Widget
+     * 这个时钟是用CSS3实现的
+     */
+    FR.OtherClock = FR.extend(FR.Widget, {
+        _defaultConfig: function () {
+            return $.extend(FR.OtherClock.superclass._defaultConfig.apply(), {
+                baseCls: 'fr-clock'
+            });
+        },
+
+        _init: function () {
+            FR.OtherClock.superclass._init.apply(this, arguments);
+            this._buildAndRun();
+        },
+
+        _createClockHtml: function (o) {
+            var p = 'position:absolute;left:50%;top:50%;', hw = o.w * 0.04, hh = o.w * 0.52, mw = o.w * 0.04, mh = o.w * 0.64, sw = o.w * 0.02, sh = o.w * 0.98, a = "";
+
+            function rotateTo(d) {
+                return '-webkit-transform:rotate(' + d + 'deg);-moz-transform:rotate(' + d + 'deg);-o-transform:rotate(' + d + 'deg);-ms-transform:rotate(' + d + 'deg);'
+            }
+
+            function setCover(s, z, c) {
+                return '<div style="width:' + (o.w * s) + 'px;height:' + (o.w * s) + 'px;' + p + 'z-index:' + z + ';margin-left:' + (-o.w * s * 0.5) + 'px;margin-top:' + (-o.w * s * 0.5) + 'px;border-radius:' + (o.w * s * 0.5) + 'px;background-color:' + c + ';"></div>'
+            }
+
+            function setHands(hand, width, height, color, index) {
+                return '<p class="' + hand + '" style="width:' + width + 'px;height:' + height + 'px;' + p + 'z-index:' + index + ';margin-left:' + (-width * 0.5) + 'px;margin-top:' + (-height * 0.5) + 'px;"><span style="display:block;width:100%;height:' + (height * 0.7) + 'px;background-color:' + color + ';"></span></p>'
+            }
+
+            for (var n = 0; n < 30; n++) {
+                var nd = n * 6;
+                a += '<p style="width:' + (o.w * 0.02) + 'px;height:100%;' + p + 'z-index:0;margin-left:' + (-o.w * 0.01) + 'px;margin-top:' + (-o.w * 0.5) + 'px;background:#444;' + rotateTo(nd) + '"></p>'
+            }
+            for (var j = 0; j < 6; j++) {
+                var jd = j * 30;
+                a += '<p style="width:' + (o.w * 0.04) + 'px;height:100%;' + p + 'z-index:2;margin-left:-' + (o.w * 0.02) + 'px;margin-top:' + (-o.w * 0.5) + 'px;background:#333;' + rotateTo(jd) + '"></p>'
+            }
+            for (var i = 1; i < 13; i++) {
+                var id = i * 30;
+                a += '<p style="width:' + (o.w * 0.24) + 'px;height:' + (o.w * 0.92) + 'px;' + p + 'z-index:4;margin-left:' + (-o.w * 0.12) + 'px;margin-top:' + (-o.w * 0.46) + 'px;' + rotateTo(id) + '"><span style="display:block;width:100%;height:' + (o.w * 0.14) + 'px;line-height:' + (o.w * 0.14) + 'px;' + rotateTo(-id) + '">' + i + '</span></p>'
+            }
+            var pc = '<div id="' + o.id + '" style="width:' + o.w + 'px;height:' + o.w + 'px;position:absolute;' + 'left:' + o.left + 'px;'+'top:'+ o.top + 'px;' +'border-radius:' + (o.w * 0.54) + 'px;border:' + (o.w * 0.04) + 'px solid ' + o.c + ';background-color:' + o.bc + ';text-align:center;font:' + (o.w * 0.12) + 'px \'Helvetica\';">' + setCover(0.96, 1, o.bc) + setCover(0.92, 3, o.bc) + setCover(0.08, 8, '#555') + setCover(0.02, 9, '#eee') + setHands('clock-h', hw, hh, o.hc, 5) + setHands('clock-m', mw, mh, o.mc, 6) + setHands('clock-s', sw, sh, o.sc, 7);
+            pc += a;
+            pc += '</div>';
+            return pc;
+        },
+
+        run : function() {
+            var self = this;
+            var t = new Date(), h = t.getHours(), m = t.getMinutes(), s = t.getSeconds();
+            if (h > 12) {
+                h -= 12
+            }
+            $('.clock-s', this.element).each(function(){
+                this.style.cssText += FR.rotateTo(6 * s);
+            });
+            $('.clock-m', this.element).each(function(){
+                this.style.cssText += FR.rotateTo(6 * m + 0.1 * s);
+            });
+            $('.clock-h', this.element).each(function(){
+                this.style.cssText += FR.rotateTo(30 * h + 0.5 * m + s / 120);
+            });
+            if (this.stopped !== true) {
+                setTimeout(function () {
+                    self.run();
+                }, 30)
+            }
+        },
+
+        /**
+         * 对外开放的API，在停止时钟转动后，重新启动
+         */
+        start : function() {
+            this.stopped = false;
+            this.run();
+        },
+
+        /**
+         * 停止时钟转动
+         */
+        stop : function() {
+            this.stopped = true;
+        },
+
+        _buildAndRun : function() {
+            var o = this.options;
+            var w = Math.min(o.width, o.height);
+            this.element[0].innerHTML = '';
+            this.element[0].innerHTML = this._createClockHtml({
+                id : o.widgetName,
+                w: w - w * 0.04 * 2,
+                top : w == o.width ? (o.height - w) / 2 : 0,
+                left : w == o.height ? (o.width - w) / 2 : 0,
+                c: "#6c0",		// 钟框颜色
+                bc: "#fff",		// 钟面颜色
+                hc: "#333",		// 时针颜色
+                mc: "#DDB11A",	// 分针颜色
+                sc: "#DC0D07"	// 秒针颜色
+            });
+            var self = this;
+            setTimeout(self.run.createDelegate(self), 200);
+        },
+
+        doResize: function (give) {
+            FR.OtherClock.superclass.doResize.apply(this, arguments);
+            this._buildAndRun();
+        }
+
+    });
+    $.shortcut("clock", FR.OtherClock);
+})(jQuery);