JS倒计时demo

图片显示倒计时效果
也可以用animation动画效果去写 只要把动画时间修改成3s即可


<html>
  <head>
    <meta charset="utf-8">
    <title>倒计时demotitle>
  head>
  <body>
    <div id="countDown" class="">
      <img src="images/3.png" style="display:none" alt="">
      <img src="images/2.png" style="display:none" alt="">
      <img src="images/1.png" style="display:none" alt="">
    div>

  body>
<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js">script>
<script type="text/javascript">

 function start(){
   var index = 0
   timer = setInterval(function(){
     $("#countDown").children().hide()
     $("#countDown").children().eq(index).show()
     if (index == 3){
       clearInterval(timer)
       $("#countDown").hide()
     }
     index++
   }, 1000)
 }

 start()




script>



html>

动画效果倒计时 CSS部分

@-webkit-keyframes time{    /*透明度由0到1*/
    0%{
       opacity:0; /*透明度为0*/
     }
    20%{
       opacity:1; /*透明度为1*/
        background:url(images/3.png) no-repeat; background-size:100%; display:block; width:71px; height:71px;
    }
        40%{
       opacity:0; /*透明度为1*/
    }
    60%{
        opacity:1; /*透明度为1*/
        background:url(images/2.png) no-repeat; background-size:100%;display:block;width:71px; height:71px;
        }
        80%{opacity:0;}
        100%{ opacity:1; /*透明度为1*/
        background:url(images/1.png) no-repeat; background-size:100%; display:block;width:71px; height:71px;}

  }

.time{
          -webkit-animation: time 3s alternate ease-in-out; //设置成三秒 
     }

HTML部分:

<div class="time">div>

你可能感兴趣的:(HTML5)