其他代码

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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(0)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Ashade - 作品展示摄影相册WordPress汉化主题

Envato Affiliates

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

嘿,欢迎咨询!