前端开发增加数字显示的环形进度条
摘要： 软件产品前端开发思想 苏州软件前端开发薪资待遇 ipad上前端开发软件 html 代码 <!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”> <html> <head&g……
| 软件产品前端开发思想 |
| 苏州软件前端开发薪资待遇 |
| ipad上前端开发软件 |
html 代码
<html>
<head>
<meta name=”page-view-size” content=”640*530″ />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<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>
</head>
<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>
| 主流前端开发软件 |
| 软件前端开发测试 |
| web前端开发使用的软件下载 |
» 本文来自：前端开发者 » 《前端开发增加数字显示的环形进度条》
» 本文链接地址：https://www.rokub.com/6886.html
» 您也可以订阅本站：https://www.rokub.com
近期评论