js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jì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>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(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)簡(jiǎ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)文章
layui 根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)創(chuàng)建下拉框并同時(shí)默認(rèn)選中的實(shí)例
今天小編就為大家分享一篇layui 根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)創(chuàng)建下拉框并同時(shí)默認(rèn)選中的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Javascript 實(shí)現(xiàn)微信分享(QQ、朋友圈、分享給朋友)
這篇文章主要介紹了Javascript 實(shí)現(xiàn)微信分享(QQ、朋友圈、分享給朋友)的相關(guān)資料,需要的朋友可以參考下2016-10-10Ionic實(shí)現(xiàn)頁(yè)面下拉刷新(ion-refresher)功能代碼
這篇文章主要介紹了使用Ionic實(shí)現(xiàn)頁(yè)面下拉刷新(ion-refresher)功能的代碼,感興趣的朋友一起看看吧2016-06-06詳解webpack的proxyTable無(wú)效的解決方案
這篇文章主要介紹了詳解webpack的proxyTable無(wú)效的解決方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06JS中的oninput和onchange事件的區(qū)別及如何正確使用
在JavaScript中,oninput和onchange事件是用于處理用戶輸入的常見事件,本文將介紹oninput和onchange事件的區(qū)別,以及如何在實(shí)際開發(fā)中正確使用它們,感興趣的朋友跟隨小編一起看看吧2023-10-10js函數(shù)獲取html中className所在的內(nèi)容并去除標(biāo)簽
本文為大家介紹下如何使用js函數(shù)獲取html中className所在的內(nèi)容,具體實(shí)現(xiàn)思路如下,喜歡的朋友可以參考下2013-09-09