带圆形进度条的倒计时器

2024-03-27

我创建了一个倒计时器。我有一个圆形边框。当计时器趋向于零时，圆形边框应随着秒数的减少而改变颜色。

我创建了JSFIDDLE https://jsfiddle.net/alaksandarjesus/th190c7a/

HTML

<div class="outer">
    <button class="btn btn-default btn-timer">0.00</button>
</div>

JS CODE

var displayminutes;
var displayseconds;
var initializeTimer = 1.5 // enter in minutes
var minutesToSeconds = initializeTimer*60;

$("#document").ready(function(){
    setTime = getTime();
    $(".btn-timer").html(setTime[0]+":"+setTime[1])
});


$(".btn-timer").click(function(){
    var startCountDownTimer = setInterval(function(){
          minutesToSeconds = minutesToSeconds-1;
        var timer = getTime();
         $(".btn-timer").html(timer[0]+":"+timer[1]);
        if(minutesToSeconds == 0){
            clearInterval(startCountDownTimer);
            console.log("completed");
        }
      },1000)
});


function getTime(){

    displayminutes = Math.floor(minutesToSeconds/60);
    displayseconds = minutesToSeconds - (displayminutes*60);
    if(displayseconds < 10)
    {   
        displayseconds ="0"+displayseconds;
    }
     if(displayminutes < 10)
    {   
        displayminutes = "0"+displayminutes;
    }

    return [displayminutes, displayseconds];
}

如何获得圆形进度条。我寻找了一些 jQuery 插件，但它们不符合我的要求。我正在寻找类似的输出到这个链接 http://www.jqueryscript.net/demo/Simple-Round-Countdown-Timer-Plugin-For-jQuery/

下面是倒计时器的示例片段，其中带有一个圆形进度条，该进度条会随着值的下降而改变颜色。

基本上我们正在做的事情如下：（有关更多详细信息，请参阅代码中的内联注释）

4 附加div绝对位于父级之上。每个代表一个象限。
最初，所有它们的倾斜角度均为 0 度，因此它们全部完全可见并覆盖整个父级。这隐藏了box-shadow父级的，从而使它看起来像一个实心圆。
在每次迭代中，我们修改每个象限的倾斜角度（div）这样象限最终会一一变得不可见，从而揭示box-shadow父母的。
当倾斜角度达到 +/- 90 度时，象限变得不可见，因此在每次迭代时，角度计算如下（90 度/该象限中覆盖的步数）.
当进展从一个象限移动到另一个象限时，box-shadow父级的更改使进度条的外观改变其颜色。
最初的 CodePen 使用的是data-progress属性的值直接作为content的伪元素。但该值会随着每次迭代而增加。由于它也用于计算倾斜角度，因此我将其保留原样，并为倒计时器使用单独的字段。伪元素的内容无法使用JS设置，所以我添加了另一个div为计时器文本。

window.onload = function() {
  var progressbar = document.querySelector('div[data-progress]'),
    quad1 = document.querySelector('.quad1'),
    quad2 = document.querySelector('.quad2'),
    quad3 = document.querySelector('.quad3'),
    quad4 = document.querySelector('.quad4'),
    counter = document.querySelector('.counter');

  var progInc = setInterval(incrementProg, 1000); // call function every second

  function incrementProg() {
    progress = progressbar.getAttribute('data-progress'); //get current value
    progress++; // increment the progress bar value by 1 with every iteration
    progressbar.setAttribute('data-progress', progress); //set value to attribute
    counter.textContent = 100 - parseInt(progress, 10); // set countdown timer's value
    setPie(progress); // call the paint progress bar function based on progress value
    if (progress == 100) {
      clearInterval(progInc); // clear timer when countdown is complete
    }
  }

  function setPie(progress) {
    /* If progress is less than 25, modify skew angle the first quadrant */
    if (progress <= 25) {
      quad1.setAttribute('style', 'transform: skew(' + progress * (-90 / 25) + 'deg)');
    }

    /* Between 25-50, hide 1st quadrant + modify skew angle of 2nd quadrant */
    else if (progress > 25 && progress <= 50) {
      quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
      quad2.setAttribute('style', 'transform: skewY(' + (progress - 25) * (90 / 25) + 'deg)');
      progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px orange'); 
    }

    /* Between 50-75, hide first 2 quadrants + modify skew angle of 3rd quadrant */
    else if (progress > 50 && progress <= 75) {
      quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
      quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
      quad3.setAttribute('style', 'transform: skew(' + (progress - 50) * (-90 / 25) + 'deg)');
      progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px yellow');
    }

    /* Similar to above for value between 75-100 */
    else if (progress > 75 && progress <= 100) {
      quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
      quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
      quad3.setAttribute('style', 'transform: skew(-90deg)'); // hides 3rd completely
      quad4.setAttribute('style', 'transform: skewY(' + (progress - 75) * (90 / 25) + 'deg)');
      progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px green');
    }
  }
}

div[data-progress] {
  box-sizing: border-box;
  position: relative;
  height: 200px;
  width: 200px;
  background: beige;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 20px red;
  transition: all 1s;
  overflow: hidden;
}
.counter {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  text-align: center;
  line-height: 200px;
  border-radius: 50%;
  background: transparent;
  z-index: 4;
}
div > div {
  position: absolute;
  height: 50%;
  width: 50%;
  background: inherit;
  border-radius: 0%;
}
.quad1,
.quad2 {
  left: 50%;
  transform-origin: left bottom;
}
.quad3,
.quad4 {
  left: 0%;
  transform-origin: right top;
}
.quad1,
.quad4 {
  top: 0%;
}
.quad2,
.quad3 {
  top: 50%;
}
.quad1,
.quad3 {
  transform: skew(0deg); /* invisible at -90deg */
}
.quad2,
.quad4 {
  transform: skewY(0deg); /* invisible at 90deg */
}

/* Just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}
div[data-progress] {
  margin: 40px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-progress="0">
  <div class="quad1"></div>
  <div class="quad2"></div>
  <div class="quad3"></div>
  <div class="quad4"></div>
  <div class='counter'>100</div>
</div>

在下面的代码片段中，我添加了不同的background为每个象限提供更好的直观说明到底发生了什么。

window.onload = function() {
  var progressbar = document.querySelector('div[data-progress]'),
    quad1 = document.querySelector('.quad1'),
    quad2 = document.querySelector('.quad2'),
    quad3 = document.querySelector('.quad3'),
    quad4 = document.querySelector('.quad4'),
    counter = document.querySelector('.counter');

  var progInc = setInterval(incrementProg, 1000); // call function every second

  function incrementProg() {
    progress = progressbar.getAttribute('data-progress'); //get current value
    progress++; // increment the progress bar value by 1 with every iteration
    progressbar.setAttribute('data-progress', progress); //set value to attribute
    counter.textContent = 100 - parseInt(progress, 10); // set countdown timer's value
    setPie(progress); // call the paint progress bar function based on progress value
    if (progress == 100) {
      clearInterval(progInc); // clear timer when countdown is complete
    }
  }

  function setPie(progress) {
    /* If progress is less than 25, modify skew angle the first quadrant */
    if (progress <= 25) {
      quad1.setAttribute('style', 'transform: skew(' + progress * (-90 / 25) + 'deg)');
    }

    /* Between 25-50, hide 1st quadrant + modify skew angle of 2nd quadrant */
    else if (progress > 25 && progress <= 50) {
      quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
      quad2.setAttribute('style', 'transform: skewY(' + (progress - 25) * (90 / 25) + 'deg)');
      progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px orange');
    }

    /* Between 50-75, hide first 2 quadrants + modify skew angle of 3rd quadrant */
    else if (progress > 50 && progress <= 75) {
      quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
      quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
      quad3.setAttribute('style', 'transform: skew(' + (progress - 50) * (-90 / 25) + 'deg)');
      progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px yellow');
    }

    /* Similar to above for value between 75-100 */
    else if (progress > 75 && progress <= 100) {
      quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
      quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
      quad3.setAttribute('style', 'transform: skew(-90deg)'); // hides 3rd completely
      quad4.setAttribute('style', 'transform: skewY(' + (progress - 75) * (90 / 25) + 'deg)');
      progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 20px green');
    }
  }
}

div[data-progress] {
  box-sizing: border-box;
  position: relative;
  height: 200px;
  width: 200px;
  background: beige;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 20px red;
  transition: all 1s;
  overflow: hidden;
}
.counter {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  text-align: center;
  line-height: 200px;
  border-radius: 50%;
  background: transparent;
  z-index: 4;
}
div > div {
  position: absolute;
  height: 50%;
  width: 50%;
  border-radius: 0%;
}
.quad1,
.quad2 {
  left: 50%;
  transform-origin: left bottom;
}
.quad3,
.quad4 {
  left: 0%;
  transform-origin: right top;
}
.quad1, .quad4{
  top: 0%;
}
.quad2, .quad3{
  top: 50%;
}
.quad1, .quad3{
  transform: skew(0deg);
}
.quad2, .quad4{
  transform: skewY(0deg);
}

/* Just for demo */

body {
  background: linear-gradient(90deg, crimson, indianred, purple);
}
div[data-progress] {
  margin: 40px auto;
}
.quad1 {
  background: blue;
}
.quad2 {
  background: pink;
}
.quad3 {
  background: tan;
}
.quad4 {
  background: teal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div data-progress="0">
  <div class="quad1"></div>
  <div class="quad2"></div>
  <div class="quad3"></div>
  <div class="quad4"></div>
  <div class='counter'>100</div>
</div>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

css

cssshapes

带圆形进度条的倒计时器的相关文章

document.registerElement - 为什么我们需要指定“prototype”和“extends”？

考虑我想扩展本地button元素并创建我自己的super button元素据我所知它必须遵循以下模式 var SuperButton document registerElement super button prototype Ob
Javascript：打乱数组中的对象组

我有一个对象数组我已按键排序 group如下使得所有具有相同值的对象group在索引中彼此相邻data 例如 var data foo cat group house foo cat group house foo cat group
单击时阻止 jquery TABS 跳跃/向上滚动？

我使用的引擎调用 jquery tabs js 脚本来处理选项卡功能问题是只要选项卡位于页面顶部并且您单击链接它们就会快速向下滚动到页面底部我已经尝试解决这个问题几个小时了所有解决方案都指向类似的答案但没有一个对我有用 fn t
元素上的框阴影行为

Update 在我提交错误报告后 https bugs chromium org p chromium issues detail id 763337 https bugs chromium org p chromium issues de
使用 Jasmine 模拟 jQuery ajax 调用

我正在使用 Jasmine 2 5 2 为使用 jQuery 3 1 1 执行 Ajax 请求的代码编写单元测试我想模拟 Ajax 调用提供我自己的响应状态和文本我正在使用 Jasmine ajax 插件 https github c
ajax 调用成功后点击链接 href

我有一个正常的链接 a href http www google com class continue Continue a 我已将点击绑定到一个事件来发布 ajax 请求如下所示 continue click function ajax
JSLint 错误：意外的“这个”

无法理解为什么 JSLint 对我的使用感到惊讶this在下面的代码中 function testConstr x use strict this joker Whyyy sooo seriousss this x x 对于这两个属性分配
Twitter bootstrap 远程模式每次都显示相同的内容

我正在使用 Twitter bootstrap 我已经指定了一个模式 div class modal hide div class modal header div div
Antd 选择搜索框未呈现匹配项

我有产品数据我正在使用搜索值过滤数据然后使用过滤后的数据呈现选项产品数据作为道具来自全局 redux 存储由于某种原因下拉列表仅在搜索值为空时显示数据当我开始输入时 filteredData已更新组件也重新渲染但选项不显示任
如何像在浏览器中一样检索准确的 HTML

我正在使用 Python 脚本来呈现网页并检索其 HTML 它适用于大多数页面但对于其中一些页面检索到的 HTML 不完整我不太明白为什么这是我用来废弃此页面的脚本由于某种原因每个产品的链接不在 HTML 中 Link http
如何在javascript中删除一组表情符号中的最后一个表情符号？

假设我的字符串中有 3 个表情符号字符串中没有任何空格或除表情符号之外的任何其他字符如何删除javascript中最后一个表情符号下面的答案不使用任何特殊的包并安全地删除最后一个表情符号 function safeEmojiBacks
如何消除 jQuery Mobile 中的悬停延迟？

我正在使用 jQuery Mobile 制作一个网站当我将鼠标悬停在按钮上时它会更改其类并扩展其颜色但感觉需要半秒左右才能完成有没有办法减少这种延迟您可以覆盖hoverDelay无需修改 jQuery Mobile js 库要
FB.getLoginStatus() 不起作用

我正在尝试编写一段代码来检查用户是否登录发现FBJS API中有一个内置方法叫做getLoginStatus 我已经在html中实现了它但出于某种原因 getLoginStatus 内部的alert 不会被触发我也尝试在 init
Google 折线图添加对象数组

我有一个通过解析 JSON 字符串创建的对象数组 var measurementData Html Raw JsonConvert SerializeObject this Model Item1 var stringifiedData J
如何在javascript中设置从数据库输入的最大数量？

我希望根据数据库中的数量设置输入类型数字中输入的最大数量目前我正在尝试让它在数据最大的基础上工作然后再尝试从数据库中获取最大值但它似乎无法工作之前已经在这里问过但我仍然无法理解在 php javascript 中设置数据
jQuery - xpath 查找？

如果您在 xml 中有下面的 xml 那么您会使用以下命令变得昏昏欲睡 xml find animal find dog find beagle text jQuery 中是否有类似的方法来使用 xpath xml xpathfind an
Escape String - 在 Javascript 中输出rails字符串[重复]

这个问题在这里已经有答案了我正在尝试将字符串值分配给 erb 文件中的 javascript 对象如下所示 var data name 问题是如果name is Tom s small ears 的输出data name将会Tom x
html 下钻下拉所选值未插入 MYSQL

我有两个下拉列表首先从数据库下拉填充根据第一个下拉列表的选定值从数据库填充第二个下拉列表 document ready function c change function var c1 c selected text if c1 aj
将响应式网格布局转换为 Plotly Dash

我是一个非常活跃的 Dash 用户我开始发现 Dash 使用中存在很多限制并且我意识到有关如何将组件转换为 Dash 的信息内容绝对有限并且示例过时且非常简单并且我对 Javascript 或 React 几乎没有任何了解我完全
将记录转换为序列化表单数据以通过 HTTP 发送

有没有办法转换此记录 TError record code Word message String end TState record caption String address Cardinal counters TArray

随机推荐

使用生成器表达式而不是列表进行排序（）

看到这里的讨论后 Python 生成时差 https stackoverflow com questions 4154116 python generate the time difference 4154298 4154298我很好奇我
Python 使用 tabulate 打印列表

我正在尝试打印天文学模拟的输出以便它在我的控制台中看起来不错我生成了 4 个 numpy 数组分别称为振幅质量周期和偏心率我想将它们放在一个表中每个数组的第一个索引是行星 1 的值第二个索引是行星 2 的值依此类推所以我
构建失败 Sphinx 错误内容.rst 未找到

我按照阅读文档的说明进行操作但收到此错误 bash Sphinx 错误主文件 home docs checkouts readthedocs org user builds mybinders checkouts latest docs
ASP.NET MVC 通过 ExecuteSqlCommand 获取插入项的 ID

我在 ASP NET MVC3 项目中插入以下内容 var query INSERT INTO MyTable VALUES some values db Database ExecuteSqlCommand query 有没有简单的方法获
西南点和东北点

我正在开发一个使用谷歌API的iPhone应用程序我有一组纬度和经度我需要从这些点找到西南和东北点我该怎么做提前致谢 Given A point LAT LNG A distance or radius DIST 1 of lati
如何在鼠标左键按下自动点击器C ++时触发循环

嘿我试图让我的自动点击器仅在按住鼠标左键时单击 void clikr INPUT Input 0 int sleepzZz 1000 times active false system cls while 1 if GetAsyncKey
Modelica 外部函数：C 与 C99

在 Modelica 中可以定义外部函数规范第 12 9 章表示支持 C 和 Fortran77 将来可能会支持 C 和 Fortran90 现在我想知道哪个C 的版本 http en wikipedia org wiki C progr
PHP5。将数组声明为类成员的两种方法[关闭]

Closed 这个问题是基于意见的 help closed questions 目前不接受答案当将数组声明为类成员时应该采取哪种方式 class Test1 private paths array public function con
Powershell 不会使用 install-module 安装几乎任何模块

我的 Powershell v5 1 不会使用以下命令自动安装几乎任何模块install module而手动安装确实有效首先当我跑步时install module 它会下载模块然后抛出错误比如 pscx 模块 PackageManag
更改 Swagger/Swashbuckle 导出的属性类型

我有一个相当复杂的对象其中包含嵌套对象请注意在下面的示例中我极大地简化了这个对象假设有以下示例对象 public class Result public string Name get set public IpAddress I
来自数组的 Pandas Multiindex => TypeError：不可散列的类型：'dict'

我正在尝试从具有以下结构的数组创建数据框 df date time Timestamp 2015 05 22 05 37 59 name Tom value 129 date time Timestamp 2015 05 22 05 37
如何找到调用该方法的ABAP程序/FM？

我是SAP SD模块专家经常需要调试代码有时我需要知道哪些程序 FM 地址特定的表我用使用地点在 SE11 中的表中它会找到寻址该表的类方法但是当我使用使用地点对于类方法系统找不到任何内容你知道如何找到调用此方法的程序或FM吗
在 Rust 中从数组调用闭包

如何迭代一系列闭包依次调用每个闭包通过函数我发现我可以通过迭代数组并取消引用生成的值来做到这一点 fn square x int gt int x x fn add one x int gt int x 1 fn main let f
django-endless 与基于类的视图示例

我第一次使用基于类的视图我无法理解如何使用基于类的视图来实现django 无尽分页 http django endless pagination readthedocs org en latest twitter pagination h
使用 Pandoc 和 LaTeX 从 docx 转换为 pdf 时如何修复“缺少字符”警告？

Goal 我有几千种高棉语 docx文件并希望将它们转换为 pdf格式使用Pandoc https pandoc org 背景我使用 MacPorts 安装了 Pandoc Pandoc需要LaTeX来进行PDF转换所以我安装了MacT
在 iframe 中运行 Google Analytics？

我们公司与向我们发送流量的联属合作伙伴一起运营一个网站 oursite com 在某些情况下我们会使用自己的子域 affiliate oursite com 来设置我们的联营公司然后他们使用 iframe 在其网站 affiliate
使用 OpenCV 对 Tesseract OCR 进行图像预处理

我正在尝试开发一个应用程序它使用 Tesseract 来识别手机摄像头拍摄的文档中的文本我使用 OpenCV 来预处理图像以实现更好的识别应用高斯模糊和阈值方法进行二值化但结果非常糟糕 Here https s6 postimg c
如何从 Flask 服务器中的外部文件夹访问文件？

我是 Flask 新手对于将外部文件夹中的库包含到 html 模板中感到非常困惑我知道如何包括static文件夹但我想将代码和库文件保存在单独的文件夹中所以我的目录结构是这样的 main directory Code flask
如何将 TypeScript 类拆分为多个文件？

我找到了很多例子也尝试自己将一个模块分成几个文件所以我得到了那个非常方便但有时出于同样的原因划分班级也很实用假设我有几种方法但我不想将所有内容都塞进一个长文件中我正在寻找类似的东西partialC 中的声明最近我使用这种模式
带圆形进度条的倒计时器

我创建了一个倒计时器我有一个圆形边框当计时器趋向于零时圆形边框应随着秒数的减少而改变颜色我创建了JSFIDDLE https jsfiddle net alaksandarjesus th190c7a HTML div class

带圆形进度条的倒计时器

带圆形进度条的倒计时器 的相关文章

随机推荐

热门标签

带圆形进度条的倒计时器的相关文章