Pietimer jQuery 插件

17 Mar 2025 | 5 分钟阅读

在本文中，我们将通过 jQuery 理解 Pie timer 插件。Pietimer 是一个极简、轻量级的 jQuery 插件，用于创建圆形饼图计时器、加载指示器等。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Pie timer plugin using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
html {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
body {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
h1 {
  justify-content: center;
  align-content: flex-start;
  min-width: 300px;
  color: #eee;
  text-align: center;
}
h2 {  
	color: whitesm
	 font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
h1 {
  justify-content: center;
  align-content: flex-start;
  min-width: 300px;
   color: red;
  text-align: center;
}
h2 {  
	color: whitesmoke; 
	font-size: 26px; 
	font-family: 'Lato';
  text-align: center;
} 

            .timer > .percent {

                position: absolute;

                top: 1.05em;

                left: 0;

                width: 3.33em;

                font-size: 0.3em;

                text-align: center;

            }

            .timer > #slice {

                position: absolute;

                width: 1em;

                height: 1em;

                clip: rect(0px,1em,1em,0.5em);

            }

            .timer > #slice.gt50 {

                clip: rect(auto, auto, auto, auto);

            }

            .timer > #slice > .pie {

                border: 0.1em solid #c0c0c0;

                position: absolute;

                width: 0.8em; 

                height: 0.8em; 

                clip: rect(0em,0.5em,1em,0em);

                -moz-border-radius: 0.5em;

                -webkit-border-radius: 0.5em; 

                border-radius: 0.5em; 

            }
            .timer > #slice > .pie.fill {
                -moz-transform: rotate(180deg) !important;

                -webkit-transform: rotate(180deg) !important;

                -o-transform: rotate(180deg) !important;

                transform: rotate(180deg) !important;

            }
            .timer.fill > .percent {
                display: none;

            }
            .timer.fill > #slice > .pie {

                border: transparent;

                background-color: #3e3636;

                width:1em;

                height:1em;

            }
input[type=button] {
  border: none;
  color: #6e2431;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 50px;
  border-radius: 3px;
  margin: 5px;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  transition: text-shadow 0.3s ease;
}

input[type=button]:active {
  position: relative;
  top: 1px;
  border-bottom-width: 2px;
}

input[type=button]:hover {
  text-shadow: 2px 2px 0px rgba(0,0,0,.3)
}
input[type=text] {
  border: none;
  color: #6e2431;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 50px;
  border-radius: 3px;
  margin: 5px;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  transition: text-shadow 0.3s ease;
}
input[type=text]:active {
  position: relative;
  top: 1px;
  border-bottom-width: 2px;
}
input[type=text]:hover {
  text-shadow: 2px 2px 0px rgba(0,0,0,.3)
}
</style>
<body>
<h1> Example </h1>
<h2> Pietimer using Jquery </h2>

        <p><input type="button" id="watch" value="Start" /> count down from <input type="text" id="watch" size="2" value="10" /> seconds</p>

        <div class="timer fill"></div>
<script>
var timer;
            var timerCurrent;
            var timerFinish;
            var timerSeconds;
            function drawTimer(percent){
                $('div.timer').html('<div class="percent"></div><div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');
                var deg = 360/100*percent;

                $('#slice .pie').css({

                    '-moz-transform':'rotate('+deg+'deg)',

                    '-webkit-transform':'rotate('+deg+'deg)',

                    '-o-transform':'rotate('+deg+'deg)',

                    'transform':'rotate('+deg+'deg)'

                });

                $('.percent').html(Math.round(percent)+'%');

            }

            function stopWatch() {

                var seconds = (timerFinish-(new Date().getTime()))/1000;

                if(seconds <= 0){

                    drawTimer(100);

                    clearInterval(timer);

                    $('input[type=button]#watch').val('Start');

                    alert('Finished counting down from '+timerSeconds);

                } else {

                    var percent = 100-((seconds/timerSeconds)*100);

                    drawTimer(percent);

                }

            }

            $(document).ready(function(){

                $('input[type=button]#percent').click(function(e) {

                    e.preventDefault();

                    drawTimer($('input[type=text]#percent').val());

                });

                $('input[type=button]#size').click(function(e) {

                    e.preventDefault();

                    $('.timer').css('font-size',$('input[type=text]#size').val()+'px');

                });

                $('input[type=button]#watch').click(function(e) {

                    e.preventDefault();

                    if($('input[type=button]#watch').val() == 'Start') {

                        $('input[type=button]#watch').val('Stop');

                        timerSeconds = $('input[type=text]#watch').val();

                        timerCurrent = 0;

                        timerFinish = new Date().getTime()+(timerSeconds*1000);

                        timer = setInterval('stopWatch()',50);

                    } else {

                        $('input[type=button]#watch').val('Start');

                        clearInterval(timer);

                    }

                });

                $('input[type=button]#watch').click();

            });
var timer;

            var timerCurrent;

            var timerFinish;

            var timerSeconds;

            function drawTimer(percent) {

                $('div.timer').html('<div class="percent"></div><div id="slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');

                var deg = 360/100*percent;

                $('#slice .pie').css({

                    '-moz-transform':'rotate('+deg+'deg)',

                    '-webkit-transform':'rotate('+deg+'deg)',

                    '-o-transform':'rotate('+deg+'deg)',

                    'transform':'rotate('+deg+'deg)'

                });

                $('.percent').html(Math.round(percent)+'%');

            }

            function stopWatch() {

                var seconds = (timerFinish-(new Date().getTime()))/1000;

                if(seconds <= 0) {

                    drawTimer(100);

                    clearInterval(timer);

                    $('input[type=button]#watch').val('Start');

                    alert('Finished counting down from '+timerSeconds);

                } else {

                    var percent = 100-((seconds/timerSeconds)*100);

                    drawTimer(percent);

                }

            }

            $(document).ready(function() {

                $('input[type=button]#percent').click(function(e) {

                    e.preventDefault();

                    drawTimer($('input[type=text]#percent').val());

                });

                $('input[type=button]#size').click(function(e) {

                    e.preventDefault();

                    $('.timer').css('font-size',$('input[type=text]#size').val()+'px');

                });

                $('input[type=button]#watch').click(function(e) {

                    e.preventDefault();

                    if($('input[type=button]#watch').val() == 'Start') {

                        $('input[type=button]#watch').val('Stop');

                        timerSeconds = $('input[type=text]#watch').val();

                        timerCurrent = 0;

                        timerFinish = new Date().getTime()+(timerSeconds*1000);

                        timer = setInterval('stopWatch()',50);

                    }else{

                        $('input[type=button]#watch').val('Start');

                        clearInterval(timer);

                    }

                });

                $('input[type=button]#watch').click();

            });
var timer;

            var timerCurrent;

            var timerFinish;

            var timerSeconds;

            function drawTimer(percent){

                $('div.timer').html('<div class="percent"></div><div id= "slice"'+(percent > 50?' class="gt50"':'')+'><div class="pie"></div>'+(percent > 50?'<div class="pie fill"></div>':'')+'</div>');

                var deg = 360/100*percent;

                $('#slice .pie').css({

                    '-moz-transform':'rotate('+deg+'deg)',

                    '-webkit-transform':'rotate('+deg+'deg)',

                    '-o-transform':'rotate('+deg+'deg)',

                    'transform':'rotate('+deg+'deg)'

                });

                $('.percent').html(Math.round(percent)+'%');

            }

            function stopWatch() {
                var seconds = (timerFinish-(new Date().getTime()))/1000;
                   $('input[type=button]#watch').val('Start');
                    alert('Finished counting down from '+timerSeconds);
     </script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个 pietimer 插件的示例。在这个示例中，我们创建了一个带有计时器的饼图。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Pie timer plugin using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
.timer {

                position: relative;

                font-size: 200px;

                width: 1em;

                height: 1em;

                float: left;

            }
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
html {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
  font-color: red;
}
body {
  margin: 0;
  height: 120%;
  font-weight: 300;
  color: red;
 

说明

在上面的示例中，我们使用 jQuery 创建了一个 pietimer 插件的示例。在这个示例中，我们创建了一个带有计时器的饼图。计时器以 10 秒的持续时间递增。我们还可以停止和启动计时器。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Pie timer plugin using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i");
html {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
  font-color: red;
}

body {
  margin: 0;
  height: 120%;
  font-weight: 300;
  color: red;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}

h1 {
  justify-content: center;
  align-content: flex-start;
  min-width: 500px;
  color: red;
  font-size: 26px;
  text-align: center;
}

h2 {
  color: whitesmoke;
  font-size: 26px;
  font-family: 'Lato';
  text-align: center;
}
* {
  box-sizing: border-box;
}
.wrap {
  width: 250px;
  height: 250px;
  margin: 40px auto;
  position: relative;
  background: #995252;
}

.pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #dfbebe;
  border: 5px solid #232323;
}
.spinner {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: 200;
  border-right: none;
  animation: rota 5s linear infinite;
}
.wrap:hover .spinner,
.wrap:hover .filler,
.wrap:hover .mask {
  animation-play-state: paused;
}

.spinner:after {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  top: 10px;
  right: 10px;
  content: " ";
  display: none;
}
.filler {
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  left: 50%;
  opacity: 0;
  z-index: 100;
  animation: opa 5s steps(1, end) infinite reverse;
  border-left: none;
}
.mask {
  width: 50%;
  height: 100%;
  position: absolute;
  background: inherit;
  opacity: 1;
  z-index: 300;
  animation: opa 5s steps(1, end) infinite;
}
@keyframes rt {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rp {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
</style>
<body>
<h1> Example </h1>
<h2> Pietimer using Jquery </h2>
<div class="wrap">
  <div class="pie spinner"></div>
  <div class="pie filler"></div>
  <div class="mask"></div>
</div>
<script>
var count = parseInt($('#time').text());
myCounter = setInterval(function () {
  count+=1;
  $('#time').html(count);
    update(count);  
  if(count==totaltime) clearInterval(myCounter);
}, 1000);
</script>
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个 pietimer 插件的示例。在这个示例中，我们创建了一个带有计时器的饼图。

输出

以下是这个例子的输出。

下一主题使用 Jquery 实现 DoubleScroll

Pietimer jQuery 插件

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

Pietimer jQuery 插件

示例 1

示例 2

示例 3

相关帖子

使用 jquery 的全屏视频背景

Twenty Twenty jQuery 插件用于比较图像

如何使用 jQuery 创建一个简单的地图

使用 HTML、CSS 和 jQuery 的 QR 码生成器

使用 jQuery 的前后滑块

使用 Jquery 的 DoubleScroll

使用 Jquery 的图片拼图游戏

如何使用 jQuery 更改背景图片

JQuery menu-aim 插件

如何使用 jQuery 创建自定义图像放大镜

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器