Pembangunan PHP: Bagaimana untuk melaksanakan fungsi bar kemajuan membaca artikel-tutorial php-php.cn

Pembangunan PHP: Bagaimana untuk melaksanakan fungsi bar kemajuan membaca artikel

WBOY

Lepaskan： 2023-09-21 11:46:01

asal

1227 orang telah melayarinya

Pembangunan PHP: Bagaimana untuk melaksanakan fungsi bar kemajuan membaca artikel

Pembangunan PHP: Melaksanakan fungsi bar kemajuan membaca artikel

Dengan populariti peranti mudah alih dan pembangunan Internet, orang ramai mempunyai permintaan yang semakin meningkat untuk membaca kandungan web. Untuk meningkatkan pengalaman pengguna dan membolehkan pengguna memahami kemajuan pembacaan mereka dalam artikel dengan lebih intuitif, fungsi bar kemajuan membaca artikel telah wujud.

Fungsi bar kemajuan membaca artikel terutamanya dilaksanakan melalui JavaScript digabungkan dengan PHP. Di bawah saya akan memperincikan cara melaksanakan fungsi ini, termasuk contoh kod khusus.

Struktur halaman
Pertama, kita perlu mencipta struktur halaman HTML yang mudah untuk memaparkan kandungan artikel dan bar kemajuan bacaan. Dalam halaman tersebut, kami akan menggunakan beberapa gaya CSS dan skrip JavaScript, sila pastikan anda memperkenalkannya dengan betul.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文章阅读进度条</title>
    <!-- 引入样式表 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="progress-bar"></div>
        <div class="article-content" id="articleContent">
            <!-- 文章内容 -->
        </div>
    </div>
    <!-- 引入JavaScript脚本 -->
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Gaya CSS
Kita perlu menentukan beberapa gaya CSS untuk mencantikkan halaman dan membaca bar kemajuan. Ini hanyalah contoh gaya mudah, anda boleh menyesuaikan gaya mengikut keperluan sebenar.

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.progress-bar {
    width: 0;
    height: 5px;
    background-color: #e0e0e0;
}

.article-content {
    margin-top: 20px;
    line-height: 1.5;
    font-size: 16px;
}

Salin selepas log masuk

JavaScript Skrip
Seterusnya, kita perlu melaksanakan fungsi bar kemajuan membaca artikel dalam skrip JavaScript. Prinsip pelaksanaan khusus adalah untuk mengemas kini lebar bar kemajuan bacaan dengan menangkap peristiwa menatal pengguna, mengira kedudukan bar skrol dan menukar kedudukan bar skrol kepada peratusan.

window.addEventListener('scroll', function() {
    // 获取文章内容元素
    var articleContent = document.getElementById('articleContent');
    
    // 文章内容的实际高度
    var contentHeight = articleContent.clientHeight;
    
    // 视口的高度
    var windowHeight = window.innerHeight;
    
    // 文章内容距离视口顶部的高度
    var contentTop = articleContent.getBoundingClientRect().top;
    
    // 计算滚动条的位置
    var scrollPercent = (contentTop + windowHeight) / contentHeight;
    
    // 更新阅读进度条的宽度
    var progressBar = document.querySelector('.progress-bar');
    progressBar.style.width = (scrollPercent * 100) + '%';
});

Salin selepas log masuk

Aplikasi PHP
Akhir sekali, kami menggunakan PHP untuk menjana kandungan artikel secara dinamik. Berikut ialah contoh membaca kandungan fail teks.

<?php
// 读取文章内容
$articleContent = file_get_contents('article.txt');

// 将文章内容输出到页面
echo '<div class="article-content" id="articleContent">';
echo $articleContent;
echo '</div>';
?>

Salin selepas log masuk

Di atas adalah semua contoh kod untuk melaksanakan fungsi bar kemajuan membaca artikel. Anda boleh mengubah suai dan mengoptimumkan kod di atas mengikut keperluan sebenar anda. Saya harap artikel ini membantu anda dan saya ucapkan selamat maju jaya dalam kerja pembangunan anda!

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