RE： 球体波浪倒计时

背景：

移动端需要做一个倒计时球体水波的效果。主要用到了CSS的SVG瞄点动画和JS的计时器。该动画原型来自于 使用球体水面波动显示进度动画 http://wow.techbrood.com/fiddle/27745

效果展示：

 

   

      

          

             

                 
第周
                 
本周剩余时间
                  

                    //JS获取时间信息

                    
                    
                    
                     
                   
                
            
 //最底层水量
             //后面的水波

            
              //水波前面的波浪

             
              
         
     
 
 
//SVG波浪瞄点

    

.homepage .box{
      width: 56%;
      height: 100%;
      /*ackground-color: #f2f2f2;*/  /*球体内部背景色*/
}
      
      
.homepage .timeboxout{
      width: 11.5625rem;
      height: 11.5625rem;
      box-sizing: border-box;
      border: 1px solid #2edb75;
      border-radius: 50%;
      position: relative;
      margin-left: auto;margin-right: auto;
      margin-bottom: 1rem;
}

.homepage .timeboxmiddle{
      width: 10.9375rem;height: 10.9375rem;
      box-sizing: border-box;
      background: -webkit-linear-gradient(top,#ffffff,#f8cd51);
      border-radius: 50%;
      position: absolute;
      top: 50%;left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
}

.homepage .timeboxin{
      background-color: #ffffff;
      width: 10.875rem;height: 10.875rem;
      box-sizing: border-box;
      border-radius: 50%;
      position: absolute;
      top: 50%;left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
}
     

.homepage .box {
    height: 10.875rem;
    width: 10.875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100%;
    overflow: hidden;
}
.homepage .box .percent {
   text-align: center;
   color: black;
   margin-top: 2.03125rem;
   z-index: 3;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   height: 100%;width: 100%;
}
/*.homepage p{margin-bottom: 0.5625rem;}*/
#prompt1{
      font-size: 1.1875rem;
}
#prompt2{
      font-size: 0.8125rem;
}
#prompt3{
      font-size: 1.125rem;
}
.homepage .box .water {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      -webkit-transform: translate(0, 100%);
      transform: translate(0, 100%);
      background: #2edb75;
}

.homepage .box .water_wave {
      width: 200%;
      position: absolute;
      bottom: 100%;
}
.homepage .box .water_wave_back {               /*后面的波纹*/
      right: 0;
      fill: #7befaa;
      -webkit-animation: wave-back 1.4s infinite linear;
      animation: wave-back 1.4s infinite linear;
}
.homepage .box .water_wave_front {              /*前面的波纹*/
      left: 0;
      fill: #2edb75;
      margin-bottom: -1px;
      -webkit-animation: wave-front .7s infinite linear;
      animation: wave-front .7s infinite linear;
}

/*是波浪匀速移动*/

@-webkit-keyframes wave-front {
      100% {
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
      }
}
@keyframes wave-front {
      100% {
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
      }
}
@-webkit-keyframes wave-back {
      100% {
            -webkit-transform: translate(50%, 0);
            transform: translate(50%, 0);
      }
}
@keyframes wave-back {
      100% {
            -webkit-transform: translate(50%, 0);
            transform: translate(50%, 0);
      }
}

var days = document.getElementById("days"),
hour = document.getElementById("hours"),
minutes = document.getElementById("minutes"),
seconds = document.getElementById("seconds");
var nwweek = document.getElementById("prompt1");
var countdown = document.getElementById("prompt3");
var water = document.getElementById("water");
var ballchange = document.getElementsByClassName("ball");
                  
var timeRate;
var interval;
                  
//计算累积第几周

function weeknum(){
      var nw = document.getElementById("nw");
      // 获取当前时间
      var currentTime = new Date();
      // 这里写的是2015年11月2日0时0分0秒   Javascript中月份是实际数字减1，故指定日期月份减一，另获取到毫秒。
      var targetTime = (new Date(2015, 10, 2, 0, 0, 0)).getTime();
      var offsetTime =currentTime - targetTime;
 
      // 将时间转位天数
      var offsetDays =Math.floor((offsetTime / (3600 * 24 * 1000))/7);
      nw.innerHTML=offsetDays+1;
}               
                  
//计算剩余的时间并更新
function residueTime () {
    var newtime = new Date();
    var day = newtime.getDay(); //得到今天周几
    var hours = newtime.getHours(); //得到现在时间的小时
    var minuter = newtime.getMinutes(); //得到现在时间的分数
    var second = newtime.getSeconds(); //得到现在时间的秒数
                        
    day = 7 - (day ? day : 7);
    hours = 23 - hours;
    minuter = 59 - minuter;
    second = 59 - second;
    if (day==0) {
        countdown.innerHTML = hours  + "时" + minuter + "分" + second + "秒" ;
    } else{
        countdown.innerHTML =  day + "天" + hours  + "时" + minuter + "分" + second + "秒" ;
                              
    }
                        
                        
    return (day * 24 * 60 * 60 + hours * 60 * 60 + minuter * 60 + second) / 604800 * 100;
                  
}     
                        

//球面颜色变化

interval = setInterval(function () {
    timeRate = residueTime();
    water.style.transform = 'translate(0' + ',' + (100 - timeRate) + '%)';
    if (timeRate == 0) {
        document.getElementsByTagName("svg")[0].innerHTML = "";
        document.getElementsByTagName("svg")[1].innerHTML = "";
        clearInterval(interval);
    }
    else if(timeRate >50) {
        ballchange[0].style.border = "1px solid #2edb75";
        ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#2edb75)";
        ballchange[2].style.background = "#2edb75";
        ballchange[3].style.fill = "#7befaa";
        ballchange[4].style.fill = "#2edb75";
     }
     else if(timeRate <= 50 && timeRate > 20) {
        ballchange[0].style.border = "1px solid #fbbc05";
        ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#fbbc05)";
        ballchange[2].style.background = "#fbbc05";
        ballchange[3].style.fill = "#ffd762";
        ballchange[4].style.fill = "#fbbc05";
     }
     else{
        ballchange[0].style.border = "1px solid #fe6c0d";
        ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#fe6c0d)";
        ballchange[2].style.background = "#fe6c0d";
        ballchange[3].style.fill = "#ff9753";
        ballchange[4].style.fill = "#fe6c0d";
      }
},500);