其他代码

CSS3圆形倒计时jQuery特效

面包多

CSS3圆形倒计时jQuery特效-创客云
这是一款 jquery 和 CSS3 圆形倒计时特效,该特效使用 CSS 对页面进行布局,生成用于倒计时的圆环,然后通过 jquery 代码来控制圆环的倒计时进度。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <link href="css/style.css" rel="stylesheet" />
  2. <script src="js/jquery.min.js" type="text/javascript"></script>

HTML 结构

  1. <div class="flex-container">
  2.     <div class="outbox">
  3.     </div>
  4.     <!--  SVG AREA -->
  5.     <svg class="svg">
  6.         <circle id="cls" class="cls run-anim" cx="130" cy="130" r="125"></circle>
  7.     </svg>
  8.     <!--  SVG AREA END -->
  9.     <div class="control">
  10.         <div class="time">
  11.             <label for="min">
  12.                 Min
  13.                 <input id="min" type="number" min="0" max="59" placeholder="mm" value="0" />
  14.             </label>
  15.             <label for="sec">
  16.                 Sec
  17.                 <input id="sec" type="number" min="0" max="59" placeholder="ss" value="0" />
  18.             </label>
  19.         </div>
  20.         <div class="action">
  21.             <button id="start" class="">
  22.                 开始
  23.             </button>
  24.     <button id="reset" class="">
  25.         停止
  26.     </button>
  27.         </div>
  28.     </div>
  29. </div>

初始化插件

  1. let circle = document.getElementById('cls');
  2. let total ;
  3. let start = $('#start');
  4.  
  5. start.click( ()=>{
  6.     let minute = document.getElementById('min').value;
  7.     let second = document.getElementById('sec').value;
  8.     // console.log("seconds:"+(minute*60)+"secs:"+second);
  9.     total = (parseInt(minute)*60) + parseInt(second);
  10.     console.log("total:"+total);
  11.     circle.style.strokeDashoffset = "800";
  12.     circle.style.animationDuration = total+"s";
  13.     circle.style.animationPlayState = "running";
  14.     set(1000*total);
  15.     circle.classList.add("run-anim");
  16. });
  17.  
  18. function set(total){
  19.     let interval = setInterval(ret,total);
  20.     function ret(){
  21.         confirm('Timer Completed! Press Reset');
  22.         circle.classList.remove("run-anim");
  23.         void circle.offsetWidth;
  24.         clearInterval(interval);
  25.     }
  26. }
  27.  
  28. // let reset = $('#reset');
  29. // reset.click(()=>{
  30. //     circle.style.animationPlayState = "paused";
  31. // });

Github 网址:https://github.com/Bhanu8047/Timer-Animation

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!