插件开发 ATwidget 独立功能 Clock - 时钟 倒计时

dd

关于AT-widget 如果你用过淘宝的kissy或者你是淘宝设计师也许你看就基本明白 AT-widget是什么 AT-widget能做什么。

为什么开发 AT-widget? 方便 简洁 易上手 。

为什么不直接用 kissy?也许大部分功能用不上。文件也很大。可以讲是我的一个借口吧··

AT-widget运行效率怎么样?对于大牛来讲 只能讲一般般吧。


现在给大家一个例子【Clock 功能】,看看ATwidget的作用

插件基于jQuery 开发所以jQuery引入是必不可少的


<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="AT-widget.js"></script><!--这个是ATwidget 插件-->

<div class="AT-Widget" attop-widget-type="Clock"  attop-widget-config="{
    'view':'d',
    'endTime': '3016/8/1 14:03:20',
    'interval': 1,
    'd': '.at-d',      
    'h': '.at-h',      
    'm': '.at-m',      
    's': '.at-s', 
    'minDigit': 1,
    'timeRunCls': '.at-countdown-run',
    'timeEndCls': '.at-countdown-end'
}">
    <!-- 倒计时结束时隐藏-->
    <!--可以写多个 -->
    <div class="at-countdown-run">
      <span class="at-d">0</span>天
      <span class="at-h">0</span>小时
      <span class="at-m">0</span>分
         
      <span class="at-s">0</span>秒
      <!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 -->
    </div>
    
     <!-- 倒计时结束时显示-->
     <!--可以写多个 -->
    <div class="at-countdown-end">
    倒计时结束了!! hello AT-Widget
    </div>
</div>

运行效果如下:

8天 02小时 11分 30秒

觉得以上还是很复杂?下面这个怎么样

<div class="AT-Widget" attop-widget-type="Clock"  attop-widget-config="{ 'endTime': '3016/8/1 14:03:20'}">
    <div class="at-countdown-run">
      <span class="at-d">0</span>天
      <span class="at-h">0</span>小时
      <span class="at-m">0</span>分
      <span class="at-s">0</span>秒
      <!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 -->
    </div>
    
    <div class="at-countdown-end">
    倒计时结束了!! hello AT-Widget
    </div>
</div>

运行效果一样的


如果只想显示秒?

<div class="AT-Widget" attop-widget-type="Clock"  attop-widget-config="{ 'view':'s','endTime': '3016/8/1 14:03:20'}">
    <div class="at-countdown-run">
      <span class="at-s">0</span>秒
    </div>
    <div class="at-countdown-end">
    倒计时结束了!! hello AT-Widget
    </div>
</div>

一个计时器不够?两个怎么样?

<div class="AT-Widget" attop-widget-type="Clock"  attop-widget-config="{ 'view':'s','endTime': '3016/8/1 14:03:20'}">
    <div class="at-countdown-run">
      <span class="at-s">0</span>秒
    </div>
    <div class="at-countdown-end">
    倒计时结束了!! hello AT-Widget
    </div>
</div>
<div class="AT-Widget" attop-widget-type="Clock"  attop-widget-config="{ 'view':'s','endTime': '2316/8/1 14:03:20'}">
    <div class="at-countdown-run">
      <span class="at-s">0</span>秒
    </div>
    <div class="at-countdown-end">
    倒计时结束了!! hello AT-Widget
    </div>
</div>
三个

四个

一百个
...

样色不好看?

干····

你想要多少套样色都可以·

默认返回的格式是这样的,很方便修改各自的样色

<div class="at-countdown-run at-theme-o">
      <span class="at-d"><i class="at-theme-clock1">1</i><i class="at-theme-clock2">2</i><i class="at-theme-clock9">9</i></span>天
      <span class="at-h"><i class="at-theme-clock2">2</i><i class="at-theme-clock1">1</i></span>小时
      <span class="at-m"><i class="at-theme-clock4">4</i><i class="at-theme-clock0">0</i></span>分
      <span class="at-s"><i class="at-theme-clock4">4</i><i class="at-theme-clock0">0</i></span>秒
      <!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 -->
</div>

1.jpg 

  


AT-widget源码地址

****** 为防止小偷程序,此处内容已隐藏,需评论后可见。 原文出处:爱星雾月 ******

下载地址:源码地址请加QQ群:326420142


参考文档

配置参数参数可选值作用说明
viewd/h/m/s

(默认值:d)

将时间格式话到指定 最大单位 格式 2016/12/1 14:03:20


endTime

自定义时间

(默认值:当前时间客户端)

倒计时结束时间


interval

自定义刷新秒数

 (默认值:1)

刷新秒数 单位:1秒 通常不需要修改这项
d

自定义样色类

(默认值:.at-d)

必须带‘.’点号 日期样色
h

自定义样色类

(默认值:.at-h)

时间样色
m

自定义样色类

(默认值:.at-m)

分钟样色
s

自定义样色类

(默认值:.at-s)

秒样色
timeRunCls

(默认值:.at-countdown-run)

时钟容器 有此class名的标签,其内容在倒计时运行时显示,倒计时结束时隐藏
timeEndCls(默认值:.at-countdown-end)有此class名的标签,其内容在倒计时运行时隐藏,倒计时结束时显示


本站文章除注明转载外,均为本站原创

欢迎任何形式的转载,但请务必注明出处,尊重他人劳动

转载注明:文章转载自:爱星雾月个人网站[http://www.wti0.com]

本文标题:插件开发 ATwidget 独立功能 Clock - 时钟 倒计时

原文地址:https://www.wti0.com/post/47.html

« ubuntu下 nginx 操作技巧 关于服务器丢失MSVCR100.dll MSVCR110.dll »

评论列表:

1.Atwidget  2016-08-06 22:12:30 回复该评论

该独立功能在新版中更新,详情查看 http://at-widget.wti0.com

2.获取地址  2017-04-07 10:07:00 回复该评论

谢谢,刚好有用,看到你这个插件还有很强大的功能,但是隐藏了!!!

3.php  2017-08-11 10:21:26 回复该评论

怎么获取这个插件啊?

3.爱星雾月  2017-11-20 23:00:30 回复该评论

回复即可获取,软件版本有升级,这个版本很低

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。