zoukankan      html  css  js  c++  java
  • 倒计时效果

    <script src="http://wiki.zx.shopex.cn/demos/source/moo.js"></script>
    <script src="http://wiki.zx.shopex.cn/demos/source/switchable.js"></script>

    实例展示实例一实例二实例三

    需要的DOM结构

    <div class="moo-countdown-run"><!-- 对应内容 --></div>
    <div class="moo-countdown-end"><!-- 对应内容 --></div>
    <div class="time-count moo-countdown-run">
    	<p class="tit">剩余时间: </p>
    	<span class="moo-h value"></span><span class="unit">小时</span>
    	<span class="moo-m value"></span><span class="unit">分</span>
    	<span class="moo-s value"></span><span class="unit">秒</span>
    </div>
    

    组件调用方法

    <div class="Auto_Widget" data-widget-type="Countdown"  data-widget-config="{
    				 'endTime': '10000',
    				 'interval': 1000, 
    				 'timeRunCls': '.moo-countdown-run', 
    				 'timeUnitCls':{     
    					'h': '.moo-h',       
    					'm': '.moo-m',       
    					's': '.moo-s',              
    				 },
    				 'minDigit': 2,
    				 'timeEndCls': '.moo-countdown-end'
    			}">
    	  <!--  这里可设置倒计时及其他内容  -->
    </div>
    

    配置参数表格

    参数名参数含义参数默认值
    endTime 倒计时剩余时间 暂时仅支持毫秒(ms)形式
    interval 倒计时刷新间隔(单位为毫秒/次)即每多少毫秒刷新一次。取值范围(>=100毫秒),默认值为1000毫秒 1000
    timeRunCls 在倒计时运行时显示,结束时隐藏的class名称 .count-run
    timeEndCls 在倒计时运行时隐藏,结束时显示的class名称 .count-end
    isMsecond 是否开启毫秒计量(true/false) false
    dataFormat 显示时间格式位数 例如4为天-小时-分钟-秒 3为小时-分钟-秒 3
    minDigit 显示时间位数,1位数还是2位数.可选参数 1
    onEnd 结束时可写自定义回调函数,可选参数 -
    timeUnitCls 设定时间单位的class,d-天,h-时,m-分,s-秒,i-毫秒 'd': '.count-d','h': '.count-h','m': '.count-m','s': '.count-s','i': '.count-i'

         

    //返回结束时间或开始时间与当前时间的差(毫秒)---为mootools倒计时准备
        public function getmillsec($start_time,$end_time)
        {
            //当前时间戳
            $c_time=time();
            //当前时间毫秒
              
              $current_time = $this->getmill(0);
              if($c_time<$start_time)
              {
               
                $time = $this->getmill($start_time);
                $millsec=$current_time-$time;
               
              }elseif ($c_time>$end_time) {
                $millsec= 0;
            } else { 
                $time = $this->getmill($end_time);
                $millsec=$time-$current_time;
            }
            return $millsec;
               
        }
        
        public function getmill($ctime=0)
        {
            if($ctime==0){$ctime=microtime();}
                $time = explode ( " ",  $ctime );  
                $time = $time[1].($time[0]*1000);  
                $time2 = explode ( ".", $time );  
                $time = $time2[0];
                return $time;
        }
  • 相关阅读:
    关于阿里云带宽监控指标记录
    mongodb备份还原
    squid3.5缓存代理实践记录
    kafka依赖zookeeper原因解析及应用场景
    Zookeeper+Kafka集群部署(转)
    dubbo框架提供Main方法运行容器的几种方式(转)
    html标签简介(常用)
    数据库中和表并列的其他对象
    外键约束
    数据库中的约束
  • 原文地址:https://www.cnblogs.com/limonyun/p/7690951.html
Copyright © 2011-2022 走看看