Skip to content

V
vue2-countdown
Commit 1e8e9645 authored by jinxi's avatar jinxi
Browse files
Options

first commit

parent 3b043fca
Pipeline #274 failed with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 1004 additions and 0 deletions
      .idea/copyright/profiles_settings.xml 0 → 100644
      View file @ 1e8e9645
      <component name="CopyrightManager">
      <settings default="" />
      </component>
      \ No newline at end of file
      .idea/jsLibraryMappings.xml 0 → 100644
      View file @ 1e8e9645
      <?xml version="1.0" encoding="UTF-8"?>
      <project version="4">
      <component name="JavaScriptLibraryMappings">
      <file url="PROJECT" libraries="{vue}" />
      <includedPredefinedLibrary name="ECMAScript 6" />
      </component>
      </project>
      \ No newline at end of file
      .idea/misc.xml 0 → 100644
      View file @ 1e8e9645
      <?xml version="1.0" encoding="UTF-8"?>
      <project version="4">
      <component name="JavaScriptSettings">
      <option name="languageLevel" value="ES6" />
      </component>
      <component name="ProjectInspectionProfilesVisibleTreeState">
      <entry key="Project Default">
      <profile-state>
      <expanded-state>
      <State>
      <id />
      </State>
      <State>
      <id>File Watchers</id>
      </State>
      <State>
      <id>GeneralJavaScript</id>
      </State>
      <State>
      <id>HTML</id>
      </State>
      <State>
      <id>JavaScript</id>
      </State>
      <State>
      <id>Node.jsJavaScript</id>
      </State>
      <State>
      <id>PHP</id>
      </State>
      <State>
      <id>Type compatibilityPHP</id>
      </State>
      <State>
      <id>UndefinedPHP</id>
      </State>
      <State>
      <id>XML</id>
      </State>
      </expanded-state>
      <selected-state>
      <State>
      <id>AngularJS</id>
      </State>
      </selected-state>
      </profile-state>
      </entry>
      </component>
      <component name="SvnConfiguration">
      <configuration>$USER_HOME$/.subversion</configuration>
      </component>
      </project>
      \ No newline at end of file
      .idea/modules.xml 0 → 100644
      View file @ 1e8e9645
      <?xml version="1.0" encoding="UTF-8"?>
      <project version="4">
      <component name="ProjectModuleManager">
      <modules>
      <module fileurl="file://$PROJECT_DIR$/.idea/vue2-countdown.iml" filepath="$PROJECT_DIR$/.idea/vue2-countdown.iml" />
      </modules>
      </component>
      </project>
      \ No newline at end of file
      .idea/vcs.xml 0 → 100644
      View file @ 1e8e9645
      <?xml version="1.0" encoding="UTF-8"?>
      <project version="4">
      <component name="VcsDirectoryMappings">
      <mapping directory="$PROJECT_DIR$" vcs="Git" />
      </component>
      </project>
      \ No newline at end of file
      .idea/vue2-countdown.iml 0 → 100644
      View file @ 1e8e9645
      <?xml version="1.0" encoding="UTF-8"?>
      <module type="WEB_MODULE" version="4">
      <component name="NewModuleRootManager">
      <content url="file://$MODULE_DIR$" />
      <orderEntry type="inheritedJdk" />
      <orderEntry type="sourceFolder" forTests="false" />
      <orderEntry type="library" name="vue" level="application" />
      </component>
      </module>
      \ No newline at end of file
      .idea/watcherTasks.xml 0 → 100644
      View file @ 1e8e9645
      <?xml version="1.0" encoding="UTF-8"?>
      <project version="4">
      <component name="ProjectTasksOptions" suppressed-tasks="Babel" />
      </project>
      \ No newline at end of file
      .idea/workspace.xml 0 → 100644
      View file @ 1e8e9645
      This diff is collapsed.
      LICENSE 0 → 100644
      View file @ 1e8e9645
      MIT License
      Copyright (c) 2016 小鱼
      Permission is hereby granted, free of charge, to any person obtaining a copy
      of this software and associated documentation files (the "Software"), to deal
      in the Software without restriction, including without limitation the rights
      to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
      copies of the Software, and to permit persons to whom the Software is
      furnished to do so, subject to the following conditions:
      The above copyright notice and this permission notice shall be included in all
      copies or substantial portions of the Software.
      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
      IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
      FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
      AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
      LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
      OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
      SOFTWARE.
      _config.yml 0 → 100644
      View file @ 1e8e9645
      theme: jekyll-theme-cayman
      \ No newline at end of file
      example/index.html 0 → 100644
      View file @ 1e8e9645
      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue2-countdown</title>
      <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
      <script type="text/javascript" src="//cdn.bootcss.com/vue/2.1.4/vue.js"></script>
      </head>
      <body>
      <div id="demo">
      <div class="container">
      <div class="row">
      <div class="col-md-12">
      <h3>vue2-countdown example</h3>
      <p>
      使用文档：<a href="https://github.com/cgygd/vue2-countdown#vue2-countdown" target="_blank">https://github.com/cgygd/vue2-countdown#options</a>
      </p>
      <div class="panel panel-default">
      <div class="panel-heading">
      <b>默认配置</b>
      </div>
      <div class="panel-body text-danger">
      <count-down :current-time="1481450106" :start-time="1481450116" :end-time="1481450126" v-on:start_callback="countDownS_cb(1)" v-on:end_callback="countDownE_cb(1)"></count-down>
      </div>
      </div>
      <div class="panel panel-default">
      <div class="panel-heading">
      <b>自定义文字</b>
      </div>
      <div class="panel-body text-danger">
      <count-down :current-time="1481450106" :start-time="1481450126" :end-time="1481450216" :tip-text="'自定义开始文字'" :tip-text-end="'自定义结束文字'" :end-text="'结束啦～'" v-on:start_callback="countDownS_cb(2)" v-on:end_callback="countDownE_cb(2)"></count-down>
      </div>
      </div>
      <div class="panel panel-default">
      <div class="panel-heading">
      <b>不传服务器当前时间戳(默认获取用户本地时间戳)</b>
      </div>
      <div class="panel-body text-danger">
      <count-down :start-time="startTime" :end-time="endTime" v-on:start_callback="countDownS_cb(3)" v-on:end_callback="countDownE_cb(3)"></count-down>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      <script type="text/javascript" src="./lib/vue2-countdown.js"></script>
      <script type="text/javascript">
      var vm = new Vue({
      el: '#demo',
      data:{
      callBk:'',
      startTime:( new Date() ).getTime()+(100*300),
      endTime:( new Date() ).getTime()+(500*500)
      },
      components: {
      'count-down': countdown,
      'readme':readme
      },
      methods:{
      countDownS_cb:function(a){
      console.log('callBack--'+a+'--开始倒计时结束回调');
      },
      countDownE_cb:function(a){
      console.log('callBack--'+a+'--活动剩余倒计时结束回调');
      }
      },
      })
      </script>
      </body>
      </html>
      example/lib/vue2-countdown.js 0 → 100644
      View file @ 1e8e9645
      var countdown = {
      template: '<div><p v-if="msTime.show"><span v-if="tipShow">{{tipText}}:</span><span v-if="!tipShow">{{tipTextEnd}}:</span><span v-if="msTime.day>0"><span>{{msTime.day}}</span>天</span><span>{{msTime.hour}}</span>:<span>{{msTime.minutes}}</span>:<span>{{msTime.seconds}}</span></p><p v-if="!msTime.show">{{endText}}</p></div>',
      replace:true,
      data () {
      return {
      tipShow:true,
      msTime:{ //倒计时数值
      show:false, //倒计时状态
      day:'', //天
      hour:'', //小时
      minutes:'', //分钟
      seconds:'' //秒
      },
      star:'', //活动开始时间
      end:'', //活动结束时间
      current:'', //当前时间
      }
      },
      props:{
      //距离开始提示文字
      tipText:{
      type: String,
      default :'距离开始'
      },
      //距离结束提示文字
      tipTextEnd:{
      type: String,
      default :'距离结束'
      },
      //时间控件ID
      id:{
      type: String,
      default :'1'
      },
      //当前时间
      currentTime:{
      type: Number
      },
      // 活动开始时间
      startTime:{
      type: Number
      },
      // 活动结束时间
      endTime: {
      type: Number
      },
      // 倒计时结束显示文本
      endText:{
      type:String,
      default:'已结束'
      },
      //是否开启秒表倒计，未完成
      secondsFixed:{
      type:Boolean,
      defaule:false
      }
      },
      mounted () {
      //判断是秒还是毫秒
      this.startTime.toString().length==10 ? this.star = this.startTime*1000 : this.star = this.startTime;
      this.endTime.toString().length==10 ? this.end = this.endTime*1000 : this.end = this.endTime;
      if(this.currentTime){
      this.currentTime.toString().length==10 ? this.current = this.currentTime*1000 : this.current = this.currentTime;
      }else {
      this.current=( new Date() ).getTime();
      }
      if(this.end<this.current){
      /**
      * 结束时间小于当前时间 活动已结束
      */
      this.msTime.show = false;
      this.end_message();
      }
      else if(this.current<this.star){
      /**
      * 当前时间小于开始时间 活动尚未开始
      */
      this.$set(this,'tipShow',true);
      setTimeout(()=>{
      this.runTime(this.star,this.current,this.start_message);
      },1);
      }
      else if(this.end>this.current&&this.star<this.current||this.star==this.current){
      /**
      * 结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时
      */
      this.$set(this,'tipShow',false);
      this.msTime.show = true;
      this.$emit('start_callback', this.msTime.show);
      setTimeout(()=>{
      this.runTime(this.end,this.star,this.end_message,true)
      },1);
      }
      },
      methods: {
      runTime (startTime,endTime,callFun,type) {
      let msTime = this.msTime;
      let timeDistance = startTime - endTime;
      if( timeDistance > 0 ){
      this.msTime.show = true;
      msTime.day = Math.floor( timeDistance / 86400000 );
      timeDistance-= msTime.day * 86400000;
      msTime.hour = Math.floor( timeDistance / 3600000 );
      timeDistance-= msTime.hour * 3600000;
      msTime.minutes = Math.floor( timeDistance / 60000 );
      timeDistance-= msTime.minutes * 60000;
      //是否开启秒表倒计,未完成
      // this.secondsFixed ? msTime.seconds = new Number(timeDistance / 1000).toFixed(2) : msTime.seconds = Math.floor( timeDistance / 1000 ).toFixed(0);
      msTime.seconds = Math.floor( timeDistance / 1000 ).toFixed(0);
      timeDistance-= msTime.seconds * 1000;
      if( msTime.hour < 10){
      msTime.hour = "0" + msTime.hour;
      }
      if(msTime.minutes < 10){
      msTime.minutes= "0" + msTime.minutes;
      }
      if(msTime.seconds < 10) {
      msTime.seconds = "0" + msTime.seconds;
      }
      let _s = Date.now();
      let _e = Date.now();
      let diffPerFunc = _e - _s;
      setTimeout(()=>{
      if(type){
      this.runTime(this.end,endTime+=1000,callFun,true);
      }else{
      this.runTime(this.star,endTime+=1000,callFun);
      }
      },1000-diffPerFunc)
      }
      else {
      callFun();
      }
      },
      start_message () {
      this.$set(this,'tipShow',false);
      this.$emit('start_callback', this.msTime.show);
      setTimeout(()=>{
      this.runTime(this.end,this.star,this.end_message,true)
      },1);
      },
      end_message(){
      this.msTime.show = false;
      this.$emit('end_callback', this.msTime.show);
      }
      }
      };
      var readme= {
      template: '<p>11111</p>',
      };
      index.js 0 → 100644
      View file @ 1e8e9645
      module.exports=require('./lib/vue2-countdown.vue')
      lib/vue2-countdown.vue 0 → 100644
      View file @ 1e8e9645
      <template>
      <div>
      <p v-if="msTime.show">
      <!--<span v-if="tipShow">{{tipText}}:</span>-->
      <!--<span v-if="!tipShow">{{tipTextEnd}}:</span>-->
      <span v-if="msTime.day>0"><span class='time_down_bgg'>{{msTime.day}}</span><i>{{dayTxt}}</i></span>
      <span class='time_down_bgg'>{{msTime.hour}}</span><i>{{hourTxt}}</i>
      <span class='time_down_bgg'> {{msTime.minutes}}</span><i>{{minutesTxt}}</i>
      <span class='time_down_bgg'>{{msTime.seconds}}</span><i>{{secondsTxt}}</i>
      </p>
      <!--<p v-if="!msTime.show">{{endText}}</p>-->
      </div>
      </template>
      <script>
      export default {
      replace: true,
      data () {
      return {
      tipShow: true,
      msTime: { //倒计时数值
      show: false, //倒计时状态
      day: '', //天
      hour: '', //小时
      minutes: '', //分钟
      seconds: '' //秒
      },
      star: '', //活动开始时间
      end: '', //活动结束时间
      current: '', //当前时间
      }
      },
      watch: {
      currentTime: function (val, oldval) {
      this.gogogo();
      }
      },
      props: {
      //距离开始提示文字
      tipText: {
      type: String,
      default: '距离开始'
      },
      //距离结束提示文字
      tipTextEnd: {
      type: String,
      default: '距离结束'
      },
      //时间控件ID
      id: {
      type: String,
      default: '1'
      },
      //当前时间
      currentTime: {
      type: Number
      },
      // 活动开始时间
      startTime: {
      type: Number
      },
      // 活动结束时间
      endTime: {
      type: Number
      },
      // 倒计时结束显示文本
      endText: {
      type: String,
      default: '已结束'
      },
      //自定义显示文字:天
      dayTxt: {
      type: String,
      default: ':'
      },
      //自定义显示文字:时
      hourTxt: {
      type: String,
      default: ':'
      },
      //自定义显示文字:分
      minutesTxt: {
      type: String,
      default: ':'
      },
      secondsTxt: {
      type: String,
      default: ':'
      },
      //是否开启秒表倒计，未完成
      secondsFixed: {
      type: Boolean,
      default: false
      },
      },
      mounted () {
      console.log(this)
      this.gogogo();
      },
      methods: {
      gogogo: function () {
      //判断是秒还是毫秒
      this.startTime.toString().length == 10 ? this.star = this.startTime * 1000 : this.star = this.startTime;
      this.endTime.toString().length == 10 ? this.end = this.endTime * 1000 : this.end = this.endTime;
      if (this.currentTime) {
      this.currentTime.toString().length == 10 ? this.current = this.currentTime * 1000 : this.current = this.currentTime;
      } else {
      this.current = ( new Date() ).getTime();
      }
      if (this.end < this.current) {
      /**
      * 结束时间小于当前时间 活动已结束
      */
      this.msTime.show = false;
      this.end_message();
      }
      else if (this.current < this.star) {
      /**
      * 当前时间小于开始时间 活动尚未开始
      */
      this.$set(this, 'tipShow', true);
      setTimeout(() => {
      this.runTime(this.star, this.current, this.start_message);
      }, 1);
      }
      else if (this.end > this.current && this.star < this.current || this.star == this.current) {
      /**
      * 结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时
      */
      this.$set(this, 'tipShow', false);
      this.msTime.show = true;
      this.$emit('start_callback', this.msTime.show);
      setTimeout(() => {
      this.runTime(this.end, this.star, this.end_message, true)
      }, 1);
      }
      },
      runTime (startTime, endTime, callFun, type) {
      let msTime = this.msTime;
      let timeDistance = startTime - endTime;
      if (timeDistance > 0) {
      this.msTime.show = true;
      msTime.day = Math.floor(timeDistance / 86400000);
      timeDistance -= msTime.day * 86400000;
      msTime.hour = Math.floor(timeDistance / 3600000);
      timeDistance -= msTime.hour * 3600000;
      msTime.minutes = Math.floor(timeDistance / 60000);
      timeDistance -= msTime.minutes * 60000;
      //是否开启秒表倒计,未完成
      // this.secondsFixed ? msTime.seconds = new Number(timeDistance / 1000).toFixed(2) : msTime.seconds = Math.floor( timeDistance / 1000 ).toFixed(0);
      msTime.seconds = Math.floor(timeDistance / 1000).toFixed(0);
      timeDistance -= msTime.seconds * 1000;
      if (msTime.hour < 10) {
      msTime.hour = "0" + msTime.hour;
      }
      if (msTime.minutes < 10) {
      msTime.minutes = "0" + msTime.minutes;
      }
      if (msTime.seconds < 10) {
      msTime.seconds = "0" + msTime.seconds;
      }
      let _s = Date.now();
      let _e = Date.now();
      let diffPerFunc = _e - _s;
      setTimeout(() => {
      if (type) {
      this.runTime(this.end, endTime += 1000, callFun, true);
      } else {
      this.runTime(this.star, endTime += 1000, callFun);
      }
      }, 1000 - diffPerFunc)
      }
      else {
      callFun();
      }
      },
      start_message () {
      this.$set(this, 'tipShow', false);
      this.$emit('start_callback', this.msTime.show);
      setTimeout(() => {
      this.runTime(this.end, this.star, this.end_message, true)
      }, 1);
      },
      end_message(){
      this.msTime.show = false;
      if (this.currentTime <= 0) {
      return;
      }
      this.$emit('end_callback', this.msTime.show);
      }
      }
      }
      </script>
      <style>
      .time_down_bgg{
      /* padding:3px 14px;
      padding-top: 5px; */
      width: 60px;
      height: 32px;
      line-height: 32px;
      display: inline-block;
      background: #66A2A6;
      margin: 0px 10px;
      color:#fff;
      border-radius:4px;
      }
      </style>
      package.json 0 → 100644
      View file @ 1e8e9645
      {
      "_args": [
      [
      "git+ssh://git@github.com/jinxiking/vue2-countdown.git",
      "/Users/bzApp/nice-web-app"
      ]
      ],
      "_from": "git+ssh://git@github.com/jinxiking/vue2-countdown.git",
      "_id": "vue2-countdown@git+ssh://git@github.com/jinxiking/vue2-countdown.git#b28fe4b1c92dfbbb7f64a124a7cf804654a7b49f",
      "_inBundle": false,
      "_integrity": "",
      "_location": "/vue2-countdown",
      "_phantomChildren": {},
      "_requested": {
      "type": "git",
      "raw": "git+ssh://git@github.com/jinxiking/vue2-countdown.git",
      "rawSpec": "git+ssh://git@github.com/jinxiking/vue2-countdown.git",
      "saveSpec": "git+ssh://git@github.com/jinxiking/vue2-countdown.git",
      "fetchSpec": "ssh://git@github.com/jinxiking/vue2-countdown.git",
      "gitCommittish": null
      },
      "_requiredBy": [
      "/"
      ],
      "_resolved": "git+ssh://git@github.com/jinxiking/vue2-countdown.git#b28fe4b1c92dfbbb7f64a124a7cf804654a7b49f",
      "_shasum": "e0f20b6af6badb33cf99c8cc3df51d2c77f2ef35",
      "_spec": "git+ssh://git@github.com/jinxiking/vue2-countdown.git",
      "_where": "/Users/bzApp/nice-web-app",
      "author": {
      "name": "cgygd"
      },
      "bugs": {
      "url": "https://github.com/cgygd/vue2-countdown/issues"
      },
      "bundleDependencies": false,
      "deprecated": false,
      "description": "基于vue2.0的活动倒计时组件,可以使用服务端当前时间,在倒计时开始或者结束的时候,可以自定义回调.",
      "homepage": "https://github.com/cgygd/vue2-countdown#readme",
      "keywords": [
      "vuejs",
      "countdown"
      ],
      "license": "MIT",
      "main": "index.js",
      "name": "vue2-countdown",
      "repository": {
      "type": "git",
      "url": "git+https://github.com/cgygd/vue2-countdown.git"
      },
      "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
      },
      "version": "1.0.8"
      }
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment