Pembangunan PHP: Bagaimana untuk melaksanakan bar kemajuan membaca artikel dan fungsi perkongsian

Pembangunan PHP: Cara melaksanakan bar kemajuan membaca artikel dan fungsi perkongsian

Pengenalan:
Bar kemajuan bacaan artikel dan fungsi perkongsian ialah fungsi penting yang memberikan pengguna pengalaman membaca yang lebih baik dan memudahkan perkongsian kandungan. Dalam pembangunan PHP, kita boleh mencapai dua fungsi ini melalui beberapa cara teknikal. Artikel ini akan memperkenalkan anda kepada kaedah pelaksanaan khusus dan memberikan contoh kod yang sepadan.

1. Pelaksanaan bar kemajuan membaca artikel
Kunci untuk melaksanakan bar kemajuan membaca artikel adalah untuk mendapatkan kemajuan pembacaan pengguna semasa (iaitu, ketinggian dokumen yang sedang ditatal), dan kemudian menukarnya kepada peratusan relatif kepada keseluruhan artikel. Langkah-langkah pelaksanaan khusus adalah seperti berikut:

1. Perkenalkan perpustakaan jQuery ke dalam halaman HTML:

   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

2. Tentukan gaya bar kemajuan dalam fail gaya CSS:

   #progress-bar {
     width: 100%;
     height: 5px;
     background-color: #ebebeb;
   }
   
   #progress-fill {
     height: 100%;
     background-color: #00aaff;
   }

3. Laksanakan pemantauan acara menatal kemajuan dan bar kemajuan dalam skrip JavaScript:

   $(document).ready(function() {
     $(window).scroll(function() {
    var docHeight = $(document).height();
    var winHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;
   
    $('#progress-fill').css('width', scrollPercent + '%');
     });
   });

4. Masukkan elemen bar kemajuan ke dalam halaman HTML:

   <div id="progress-bar">
     <div id="progress-fill"></div>
   </div>

Melalui langkah di atas, anda boleh melaksanakan bar kemajuan membaca artikel ringkas.

2. Pelaksanaan fungsi perkongsian artikel
Kunci untuk merealisasikan fungsi perkongsian artikel adalah dengan berkongsi pautan dan tajuk artikel semasa ke pelbagai platform sosial melalui API media sosial. Perkara berikut mengambil perkongsian Facebook sebagai contoh untuk memberikan kaedah pelaksanaan khusus:

1. Perkenalkan JavaScript SDK Facebook ke dalam halaman HTML:

   <div id="fb-root"></div>
   <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0&appId=YOUR_APP_ID&autoLogAppEvents=1" nonce="YOUR_NONCE"></script>

   Antaranya, YOUR_APP_ID ialah ID aplikasi yang anda perolehi selepas membuat aplikasi pada platform pembangun Facebook .

2. Sisipkan butang kongsi dalam halaman HTML:

   <div class="fb-share-button" data-href="当前文章链接" data-layout="button_count" data-size="small">
     <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=当前文章链接&src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a>
   </div>

   Perhatikan bahawa anda perlu menggantikan pautan artikel semasa dengan pautan artikel sebenar.

Melalui langkah di atas, pengguna boleh mengklik butang kongsi untuk berkongsi artikel semasa ke Facebook.

Ringkasnya, melalui contoh kod di atas, kita boleh melaksanakan bar kemajuan membaca artikel dan fungsi perkongsian. Pembaca boleh menambah baik dan menyesuaikan kedua-dua fungsi ini mengikut keperluan khusus untuk menyesuaikan dengan lebih baik ke laman web atau aplikasi mereka sendiri. Semoga semua orang berjaya dengan pembangunan!

Atas ialah kandungan terperinci Pembangunan PHP: Bagaimana untuk melaksanakan bar kemajuan membaca artikel dan fungsi perkongsian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!