js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果
更新時(shí)間：2017年02月05日 17:07:08 作者：前端chaimens
本文主要分享了js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
效果如下：
代碼如下：
<!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)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- JavaScript?canvas繪制動(dòng)態(tài)圓環(huán)進(jìn)度條
- JavaScript canvas繪制圓形加載進(jìn)度條
- 詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
- JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
- js+HTML5 canvas 實(shí)現(xiàn)簡單的加載條(進(jìn)度條)功能示例
- 環(huán)形加載進(jìn)度條封裝（Vue插件版和原生js版）
- JS實(shí)現(xiàn)環(huán)形進(jìn)度條（從0到100%）效果
- javascript 進(jìn)度條的幾種方法
- js實(shí)現(xiàn)進(jìn)度條的方法
- JavaScript canvas實(shí)現(xiàn)環(huán)形漸變進(jìn)度條
相關(guān)文章
JS面試必備之如何實(shí)現(xiàn)一個(gè)精確的倒計(jì)時(shí)
又到了金三銀四的季節(jié)了,面試的各位同學(xué)要開始準(zhǔn)備起來了,今天主要分享一個(gè)在面試中經(jīng)常被提到的一個(gè)面試題：倒計(jì)時(shí),希望對(duì)大家有所幫助2024-03-03
這篇文章主要介紹了js與運(yùn)算符和或運(yùn)算符的使用方法,需要的朋友可以參考下2014-02-02
本篇文章主要介紹了詳解webpack提取第三方庫的正確姿勢(shì)，常用的提取第三方庫的方法有兩種，本文詳細(xì)的介紹了這兩種方法，有興趣的可以了解一下2017-12-12
JS 添加網(wǎng)頁桌面快捷方式的代碼詳細(xì)整理
如何添加桌面快捷?很多網(wǎng)友都有這個(gè)疑問;JS 點(diǎn)擊添加網(wǎng)頁桌面快捷方式的代碼，需要的朋友可以參考下2012-12-12
js使用navigator.userAgent判斷當(dāng)前瀏覽器所處的環(huán)境
本文主要介紹了js使用navigator.userAgent判斷當(dāng)前瀏覽器所處的環(huán)境，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
用js實(shí)現(xiàn)的刪除table中一行數(shù)據(jù)的代碼2008-06-06
JavaScript實(shí)現(xiàn)對(duì)JSON對(duì)象數(shù)組數(shù)據(jù)進(jìn)行分頁處理
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)對(duì)JSON對(duì)象數(shù)組數(shù)據(jù)進(jìn)行分頁處理,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
zTree插件之單選下拉菜單實(shí)例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
用jscript實(shí)現(xiàn)新建和保存一個(gè)word文檔
用jscript實(shí)現(xiàn)新建和保存一個(gè)word文檔...2007-06-06
async/await實(shí)現(xiàn)Promise.acll()簡介
Promise.all() 方法接收一個(gè) promise 的 iterable 類型的輸入，并且只返回一個(gè)Promise實(shí)例，并且輸入的所有 promise 的 resolve 回調(diào)的結(jié)果是一個(gè)數(shù)組，這篇文章主要介紹了async/await實(shí)現(xiàn)Promise.acll()簡介,需要的朋友可以參考下2022-11-11