javascript
JS实现动态进度条
進度條
HTML內容
<div class="wrapper">//外邊框<div id="jd" class="first">//jd進度</div></div>css樣式內容
<style>.wrapper {width: 500px;height: 50px;border: 1px solid black;border-radius: 50px;margin: 0 auto;overflow: hidden;}.first {height: 50px;line-height: 50px;background-color: green;border-radius: 50px;position: relative;overflow: hidden;text-align: center;}</style>js內容
<script>var width = 0;var timer;var _jd = document.getElementById("jd");//獲取進度timer = setInterval(function() {width += 1;_jd.innerText = width + '%';if (width >= 100) {clearInterval(timer);_jd.innerText = "加載完成";}document.getElementsByClassName("first")[0].style.width = width + "%";}, 30); </script>代碼：
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?.wrapper {
?? ??? ??? ??? ?width: 500px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?border: 1px solid black;
?? ??? ??? ??? ?border-radius: 50px;
?? ??? ??? ??? ?margin: 0 auto;
?? ??? ??? ??? ?overflow: hidden;
?? ??? ??? ?}
?? ??? ??? ?.first {
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?line-height: 50px;
?? ??? ??? ??? ?background-color: green;
?? ??? ??? ??? ?border-radius: 50px;
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?overflow: hidden;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="wrapper">
?? ??? ??? ?<div id="jd" class="first">
?? ??? ??? ??? ??
?? ??? ??? ?</div>
?? ??? ?</div>
?? ??? ?<script>
?? ??? ??? ?var width = 0;
?? ??? ??? ?var timer;
?? ??? ??? ?var _jd = document.getElementById("jd");
?? ??? ??? ??
?? ??? ??? ?timer = setInterval(function() {
?? ??? ??? ??? ?width += 1;
?? ??? ??? ??? ?_jd.innerText = width + '%';
?? ??? ??? ??? ?if (width >= 100) {
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ??? ?_jd.innerText = "加載完成";
?? ??? ??? ??? ?}
?? ??? ??? ??? ?document.getElementsByClassName("first")[0].style.width = width + "%";
?? ??? ??? ?}, 30);
?? ??? ?</script>
?? ?</body>
</html>
實現效果：?
?
?
總結
- 上一篇： hosts文件屏蔽网址的终极解决方法
- 下一篇： Spring 的Databinder调用