新皮肤

public/plugins/layui/css/main.css

@@ -272,4 +272,64 @@ body{
     top: .5rem;
 }
 .popbg{display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);}
-.covxlz{ width: 2.86rem;left: 50%; margin-left: -1.43rem; bottom: .5rem; height: 1rem; border-radius: .5rem; background-color: #a7a8c5;line-height: 1rem;text-align: center;color: #222e71 }
+.covxlz{ width: 2.86rem;left: 50%; margin-left: -1.43rem; bottom: .5rem; height: 1rem; border-radius: .5rem; background-color: #a7a8c5;line-height: 1rem;text-align: center;color: #222e71 }
+.con {
+  position:relative;
+  display:inline-block;
+  height:200px;
+  width:200px;
+}
+
+.percent-circle {
+  position:absolute;
+  height:100%;
+  background:#f00;
+  overflow: hidden;
+}
+
+.percent-circle-right {
+  right:0;
+  width:100px;
+  border-radius: 0 100px 100px 0/0 100px 100px 0;
+}
+
+.percent-circle-right .right-content{
+  position: absolute;
+  content: '';
+  width: 100%; 
+  height: 100%;
+  transform-origin:left center;
+  transform: rotate(0deg);
+  border-radius: 0 100px 100px 0/0 100px 100px 0;
+  background:#bbb;
+}
+
+.percent-circle-left {
+  width:100px;
+  border-radius: 100px 0 0 100px/100px 0 0 100px;
+}
+
+.percent-circle-left .left-content {
+  position: absolute;
+  content: '';
+  width: 100%; 
+  height: 100%;
+  transform-origin:right center;
+  transform: rotate(0deg);
+  border-radius: 100px 0 0 100px/100px 0 0 100px;
+  background:#bbb;
+}
+
+.text-circle {
+  position: absolute;
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  height:80%;
+  width:80%;
+  left:10%;
+  top:10%;
+  border-radius:100%;
+  background:#000;
+  color:#fff;
+}

resources/views/home/user.blade.php

@@ -58,7 +58,17 @@
         <input type="hidden" id="user_id" name="user_id">
         <input type="hidden" id="duishou" name="duishou">
       </div>
-      <div class="cov cov3 amt" id="Jvs">匹配中</div>
+      <div class="cov cov3 amt" id="Jvs">匹配中
+        <div class="con" style="display: none;">
+          <div class="percent-circle percent-circle-left">
+            <div class="left-content"></div>
+          </div>
+          <div class="percent-circle percent-circle-right">
+            <div class="right-content"></div>
+          </div>
+          <div class="text-circle">0%</div>
+        </div>
+      </div>
       <div class="cov cov4 amt">
         <span class="userface" id="py2_avatar" ></span>
         <b id="py2_username" class="name"></b>
@@ -96,11 +106,21 @@ layui.use(['form','jquery'], function(){
   var question_id=0;
   var ts;
   var sum=5;
+  var angle = 0 ;
   $.ajaxSetup({
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       }
   });
+  var leftContent  = document.querySelector(".left-content");
+var rightContent  = document.querySelector(".right-content");
+var textCircle   = document.querySelector(".text-circle");
+
+//先是leftContent旋转角度从0增加到180度，
+//然后是rightContent旋转角度从0增加到180度
+
+
+ 
    $(".welcome .rulebtn").click(function(argument) {
       $(".popwind").show();
       $(".popbg").show();
@@ -131,13 +151,23 @@ layui.use(['form','jquery'], function(){
     ts=setInterval(function(){
                   
                   sum= sum-1;
-                  $("#Jvs").html(sum);
+                  $("#Jvs .con").show();
                   if(sum<=0){
                     //cur_question++;
                     //getQuestion(room_id, cur_question);
                   //  answer(); 
                     sum=10;
                   }
+                  angle += 30;
+                if(angle < 360){
+                  if(angle > 180){
+                    rightContent.setAttribute('style', 'transform: rotate('+(angle-180)+'deg)');
+                  }else{
+                    leftContent.setAttribute('style', 'transform: rotate('+angle+'deg)');
+                  }
+                   textCircle.innerHTML = sum;
+                
+                }
                 },1000)
   }
   //绑定通信
@@ -214,7 +244,7 @@ layui.use(['form','jquery'], function(){
                   //结算
                    clearInterval(ts)
                    $(".g-doc .g-inner").addClass("end");
-                   $("#Jvs").html("结束");
+                   $("#Jvs").hide();
                   
                   var url = 'Quit';
                   if(py1_score > py2_score){