<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="JQ/jquery.mobile-1.4.3.min.css">
<script src="JQ/jquery-1.11.1.min.js"></script>
<script src="JQ/jquery.mobile-1.4.3.min.js"></script>
<script>
$(function() {
$('.circle').each(function(index, el) {
var num = /\d+/.exec($('.Smallmask').text()) / /\d+/.exec($('.mask').text()) * 360;
if (num<=180) {
$(this).find('.right').css('transform', "rotate(" + num + "deg)");
$('.circle').find('.left').css('transform', "rotate(0deg)");
}else if(num>180 && num<=360) {
$(this).find('.right').css('transform', "rotate(180deg)");
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
}else{
$(this).find('.right').css('transform', "rotate(180deg)");
$(this).find('.left').css('transform', "rotate(180deg)");
};
});
});
</script>
</head>
<style>
body {
font: normal 100% "微?雅黑", "Helvetica Neue", Helvetica, STHeiTi,
sans-serif;
width: 640px;
margin:0 auto;
overflow-x: hidden;
}
.circleContral{
position:absolute;
left: 500px;
}
.circleBG {
width: 210px;
height: 210px;
border-radius: 50%;
background: #E4E4E4;
position:absolute;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: #437867;
position:absolute;
top: 5px;left: 5px;
}
.pie_left, .pie_right {
width: 200px;
height: 200px;
position: absolute;
top: 0;left: 0;
}
.left, .right {
display: block;
width:200px;
height:200px;
background:#A9DDCC;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.pie_right, .right {
clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
clip:rect(0,100px,auto,0);
}
.mask {
width: 150px;
height: 150px;
border-radius: 50%;
left: 25px;
top: 25px;
background: #FFF;
position: absolute;
text-align: center;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.SmallmaskBG {
width: 80px;
height: 80px;
left: 180px;
top: 15px;
border-radius: 50%;
background: #E4E4E4;
position: relative;
}
.Smallmask {
width: 70px;
height: 70px;
left: 5px;
top: 5px;
border-radius: 50%;
background: #FCFCFC;
position: absolute;
text-align: center;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<a href="#" data-role="button" data-icon="back" data-iconpos="notext" value="Icon only"></a>
<h1>Page Title</h1>
</div>
<div data-role="main" class="ui-content">
<div class="circleContral">
<div class="circleBG">
<div class="circle">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask">Total:<br/>200bills
</div>
</div>
</div>
<div class="SmallmaskBG">
<div class="Smallmask">88bills<br/>Finished
</div>
</div>
</div>
</div>
</div>
</body>
</html>