round_history.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
  6. <title>足迹</title>
  7. <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/1.0.0/weui.min.css"/>
  8. <style>
  9. body{
  10. background-color: #fba000;
  11. padding: 15px;
  12. }
  13. .page__hd {
  14. padding: 10px;
  15. }
  16. .page__desc {
  17. margin-top: 5px;
  18. color: #888;
  19. text-align: left;
  20. font-size: 14px;
  21. padding-left:20px;
  22. }
  23. .wrapper{
  24. background-color: #fff;
  25. border-radius: 8px;
  26. padding: 10px 0px;
  27. }
  28. .bottom__padding{
  29. padding-bottom: 80px;
  30. }
  31. .style-btn2{
  32. background-color: #fff!important;
  33. color: #fba000!important;
  34. border: 1px solid #fba000;
  35. }
  36. .page_foot_ft{
  37. color: #fff!important;
  38. }
  39. .weui-pl{
  40. padding: 10px 45px!important;
  41. }
  42. .weui-label{
  43. color: #fba000;
  44. }
  45. .weui-cell{
  46. padding-left: 45px;
  47. }
  48. .weui-cell:before{
  49. border-top:0px!important;
  50. border-bottom: 1px solid #d9d9d9;
  51. left:0;
  52. }
  53. .weui-cells:before{
  54. border-top:0px!important;
  55. }
  56. .weui-btn:after{
  57. border:0px!important;
  58. }
  59. .weui-footer{
  60. color:#fff;
  61. }
  62. .porl{
  63. position: relative;
  64. height: 24px;
  65. }
  66. .updateFile{
  67. position: absolute;;
  68. opacity: 0;
  69. left: 0px;
  70. top: 0px;
  71. width: 100%;
  72. }
  73. .ft_orange{
  74. color: #fba000;
  75. }
  76. .ft_white {
  77. color: #fff;
  78. }
  79. .weui-form-preview__item{
  80. min-height: 28px;
  81. }
  82. .mine-form-btn{
  83. width: 80%;
  84. margin: 10px auto;
  85. background-color: #15a202;
  86. text-align: center;
  87. color: #fff;
  88. border-radius: 10px;
  89. }
  90. .weui-form-preview__hd:after{
  91. border-bottom:0px!important;
  92. }
  93. .weui-form-preview:before{
  94. border-top: 0px!important;
  95. }
  96. .weui-form-preview__ft:after{
  97. border-top: 0!important;
  98. }
  99. .weui-form-preview:after{
  100. border-bottom: 0px!important;
  101. }
  102. .weui-panel:after{
  103. border-bottom: 0px!important;
  104. }
  105. .weui-form-preview__hd .weui-form-preview__value{
  106. font-size: 16px;
  107. }
  108. .weui-form-preview__item{
  109. border-bottom: 1px solid #d9d9d9;
  110. }
  111. .weui-form-preview__value{
  112. overflow: inherit;
  113. }
  114. .weui-panel:before{
  115. border-top: 0px!important;
  116. }
  117. </style>
  118. </head>
  119. <body ontouchstart>
  120. <div class="weui-panel__hd ft_white">历史游玩记录,共2条</div>
  121. <div class="wrapper">
  122. <div class="weui-panel weui-panel_access">
  123. <div class="weui-panel__bd">
  124. <div class="weui-form-preview">
  125. <div class="weui-form-preview__bd">
  126. <div class="weui-form-preview__item">
  127. <label class="weui-form-preview__label ft_orange">日期</label>
  128. <em name="start_time" class="weui-form-preview__value">2017-11-11 11:14:43</em>
  129. </div>
  130. <div class="weui-form-preview__item">
  131. <label class="weui-form-preview__label ft_orange">地点</label>
  132. <span class="weui-form-preview__value">中央公园</span>
  133. </div>
  134. <div class="weui-form-preview__item">
  135. <label class="weui-form-preview__label ft_orange">获得金币</label>
  136. <span class="weui-form-preview__value">12</span>
  137. </div>
  138. <div class="weui-form-preview__item">
  139. <label class="weui-form-preview__label ft_orange">获得蘑菇</label>
  140. <span class="weui-form-preview__value">93</span>
  141. </div>
  142. <div class="weui-form-preview__item">
  143. <label class="weui-form-preview__label ft_orange">游玩时长</label>
  144. <span name="end_time" class="weui-form-preview__value">26:57</span>
  145. </div>
  146. </div>
  147. <div class="weui-form-preview__ft">
  148. <a class="mine-form-btn" href="/cust/round/l4IsWUWKJkUzyxdk8O9.htm">查看详情</a>
  149. </div>
  150. </div>
  151. <br/>
  152. <div class="weui-form-preview">
  153. <div class="weui-form-preview__bd">
  154. <div class="weui-form-preview__item">
  155. <label class="weui-form-preview__label ft_orange">日期</label>
  156. <em name="start_time" class="weui-form-preview__value">2017-11-11 11:14:43</em>
  157. </div>
  158. <div class="weui-form-preview__item">
  159. <label class="weui-form-preview__label ft_orange">地点</label>
  160. <span class="weui-form-preview__value">中央公园</span>
  161. </div>
  162. <div class="weui-form-preview__item">
  163. <label class="weui-form-preview__label ft_orange">获得金币</label>
  164. <span class="weui-form-preview__value">12</span>
  165. </div>
  166. <div class="weui-form-preview__item">
  167. <label class="weui-form-preview__label ft_orange">获得蘑菇</label>
  168. <span class="weui-form-preview__value">93</span>
  169. </div>
  170. <div class="weui-form-preview__item">
  171. <label class="weui-form-preview__label ft_orange">游玩时长</label>
  172. <span name="end_time" class="weui-form-preview__value">26:57</span>
  173. </div>
  174. </div>
  175. <div class="weui-form-preview__ft">
  176. <a class="mine-form-btn" href="/cust/round/l4IsWUWKJkUzyxdk8O9.htm">查看详情</a>
  177. </div>
  178. </div>
  179. <br/>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
  185. <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  186. </body>
  187. </html>
  188. <script type="text/javascript">
  189. $(document).ready(function () {
  190. var now = parserDate('2017-11-11 05:27:47');
  191. $('[name="start_time"]').each(function () {
  192. var $this = $(this);
  193. $this.html(getTD($this.html(), now));
  194. });
  195. });
  196. var weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
  197. function getTD(timeStr, timeNow) {
  198. getTimeDesc(parserDate(timeStr), timeNow);
  199. }
  200. function getTimeDesc(timeBefore, timeAfter) {
  201. var date3 = timeAfter.getTime() - timeBefore.getTime();
  202. var days = Math.floor(date3 / (24 * 3600 * 1000));
  203. if (days < 1) {
  204. //当天以内
  205. var hours = Math.floor(date3 / (3600 * 1000));
  206. if (hours < 1) {
  207. //一个小时以内
  208. return "刚刚";
  209. }
  210. return timeBefore.getHours() + "点" + timeBefore.getMinutes() + "分";
  211. } else if (days < 3) {
  212. if (days < 2) {
  213. return "昨天 " + timeBefore.getHours() + "点";
  214. }
  215. return "前天 " + timeBefore.getHours() + "点";
  216. } else if (days < 7) {
  217. //这个星期内
  218. return weekArray[timeBefore.getDay()] + " " + timeBefore.getHours() + "点";
  219. } else if (days < 30) {
  220. //这个月以内
  221. return timeBefore.getMonth() + "月" + timeBefore.getDate() + "日 " + timeBefore.getHours() + "点";
  222. }
  223. return timeBefore.format("yyyy-MM-dd hh:mm");
  224. }
  225. function numts(value) {
  226. if (isNaN(value) || value === undefined || value == '-') {
  227. return '-';
  228. }
  229. var theTime = parseInt(value);// 秒
  230. if (isNaN(theTime)) {
  231. return '-';
  232. }
  233. if (value < 0) {
  234. return '超时!'
  235. }
  236. var theTime1 = 0;// 分
  237. var theTime2 = 0;// 小时
  238. // alert(theTime);
  239. if (theTime > 60) {
  240. theTime1 = parseInt(theTime / 60);
  241. theTime = parseInt(theTime % 60);
  242. // alert(theTime1+"-"+theTime);
  243. if (theTime1 > 60) {
  244. theTime2 = parseInt(theTime1 / 60);
  245. theTime1 = parseInt(theTime1 % 60);
  246. }
  247. }
  248. var result = padZero(parseInt(theTime));
  249. if (theTime1 > 0) {
  250. result = padZero(parseInt(theTime1)) + ":" + result;
  251. } else {
  252. result = "00:" + result;
  253. }
  254. if (theTime2 > 0) {
  255. result = padZero(parseInt(theTime2)) + ":" + result;
  256. }
  257. return result;
  258. }
  259. var parserDate = function (date) {
  260. var t = Date.parse(date);
  261. if (!isNaN(t)) {
  262. return new Date(Date.parse(date.replace(/-/g, "/")));
  263. } else {
  264. return new Date();
  265. }
  266. };
  267. function padZero(num) {
  268. if (!isNaN(num)) {
  269. if (num.toString().length < 2) {
  270. return "0" + num
  271. } else {
  272. return num
  273. }
  274. }
  275. return "00"
  276. }
  277. Date.prototype.format = function (fmt) {
  278. var o = {
  279. "M+": this.getMonth() + 1, //月份
  280. "d+": this.getDate(), //日
  281. "h+": this.getHours(), //小时
  282. "m+": this.getMinutes(), //分
  283. "s+": this.getSeconds(), //秒
  284. "q+": Math.floor((this.getMonth() + 3) / 3), //季度
  285. "S": this.getMilliseconds() //毫秒
  286. };
  287. if (/(y+)/.test(fmt)) {
  288. fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  289. }
  290. for (var k in o) {
  291. if (new RegExp("(" + k + ")").test(fmt)) {
  292. fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  293. }
  294. }
  295. return fmt;
  296. }
  297. </script>