Javascript滑动时钟

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background-color: #262626;
  font-family: 'Anton', sans-serif;
}

.time {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50px;
  width: 323px;
  background-color: #fff;
  padding: 0px 10px;
  text-align: center;
  border-radius: 5px;
}

ul.numbers {
  list-style-type: none;
  padding: 0;
  position: relative;
  display: inline-block;
  transition: all ease 0.5s;
  margin: 0px;
  border-radius: 5px;
  background-color: #fff;
}
ul.numbers li {
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  font-weight: 800;
}
ul.numbers.hoursFirst, ul.numbers.hoursLast {
  background-color: #ff7468;
  color: #422a2d;
}
ul.numbers.minutesFirst, ul.numbers.minutesLast {
  background-color: #2198dd;
  color: #fff;
}
ul.numbers.secondsFirst, ul.numbers.secondsLast {
  background-color: #f2c941;
  color: #212121;
}

/*link*/
.info {
  position: fixed;
  bottom: 10px;
  left: 10px;
  text-align: center;
  color: #fff;
  width: 150px;
  font-size: 1.2rem;
}
.info a {
  margin-top: 20px;
  font-size: 3rem;
  display: block;
  color: red;
}

JavaScript

$(document).ready(function(){
  var i = 0;
  const arr = [0,1,2,3,4,5,6,7,8,9];
  $(".time").append("<ul class='numbers hoursFirst'></ul>,<ul class='numbers  hoursLast'></ul>,<ul class='numbers minutesFirst'></ul>,<ul class='numbers minutesLast'></ul>,<ul class='numbers secondsFirst'></ul>,<ul class='numbers secondsLast'></ul>");
  arr.forEach(function(currentElement,index){
    $(".numbers").append("<li>"+currentElement+"</li>");
  });
  
  var getFirstDigit = function(number){
    return parseInt(number / 10);
  }
  var getLastDigit = function(number){
    return number%10;
  }
  
 
  
  var move = function(){
    var myDate = new Date();
    var seconds = myDate.getSeconds();
    var minutes = myDate.getMinutes();
    var hours = myDate.getHours();
    
    var animateFirstDigit = function(className,property){
    $(className).animate({},function(){
      $(this).css("top",-getFirstDigit(property)*50);
    });
  }
    
    var animateSecondDigit = function(className,property){
      $(className).animate({},function(){
     $(this).css("top",-getLastDigit(property)*50);
    });
    }
    animateFirstDigit(".hoursFirst",hours);
    animateSecondDigit(".hoursLast",hours);
    animateFirstDigit(".minutesFirst",minutes);
    animateSecondDigit(".minutesLast",minutes);
    animateFirstDigit(".secondsFirst",seconds);
    animateSecondDigit(".secondsLast",seconds);
    
  }
  
  
  setInterval(move,1000);
  
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg