| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>刻意练习365</title>
- <style type="text/css">
- body {
- TEXT-ALIGN: center;
- }
- #app {
- margin: 0 auto;
- font-size: 80px;
- }
- .header {
- margin: 60px 0 0 0;
- }
- .main {
- width: 100%;
- margin: 20px 0 0 0;
- display: flex;
- flex-direction: row;
- justify-content: center;
- }
- .Title{
- color:#999999;
- }
- .Number {
- color: #18c575;
- margin: -2px 0 0 40px;
- font-family: Courier;
- font-size:100px;
- width:450px;
- text-align: right;
- }
- </style>
- <script src="js/jquery-1.6.4.min.js"></script>
- <script>
- var vm;
- $(document).ready(function () {
- var interval=10000,intervalID=0,intervalSchulte=0;
- var numberCount=0,currentQuestionNumber=0,
- schulteNumberCount=0,currentSchulteScoreNumber=0;
- $.get("/data/GetUserNumberAll", function (data) {
- clearInterval(intervalID);
- $(".UserNumber").text(data.result.UserNumber);
- $(".ScoreNumber").text(data.result.ScoreNumber);
- $(".QuestionNumber").text(data.result.QuestionNumber);
- $(".SchulteUserNumber").text(data.result.SchulteUserNumber);
- $(".SchulteScoreNumber").text(data.result.SchulteScoreNumber);
- currentQuestionNumber=data.result.QuestionNumber;
- currentSchulteScoreNumber=data.result.SchulteScoreNumber;
- });
- setInterval(function () {
- $.get("/data/GetUserNumberAll", function (data) {
- clearInterval(intervalID);
- clearInterval(intervalSchulte);
- $(".UserNumber").text(data.result.UserNumber);
- $(".ScoreNumber").text(data.result.ScoreNumber);
- $(".SchulteUserNumber").text(data.result.SchulteUserNumber);
- numberCount = data.result.QuestionNumber - currentQuestionNumber;
- schulteNumberCount = data.result.SchulteScoreNumber - currentSchulteScoreNumber;
- //console.log("numberCount:"+numberCount);
- if (numberCount>0) {
- var interval2 = Math.floor(interval / numberCount);
- if (interval2>300)
- interval2=300;
- intervalID = setInterval(function () {
- var num = Number($(".QuestionNumber").text());
- num++;
- $(".QuestionNumber").text(num);
- if (Number($(".QuestionNumber").text())>=currentQuestionNumber)
- clearInterval(intervalID);
- }, interval2);
- }
- if (schulteNumberCount>0) {
- var interval3 = Math.floor(interval / schulteNumberCount);
- if (interval3>300)
- interval3=300;
- intervalSchulte = setInterval(function () {
- var num2 = Number($(".SchulteScoreNumber").text());
- num2++;
- $(".SchulteScoreNumber").text(num2);
- if (Number($(".SchulteScoreNumber").text())>=currentSchulteScoreNumber)
- clearInterval(intervalSchulte);
- }, interval3);
- }
- currentQuestionNumber=data.result.QuestionNumber;
- currentSchulteScoreNumber=data.result.SchulteScoreNumber;
- //console.log("currentQuestionNumber:"+currentQuestionNumber);
- });
- }, interval);
- });
- </script>
- </head>
- <body>
- <div id="app">
- <div class="header">数学口算练习</div>
- <div class="main">
- <div class="Title">用户总数:</div>
- <div class="Number UserNumber">0</div>
- </div>
- <div class="main">
- <div class="Title">题卡总数:</div>
- <div class="Number ScoreNumber">0</div>
- </div>
- <div class="main">
- <div class="Title">习题总数:</div>
- <div class="Number QuestionNumber">0</div>
- </div>
- <div class="header">注意力游戏</div>
- <div class="main">
- <div class="Title">用户总数:</div>
- <div class="Number SchulteUserNumber">0</div>
- </div>
- <div class="main">
- <div class="Title">题卡总数:</div>
- <div class="Number SchulteScoreNumber">0</div>
- </div>
- </div>
- </body>
- </html>
|