【原生Javascript案例】圆形进度条
2022/3/21 17:29:37
本文主要是介绍【原生Javascript案例】圆形进度条,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
案例效果
代码编写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 300px; height: 300px; margin: 100px auto; /* border: 1px solid #000; */ } .circle-progressbar { position: relative; width: 100%; height: 100%; } .circle-progressbar .title { margin: 0; text-align: center; line-height: 300px; } .circle-progressbar div { box-sizing: border-box; } .circle-progressbar .wrapper { position: absolute; top: 0; width: 150px; height: 300px; /* border: 1px solid red; */ overflow: hidden; } .circle-progressbar .wrapper.left-wrapper { left: 0; } .circle-progressbar .wrapper.right-wrapper { right: 0; } .circle-progressbar .wrapper .circle-bar { position: absolute; width: 300px; height: 300px; border: 30px solid transparent; border-radius: 50%; transform: rotate(-135deg); transition: transform .3s; } .circle-progressbar .left-wrapper .circle-bar { left: 0; border-left-color: turquoise; border-bottom-color: turquoise; } .circle-progressbar .right-wrapper .circle-bar { right: 0; border-right-color: turquoise; border-top-color: turquoise; } </style> </head> <body> <div class="container"> <div class="circle-progressbar"> <h1 class="title">0%</h1> <div class="wrapper left-wrapper"> <div class="circle-bar"></div> </div> <div class="wrapper right-wrapper"> <div class="circle-bar"></div> </div> </div> </div> <script> const circleProgressBar = CircleProgressBar(); let p = 0; let t = setInterval(() => { circleProgressBar( ++ p); }, 200); function CircleProgressBar() { const oLeftCircleBar = getCircleBar('left'), oRightCircleBar = getCircleBar('right'), oTitle = document.querySelector('.circle-progressbar .title'); // percent : 百分比 return function(percent) { if(percent >= 0 && percent <= 50) { setRotate(oRightCircleBar, percent) }else if(percent >= 50 && percent <= 100) { setRotate(oLeftCircleBar, percent - 50) } if(percent >= 0 && percent <= 100) { oTitle.innerText = percent + '%'; } } function formatDegree(percent) { return `rotate(${ -135 + (360 / 100 * percent) }deg)` } function setRotate(node, percent) { node.style.transform = formatDegree(percent) } function getCircleBar(dir) { return document.querySelector(`.circle-progressbar .${ dir }-wrapper .circle-bar`); } } </script> </body> </html>
这篇关于【原生Javascript案例】圆形进度条的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?