动态获取半弧的高度

半弧显示的基本效果:

dom结构:

 1  <ul>
 2  　　<li>
 3                     <div class="messagesTitle">
 4                         已发
 5                         <p>本月已发短信数</p>
 6                     </div>
 7                     <div class="green clock">
 8                         <div class="display">@ViewBag.AlreadyCount</div><!--中心圆展示的数字-->
 9                         <div class="rotate left"><!--左半圆-->
10                             <div class="bg left"></div>
11                         </div>
12                         <div class="rotate right"><!--右半圆-->
13                             <div class="bg right"></div>
14                         </div>
15                     </div>
16                 </li>
17                 <li>
18                     <div class="messagesTitle">
19                         剩余
20                         <p>本月剩余短信数</p>
21                     </div>
22                     <div class="orange clock">
23                         <div class="display">@(ViewBag.MaxLimitCount - ViewBag.AlreadyCount)</div>
24                         <div class="rotate left surplus">
25                             <div class="bg left"></div>
26                         </div>
27                         <div class="rotate right rightSurplus">
28                             <div class="bg right"></div>
29                         </div>
30                     </div>
31                 </li>
32 </ul>

css代码:

 1 .clock{
 2     height:120px;
 3     width:120px;
 4     position:relative;
 5     overflow:hidden;
 6     margin:20px auto;
 7 }
 8 .clock .rotate{
 9     position:absolute;
10     width:120px;
11     height:120px;
12     top:0;
13     left:0;
14 }
15 .rotate.right{
16     display:none;
17     z-index:11;
18 }
19 .clock .bg, .clock:before{
20     width:60px;
21     height:120px;
22     position:absolute;
23     top:0;
24     background-color:#fff;
25 }
26 .clock:before{
27     left:0;
28     z-index:10;
29     content:'';
30 }
31 .clock .display{
32     position: absolute;
33     left: 34px;
34     top: 0;
35     color: #333;
36     font-size: 29px;
37     text-align: center;
38     line-height: 120px;   
39     z-index: 20;   
40 }
41 .clock .bg.left{ 
42     left:0; 
43 }
44 .green .bg.left{ 
45     background:url('../images/usercire.png') no-repeat left top; 
46 }
47 .orange .bg.left{
48     background:url('../images/surplus.png') no-repeat left top;
49 }
50 .clock .bg.right{ 
51     left:60px;
52 }
53 .green .bg.right{ 
54     background:url('../images/usercire.png') no-repeat right top;
55 }
56 .orange .bg.right{ 
57     background:url('../images/surplus.png') no-repeat right top;
58 }

View Code

js代码:

 1   window.onload = function () {
 2             /*修改首页的我的底下的可发送的半弧大小*/
 3             var angle = 360 / "@ViewBag.MaxLimitCount" ,
 4                 transformangle = angle * "@ViewBag.AlreadyCount",
 5                 transformanglelimit = 360 - transformangle;
 6             transformangle <= 180 ? $(".rotate.right").hide() : $(".rotate.right").show();
 7             transformanglelimit <= 180 ? $(".rotate.rightSurplus").hide() : $(".rotate.rightSurplus").show();
 8 
 9             if (transformangle <= 180) {
10                 $(".rotate.left").css("transform", "rotate(" + transformangle + "deg)");
11                 transformanglelimit = transformanglelimit - 180;
12                 $(".rotate.surplus").css("transform", "rotate(180deg)");
13                 $(".rotate.rightSurplus").css("transform", "rotate(" + transformanglelimit + "deg)");
14             } else {
15                 transformangle = transformangle - 180;
16                 $(".rotate.left").css("transform", "rotate(180deg)");
17                 $(".rotate.right").css("transform", "rotate(-" + transformangle + "deg)");
18                 $(".rotate.surplus").css("transform", "rotate(" + transformanglelimit + "deg)");
19             }
20         }

最终的效果图:

备注:通过对一个图片进行简单的切割,主要切割成两个半圆的形式,然后,通过transform进行页面的旋转功能

　　形成两个半圆,主要是根据css来实现的,而获取页面的取值然后来通过弧度来进行弧度的旋转,是通过js来实现的