Menyedari kesan paparan digital dinamik berdasarkan jQuery_jquery

Kami perlu memaparkan data secara dinamik dalam beberapa aplikasi, seperti bilangan orang semasa dalam talian, jumlah jumlah transaksi semasa, kadar pertukaran semasa, dll. Halaman hadapan perlu dimuat semula dalam masa nyata untuk mendapatkan data terkini. Artikel ini akan menggunakan contoh untuk memperkenalkan anda kepada penggunaan jQuery untuk mencapai kesan paparan digital dinamik.

Lihat demo Muat turun kod sumber

Kod HTML

Contoh ini menganggap bahawa bilangan pengguna dalam talian semasa akan dipaparkan secara dinamik pada halaman (tanpa memuatkan semula keseluruhan halaman, hanya menyegarkan sebahagian nombor dinamik), yang biasanya digunakan pada beberapa platform statistik. Hanya tentukan struktur berikut dalam halaman HTML:

<div class="count">当前在线：<span id="number">
</span>
</div>

Kod jQuery:

Mula-mula kita perlu mentakrifkan proses animasi, menggunakan fungsi animate() jQuery untuk merealisasikan proses transformasi daripada satu nombor ke nombor lain Fungsi tersuai magic_number() berikut menyepadukan kod seperti berikut:

function magic_number(value) { 
  var num = $("#number"); 
  num.animate({count: value}, { 
    duration: 500, 
    step: function() { 
      num.text(String(parseInt(this.count))); 
    } 
  }); 
}; 

Kemudian fungsi kemas kini() menggunakan $.getJSON() jQuery untuk menghantar permintaan ajax ke nombor latar belakang.php Selepas mendapat respons PHP, ia memanggil magic_number() untuk memaparkan nombor terkini.

Untuk melihat hasil yang lebih baik, kami menggunakan setInterval() untuk menetapkan selang antara pelaksanaan kod.

function update() { 
  $.getJSON("number.php?jsonp=?", function(data) { 
    magic_number(data.n); 
  }); 
}; 
setInterval(update, 5000); //5秒钟执行一次 
update(); 
PHP

Dalam projek sebenar, kami akan menggunakan PHP untuk mendapatkan data terkini dalam pangkalan data, dan kemudian mengembalikannya ke bahagian hadapan melalui PHP. Dalam contoh ini, untuk demonstrasi yang lebih baik, nombor rawak digunakan, dan akhirnya dikembalikan ke js bahagian hadapan dalam format json Kod number.php adalah seperti berikut:

$total_data = array( 
  'n' => rand(0,999) 
);   
echo $_GET['jsonp'].'('. json_encode($total_data) . ')';