回答編集履歴

4

追記

2016/12/03 16:13

投稿

退会済みユーザー
test CHANGED
@@ -677,3 +677,125 @@
677
677
  </html>
678
678
 
679
679
  ```
680
+
681
+
682
+
683
+ #追記
684
+
685
+
686
+
687
+ ```html
688
+
689
+
690
+
691
+ <script>
692
+
693
+ function number_format(num) {
694
+
695
+ return num.toLocaleString();
696
+
697
+ }
698
+
699
+
700
+
701
+ function loop_set(tgt) {
702
+
703
+
704
+
705
+ //描画回数
706
+
707
+ var refreshCount = 37;
708
+
709
+
710
+
711
+ //描画インターバル
712
+
713
+ var interval = 10;
714
+
715
+
716
+
717
+ // 変更前の値
718
+
719
+ var num = parseInt($('#count').attr('data-value')) + 0;
720
+
721
+
722
+
723
+ // 増減
724
+
725
+ var diff = tgt - num;
726
+
727
+
728
+
729
+ var id = setInterval(function () {
730
+
731
+
732
+
733
+ if ((diff > 0 && num <= tgt) || (diff < 0 && num > tgt)) {
734
+
735
+ num += Math.floor(diff / refreshCount);
736
+
737
+ } else {
738
+
739
+ num = tgt;
740
+
741
+ clearInterval(id);
742
+
743
+ }
744
+
745
+ $('#count').text(number_format(num))
746
+
747
+ .attr('data-value', num);
748
+
749
+
750
+
751
+ }, interval);
752
+
753
+ }
754
+
755
+
756
+
757
+ function pay() {// Ajax通信
758
+
759
+ if ($("form").serialize() === '') {
760
+
761
+ loop_set(0);
762
+
763
+ return;
764
+
765
+ }
766
+
767
+ $.ajax({
768
+
769
+ url: 'inc/calculation.php',
770
+
771
+ type: 'post',
772
+
773
+ dataType: 'json',
774
+
775
+ data: $("form").serialize()
776
+
777
+ }).done(function (response) {
778
+
779
+ loop_set(response['tgt']);
780
+
781
+ }).fail(function () {
782
+
783
+ alert('通信失敗');
784
+
785
+ });
786
+
787
+ }
788
+
789
+
790
+
791
+ $('.item').on('click', function () {
792
+
793
+ pay();
794
+
795
+ });
796
+
797
+
798
+
799
+ </script>
800
+
801
+ ```

3

追記

2016/12/03 16:13

投稿

退会済みユーザー
test CHANGED
@@ -461,3 +461,219 @@
461
461
  </html>
462
462
 
463
463
  ```
464
+
465
+
466
+
467
+ #追記
468
+
469
+
470
+
471
+ ```html
472
+
473
+ <!DOCTYPE HTML>
474
+
475
+ <html lang="en-US">
476
+
477
+ <head>
478
+
479
+ <meta charset="UTF-8">
480
+
481
+ <title></title>
482
+
483
+ <style type="text/css">
484
+
485
+ #count {
486
+
487
+ width: 200px;
488
+
489
+ border: 1px solid #CCC;
490
+
491
+ padding: .5em;
492
+
493
+ text-align: right;
494
+
495
+ }
496
+
497
+ </style>
498
+
499
+ </head>
500
+
501
+ <body>
502
+
503
+ <form action="">
504
+
505
+ <ul>
506
+
507
+ <li>
508
+
509
+ <label>
510
+
511
+ <input class="item" type="radio" name="pay_01" value="10000" />
512
+
513
+ 10000
514
+
515
+ </label>
516
+
517
+ </li>
518
+
519
+ <li>
520
+
521
+ <label>
522
+
523
+ <input class="item" type="radio" name="pay_01" value="20000" />
524
+
525
+ 20000
526
+
527
+ </label>
528
+
529
+ </li>
530
+
531
+ </ul>
532
+
533
+ <ul>
534
+
535
+ <li>
536
+
537
+ <label>
538
+
539
+ <input class="item" type="checkbox" name="pay_02[]" value="500" />
540
+
541
+ 500
542
+
543
+ </label>
544
+
545
+ </li>
546
+
547
+ <li>
548
+
549
+ <label>
550
+
551
+ <input class="item" type="checkbox" name="pay_02[]" value="10000" />
552
+
553
+ 10000
554
+
555
+ </label>
556
+
557
+ </li>
558
+
559
+ </ul>
560
+
561
+ </form>
562
+
563
+
564
+
565
+ <div id="count" data-value="0">
566
+
567
+ 0
568
+
569
+ </div>
570
+
571
+
572
+
573
+ <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
574
+
575
+ <script>
576
+
577
+ function number_format(num) {
578
+
579
+ return num.toLocaleString();
580
+
581
+ }
582
+
583
+
584
+
585
+ function loop_set(tgt) {
586
+
587
+
588
+
589
+ //描画回数
590
+
591
+ var refreshCount = 37;
592
+
593
+
594
+
595
+ //描画インターバル
596
+
597
+ var interval = 10;
598
+
599
+
600
+
601
+ // 変更前の値
602
+
603
+ var num = parseInt($('#count').attr('data-value')) + 0;
604
+
605
+
606
+
607
+ // 増減
608
+
609
+ var diff = tgt - num;
610
+
611
+
612
+
613
+ var id = setInterval(function () {
614
+
615
+
616
+
617
+ if ((diff > 0 && num <= tgt) || (diff < 0 && num > tgt)) {
618
+
619
+ num += Math.floor(diff / refreshCount);
620
+
621
+ } else {
622
+
623
+ num = tgt;
624
+
625
+ clearInterval(id);
626
+
627
+ }
628
+
629
+ $('#count').text(number_format(num))
630
+
631
+ .attr('data-value', num);
632
+
633
+
634
+
635
+ }, interval);
636
+
637
+ }
638
+
639
+
640
+
641
+ function pay() {// Ajax通信
642
+
643
+ $.ajax({
644
+
645
+ url: 'inc/calculation.php',
646
+
647
+ type: 'post',
648
+
649
+ dataType: 'json',
650
+
651
+ data: $("form").serialize()
652
+
653
+ }).done(function (response) {
654
+
655
+ loop_set(response['tgt']);
656
+
657
+ }).fail(function () {
658
+
659
+ alert('通信失敗');
660
+
661
+ });
662
+
663
+ }
664
+
665
+
666
+
667
+ $('.item').on('click', function () {
668
+
669
+ pay();
670
+
671
+ });
672
+
673
+ </script>
674
+
675
+ </body>
676
+
677
+ </html>
678
+
679
+ ```

2

追記

2016/12/03 15:27

投稿

退会済みユーザー
test CHANGED
@@ -249,3 +249,215 @@
249
249
  echo json_encode($calculation);
250
250
 
251
251
  ```
252
+
253
+
254
+
255
+ #追記
256
+
257
+
258
+
259
+ 減算方向の処理でも結構簡素化できました。
260
+
261
+
262
+
263
+ ```html
264
+
265
+ <!DOCTYPE HTML>
266
+
267
+ <html lang="en-US">
268
+
269
+ <head>
270
+
271
+ <meta charset="UTF-8">
272
+
273
+ <title></title>
274
+
275
+ <style type="text/css">
276
+
277
+ #count {
278
+
279
+ width: 200px;
280
+
281
+ border: 1px solid #CCC;
282
+
283
+ padding: .5em;
284
+
285
+ text-align: right;
286
+
287
+ }
288
+
289
+ </style>
290
+
291
+ </head>
292
+
293
+ <body>
294
+
295
+ <form action="">
296
+
297
+ <ul>
298
+
299
+ <li>
300
+
301
+ <label>
302
+
303
+ <input class="item" type="radio" name="pay_01" value="10000" />
304
+
305
+ 10000
306
+
307
+ </label>
308
+
309
+ </li>
310
+
311
+ <li>
312
+
313
+ <label>
314
+
315
+ <input class="item" type="radio" name="pay_01" value="20000" />
316
+
317
+ 20000
318
+
319
+ </label>
320
+
321
+ </li>
322
+
323
+ </ul>
324
+
325
+ <ul>
326
+
327
+ <li>
328
+
329
+ <label>
330
+
331
+ <input class="item" type="checkbox" name="pay_02[]" value="500" />
332
+
333
+ 500
334
+
335
+ </label>
336
+
337
+ </li>
338
+
339
+ <li>
340
+
341
+ <label>
342
+
343
+ <input class="item" type="checkbox" name="pay_02[]" value="10000" />
344
+
345
+ 10000
346
+
347
+ </label>
348
+
349
+ </li>
350
+
351
+ </ul>
352
+
353
+ </form>
354
+
355
+
356
+
357
+ <div id="count">
358
+
359
+ 0
360
+
361
+ </div>
362
+
363
+
364
+
365
+ <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
366
+
367
+ <script>
368
+
369
+
370
+
371
+ // 初期値
372
+
373
+ var num = 0;
374
+
375
+
376
+
377
+ function loop_set(tgt) {
378
+
379
+
380
+
381
+ //描画回数
382
+
383
+ var refreshCount = 37;
384
+
385
+
386
+
387
+ //描画インターバル
388
+
389
+ var interval = 10;
390
+
391
+
392
+
393
+ // 増減
394
+
395
+ var diff = tgt - $('#count').text();
396
+
397
+
398
+
399
+ var id = setInterval(function () {
400
+
401
+
402
+
403
+ if ((diff > 0 && num <= tgt) || (diff < 0 && num > tgt)) {
404
+
405
+ num += Math.floor(diff / refreshCount);
406
+
407
+ } else {
408
+
409
+ num = tgt;
410
+
411
+ clearInterval(id);
412
+
413
+ }
414
+
415
+ $('#count').text(num);
416
+
417
+
418
+
419
+ }, interval);
420
+
421
+ }
422
+
423
+
424
+
425
+ function pay() {// Ajax通信
426
+
427
+ $.ajax({
428
+
429
+ url: 'inc/calculation.php',
430
+
431
+ type: 'post',
432
+
433
+ dataType: 'json',
434
+
435
+ data: $("form").serialize()
436
+
437
+ }).done(function (response) {
438
+
439
+ loop_set(response['tgt']);
440
+
441
+ }).fail(function () {
442
+
443
+ alert('通信失敗');
444
+
445
+ });
446
+
447
+ }
448
+
449
+
450
+
451
+ $('.item').on('click', function () {
452
+
453
+ pay();
454
+
455
+ });
456
+
457
+ </script>
458
+
459
+ </body>
460
+
461
+ </html>
462
+
463
+ ```

1

修正

2016/12/03 13:53

投稿

退会済みユーザー
test CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  冗長な処理を簡素化。
8
8
 
9
+ obClick はレガシーコードなので、削除。`on('click', function(){})`に置き換え。
10
+
9
11
 
10
12
 
11
13
  ```html
@@ -126,7 +128,7 @@
126
128
 
127
129
  //描画回数
128
130
 
129
- var refreshCount = 20;
131
+ var refreshCount = 23; // 素数の方が演出的にいいかも
130
132
 
131
133
 
132
134
 
@@ -136,7 +138,7 @@
136
138
 
137
139
 
138
140
 
139
- id = setInterval(function () {
141
+ var id = setInterval(function () {
140
142
 
141
143
 
142
144