CSS+JS实现一些常见的动画效果我们在开发设计网站的时候经常会使用一些常见的动画效果，以下是我本次分享的活动倒计时、轮

我们在开发设计网站的时候经常会使用一些常见的动画效果，以下是我本次分享的活动倒计时、轮播图以及通过flex box的布局方式实现百叶窗的效果以及源代码： \

js制作倒计时效果代码

function countDown(time){
     var nowTime =+ new Date();   //当前时间
     var inputTime =+new Date(time);  //输入的时间
     var times =(inputTime - nowTime)/1000;  //单位转换为秒
     var d = parseInt(times / 60 /60 /24); //天数
         d = d <10 ? '0' + d : d;     //实现 00的效果
     var h = parseInt(times / 60 /60 % 24);  //小时
         h = h <10 ? '0' + h : h;
     var m =parseInt(times / 60 % 60);
         m = m <10 ? '0' + m : m;
     var s =parseInt(times %60);
         s = s <10 ? '0' + s : s;
     return d +'天'+h+'时'+m+'分'+s+'秒';
 }
  function getTime(){
        var time = new Date();
        var h =time.getHours();
        h = h < 10 ? '0'+ h : h;
        var m =time.getMinutes();
        m = m < 10 ? '0' + m :m;
        var s =time.getSeconds();
        s = s < 10 ? '0' + s :s;
        return h+':'+m+':'+s;
    }
console.log(countDown('2021-12-01 00:00:00'));
上面是简单封装的一个时间函数，后面可以创建一个间隔为1000ms的 setInterval(countDown, 1000)的间隔重复定时器只需要调用即可

js实现网页轮播图效果：

//创建轮播图函数
function carousel(){
    //获取轮播图的对象
    var oCarousel = document.querySelector('.carousel');
    //添加图片的名字
    var imgArr = ['1.jpg','2.jpg','3.jpg','4.jpg'];
    var img = document.querySelector('#displayimg');
    var Timer =null;
    var n = 0;
    //鼠标移出清除定时器
    oCarousel.onmouseenter = function(){
        clearInterval(Timer);
    }
    //鼠标进入启动定时器
    oCarousel.onmouseleave = function(){
        showTime();
    }
    //获取轮播图左侧按钮
    var preve = document.querySelector('.preve');
    preve.onclick = function(){
        clearInterval(Timer);
        console.log(n);
        if( n === 0){
            n = imgArr.length-1;
            img.src = 'img/' +imgArr[n];
        }else{
            n--;
            img.src = 'img/' +imgArr[n];
        }
    }
    //获取轮播图右侧按钮
    var next = document.querySelector('.next');
    next.onclick = function(){
        clearInterval(Timer);
        console.log(n);
        if( n > imgArr.length-2){
            n = 0;
            img.src = 'img/' +imgArr[n];
        }else{
            n++;
            img.src = 'img/' +imgArr[n];
        } 
    }
    //轮播图下侧按钮
    var lis = document.querySelectorAll('li');  
    // console.log(lis);  
    for(var i=0; i < lis.length;i++){
        lis[i].onclick = function(){
            n = this.title;
            img.src = 'img/' +imgArr[n];
        // console.log(lis[i]);
        }
    }
    function showTime(){
        //设置定时器
        Timer = setInterval(function(){
            img.src = 'img/' +imgArr[n];
            n += 1;
            if( n>3 ){
                n =0;
            }
        },2000) 
    }
    showTime()
}
carousel();

slide01 slide02 slide03 slide04

css 制作百叶窗效果代码

ul{
    list-style: none;
    width: 510px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
ul li {
    width: 100px;
    height: 100px; 
    flex: 1;
    border: 1px solid #ccc;
}
ul li:hover{
    flex: 3;
    transition: 1s;   
}