js實現(xiàn)增加數(shù)字顯示的環(huán)形進度條效果

更新時間：2017年02月05日 17:07:08 作者：前端chaimens

本文主要分享了js實現(xiàn)增加數(shù)字顯示的環(huán)形進度條效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧

效果如下：

代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<link>
<meta name="page-view-size" content="640*530">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
 .wapper{
  position:absolute;
  left:100px;
  top:100px;
  box-sizing:border-box;
 }
 .text{
  position:absolute;
  left:30px;
  top:40px;
  font-family:"Microsoft YaHei";
  font-weight:bold;
  color:indianred;
 }
 .rect{
  position:absolute;
  width:50px;
  height:100px;
  overflow:hidden;
 }
 .right{
  left:50px;
 }
 .circle{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  box-sizing:border-box;
  border:5px solid indianred;
 }
 .circle_right{
  left:-50px;
  clip:rect(0px 50px 100px 0px);
  animation:roll 5s linear 0s 1 forwards;
 }
 .circle_left{
  clip:rect(0px 100px 100px 50px);
  animation:roll 5s linear 5s 1 forwards;
 }
 @keyframes roll{
  0%{transform:rotate(0deg)}
  100%{ transform:rotate(180deg)}
 }
</style>
<body leftmargin="0" topmargin="0">
<div class="wapper">
 <div class="rect right"><div class="circle circle_right"></div></div>
 <div class="rect left"><div class="circle circle_left"></div></div>
 <div class="text"><span id="num">1</span><span>%</span></div>
</div>
</body>
<script type="text/javascript">
 window.onload=function(){
  var $num=document.getElementById('num');
  (function(){
   var i=1,timer;
   add();
   function add(){
    var timer=setTimeout(function(){
     add();
    },100);
    $num.innerHTML=i;
    i<100?i++:clearTimeout(timer)
   }
  })();
 }
</script>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JS面試必備之如何實現(xiàn)一個精確的倒計時
又到了金三銀四的季節(jié)了,面試的各位同學(xué)要開始準(zhǔn)備起來了,今天主要分享一個在面試中經(jīng)常被提到的一個面試題：倒計時,希望對大家有所幫助
2024-03-03
js與運算符和或運算符的妙用
這篇文章主要介紹了js與運算符和或運算符的使用方法,需要的朋友可以參考下
2014-02-02
詳解webpack提取第三方庫的正確姿勢
本篇文章主要介紹了詳解webpack提取第三方庫的正確姿勢，常用的提取第三方庫的方法有兩種，本文詳細(xì)的介紹了這兩種方法，有興趣的可以了解一下
2017-12-12
JS 添加網(wǎng)頁桌面快捷方式的代碼詳細(xì)整理
如何添加桌面快捷?很多網(wǎng)友都有這個疑問;JS 點擊添加網(wǎng)頁桌面快捷方式的代碼，需要的朋友可以參考下
2012-12-12
js使用navigator.userAgent判斷當(dāng)前瀏覽器所處的環(huán)境
本文主要介紹了js使用navigator.userAgent判斷當(dāng)前瀏覽器所處的環(huán)境，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
javascript刪除Table中的一行的腳本代碼
用js實現(xiàn)的刪除table中一行數(shù)據(jù)的代碼
2008-06-06
JavaScript實現(xiàn)對JSON對象數(shù)組數(shù)據(jù)進行分頁處理
這篇文章主要介紹了使用JavaScript實現(xiàn)對JSON對象數(shù)組數(shù)據(jù)進行分頁處理,文中有詳細(xì)的代碼示例供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-10-10
zTree插件之單選下拉菜單實例代碼
zTree插件之單選下拉菜單實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
用jscript實現(xiàn)新建和保存一個word文檔
用jscript實現(xiàn)新建和保存一個word文檔...
2007-06-06
async/await實現(xiàn)Promise.acll()簡介
Promise.all() 方法接收一個 promise 的 iterable 類型的輸入，并且只返回一個Promise實例，并且輸入的所有 promise 的 resolve 回調(diào)的結(jié)果是一個數(shù)組，這篇文章主要介紹了async/await實現(xiàn)Promise.acll()簡介,需要的朋友可以參考下
2022-11-11